intelicoreact 1.3.21 → 1.3.23

package/dist/Functions/useFormTools/index.js

@@ -1,68 +1,38 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useFormTools;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _General2 = _interopRequireDefault(require("./functions/General"));
-
+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
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var DefaultFocusControllerProps = {
+const DefaultFocusControllerProps = {
   setAutoFocus: true,
   onlyEmptyFieldAutoFocus: false
 };
-
 function useFormTools() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      form = _ref.form,
-      setForm = _ref.setForm,
-      FormType = _ref.FormType,
-      FormFields = _ref.FormFields,
-      _ref$FormDataDriverNa = _ref.FormDataDriverName,
-      FormDataDriverName = _ref$FormDataDriverNa === void 0 ? 'ArrayWithObjects' || 'ObjectWithIterableObjects' || 'ObjectWithNamedKeyObjects' : _ref$FormDataDriverNa,
-      _ref$FormDataDriver = _ref.FormDataDriver,
-      FormDataDriver = _ref$FormDataDriver === void 0 ? null : _ref$FormDataDriver,
-      _ref$FocusControllerP = _ref.FocusControllerProps,
-      FocusControllerProps = _ref$FocusControllerP === void 0 ? DefaultFocusControllerProps : _ref$FocusControllerP,
-      _ref$goToNextFieldOnE = _ref.goToNextFieldOnEnterPressed,
-      goToNextFieldOnEnterPressed = _ref$goToNextFieldOnE === void 0 ? true : _ref$goToNextFieldOnE;
-
-  FocusControllerProps = _objectSpread(_objectSpread({}, DefaultFocusControllerProps), FocusControllerProps);
-  var FormDataDrivers = {
+  let {
+    form,
+    setForm,
+    FormType,
+    FormFields,
+    FormDataDriverName = "ArrayWithObjects" || "ObjectWithIterableObjects" || "ObjectWithNamedKeyObjects",
+    FormDataDriver = null,
+    FocusControllerProps = DefaultFocusControllerProps,
+    goToNextFieldOnEnterPressed = true
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  FocusControllerProps = {
+    ...DefaultFocusControllerProps,
+    ...FocusControllerProps
+  };
+  const FormDataDrivers = {
     ArrayWithObjects: {
       handlers: _ArrayWithObjects.default,
       default: true
@@ -74,54 +44,42 @@ function useFormTools() {
       handlers: _ObjectWithNamedKeyObjects.default
     }
   };
-
-  var getFormDataDriver = function getFormDataDriver(name) {
+  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(function (df) {
-      return df.default === true;
-    })) === null || _Object$values$find === void 0 ? void 0 : _Object$values$find.handlers) || function () {
-      return {};
-    };
+    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) || (() => ({}));
   };
-
-  var getFormDataDriverInstance = function getFormDataDriverInstance(name) {
+  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
+  } = (0, _General.default)();
+  const {
+    getFieldData,
+    getFormField,
+    setFormFields,
+    setFormField,
+    getFormFieldsAsArray,
+    getFormFieldsKeys,
+    removeAllFormFields,
+    removeFormField,
+    removeFormFields
+  } = getFormDataDriverInstance(FormDataDriverName, {
+    form,
+    setForm,
+    FormFields
+  });
 
-    return getFormDataDriver(name).apply(void 0, args);
-  };
-
-  var _General = (0, _General2.default)(),
-      getFieldClassName = _General.getFieldClassName,
-      updateFormField = _General.updateFormField;
-
-  var _getFormDataDriverIns = getFormDataDriverInstance(FormDataDriverName, {
-    form: form,
-    setForm: setForm,
-    FormFields: FormFields
-  }),
-      getFieldData = _getFormDataDriverIns.getFieldData,
-      getFormField = _getFormDataDriverIns.getFormField,
-      setFormFields = _getFormDataDriverIns.setFormFields,
-      _setFormField = _getFormDataDriverIns.setFormField,
-      getFormFieldsAsArray = _getFormDataDriverIns.getFormFieldsAsArray,
-      getFormFieldsKeys = _getFormDataDriverIns.getFormFieldsKeys,
-      removeAllFormFields = _getFormDataDriverIns.removeAllFormFields,
-      removeFormField = _getFormDataDriverIns.removeFormField,
-      removeFormFields = _getFormDataDriverIns.removeFormFields; ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
   //--- OnChange Observer ---//--- START ---//
-
-
-  var _useState = (0, _react.useState)({}),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      onChangeObservers = _useState2[0],
-      setOnChangeObservers = _useState2[1];
-
-  var addOnChangeObserver = function addOnChangeObserver(key, cb) {
-    var observerId = null;
-    setOnChangeObservers(function (state) {
+  const [onChangeObservers, setOnChangeObservers] = (0, _react.useState)({});
+  const addOnChangeObserver = (key, cb) => {
+    let observerId = null;
+    setOnChangeObservers(state => {
       //Set Default Value
       if (!state[key]) state[key] = {};
       observerId = state[key].length;
@@ -130,261 +88,161 @@ function useFormTools() {
     });
     return observerId;
   };
-
-  var removeOnChangeObserver = function removeOnChangeObserver(key, id) {
-    setOnChangeObservers(function (state) {
+  const removeOnChangeObserver = (key, id) => {
+    setOnChangeObservers(state => {
       //Set Default Value
       if (!state[key]) return state;
-      state[key] = Object.keys(state).filter(function (cbId) {
-        return cbId !== id;
-      }).map(function (cbId) {
-        return state[key][cbId];
-      });
+      state[key] = Object.keys(state).filter(cbId => cbId !== id).map(cbId => state[key][cbId]);
       return state;
     });
   };
-
-  var onChangeObserver = function onChangeObserver(key, value) {
-    if (!onChangeObservers[key] || (0, _typeof2.default)(onChangeObservers[key]) !== 'object') return;
-    var Observers = onChangeObservers[key];
-    Object.values(Observers).map(function (cb) {
+  const onChangeObserver = (key, value) => {
+    if (!onChangeObservers[key] || typeof onChangeObservers[key] !== "object") return;
+    const Observers = onChangeObservers[key];
+    Object.values(Observers).map(cb => {
       cb({
-        value: value,
-        form: form
+        value,
+        form
       });
       return null;
     });
   };
-
-  var onFieldChange = function onFieldChange(key, value) {
+  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,
+      error: "",
+      value
+    }), key);
+  };
+  //--- OnChange Observer ---//--- END ---//
 
-    _setFormField(function (field) {
-      return _objectSpread(_objectSpread({}, field), {}, {
-        error: '',
-        value: value
-      });
-    }, key);
-  }; //--- OnChange Observer ---//--- END ---//
   ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
-  //--- Form Submit Blocker ---//--- START ---//
 
-
-  var _useState3 = (0, _react.useState)([]),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      formSubmitBlockers = _useState4[0],
-      setFormSubmitBlockers = _useState4[1];
-
-  var toggleFormSubmitBlock = function toggleFormSubmitBlock(key, value) {
-    setFormSubmitBlockers(function (state) {
-      return state.includes(key) || !value ? (0, _toConsumableArray2.default)(state.filter(function (k) {
-        return k !== key;
-      })) : [].concat((0, _toConsumableArray2.default)(state), [key]);
-    });
+  //--- 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 ---//
 
-  var clearFormSubmitBlockers = function clearFormSubmitBlockers() {
-    return setFormSubmitBlockers([]);
-  }; //--- Form Submit Blocker ---//--- END ---//
   ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
+
   //--- Property Observer Blocker ---//--- START ---//
   // const [propertyObservers, setPropertyObservers] = useState({});
   // function addPropertyObserver () {
   // };
   //--- Property Observer Blocker ---//--- END ---//
+
   ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
-  //--- Render Fields Controller ---//--- START ---//
-
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isFormFieldsAdded = _useState6[0],
-      setIsFormFieldsAdded = _useState6[1];
-
-  var _useState7 = (0, _react.useState)([]),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      renderFormFields = _useState8[0],
-      setRenderFormFieldsState = _useState8[1];
-
-  var setRenderFormFields = function setRenderFormFields(data) {
-    setIsFormFieldsAdded(true); // eslint-disable-next-line no-use-before-define
-
-    removeRenderFields(renderFormFields); // eslint-disable-next-line no-use-before-define
 
+  //--- 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
     resetIsInitFocused();
     setRenderFormFieldsState(data);
   };
-
-  var addRenderFields = function addRenderFields(fields) {
-    setRenderFormFieldsState(function (state) {
-      return [].concat((0, _toConsumableArray2.default)(state), (0, _toConsumableArray2.default)(fields));
-    });
-  };
-
-  var removeRenderFields = function removeRenderFields(fields) {
-    setRenderFormFieldsState(function (state) {
-      return state.filter(function (field) {
-        return !fields.includes(field);
+  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"])');
+    const currentIndex = await new Promise(resolve => {
+      focusable.forEach((node, i) => {
+        if (node === e.target) resolve(i);
       });
     });
+    if (!currentIndex) return false;
+    const nextIndex = currentIndex + 1;
+    if (nextIndex >= focusable.length) return false;
+    const nextItem = focusable[nextIndex];
+    nextItem.focus();
   };
-
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      isFormRendered = _useState10[0],
-      setIsFormRendered = _useState10[1];
-
-  var submitIsFormRendered = function submitIsFormRendered() {
-    return setIsFormRendered(true);
-  };
-
-  var resetIsFormRendered = function resetIsFormRendered() {
-    return setIsFormRendered(false);
-  };
-
-  var onEnterDown = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
-      var focusable, currentIndex, nextIndex, nextItem;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (goToNextFieldOnEnterPressed) {
-                _context.next = 2;
-                break;
-              }
-
-              return _context.abrupt("return", false);
-
-            case 2:
-              focusable = document.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
-              _context.next = 5;
-              return new Promise(function (resolve) {
-                focusable.forEach(function (node, i) {
-                  if (node === e.target) resolve(i);
-                });
-              });
-
-            case 5:
-              currentIndex = _context.sent;
-
-              if (currentIndex) {
-                _context.next = 8;
-                break;
-              }
-
-              return _context.abrupt("return", false);
-
-            case 8:
-              nextIndex = currentIndex + 1;
-
-              if (!(nextIndex >= focusable.length)) {
-                _context.next = 11;
-                break;
-              }
-
-              return _context.abrupt("return", false);
-
-            case 11:
-              nextItem = focusable[nextIndex];
-              nextItem.focus();
-
-            case 13:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function onEnterDown(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-
-  var onKeyDown = function onKeyDown() {
+  const onKeyDown = function () {
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-
-    var event = args.reduce(function (e, item) {
+    const event = args.reduce((e, item) => {
       if ((item === null || item === void 0 ? void 0 : item.nativeEvent) instanceof KeyboardEvent) return item;
       return e;
     }, null);
     if (!event) return false;
-    var keyCode = event.keyCode;
-
+    const {
+      keyCode
+    } = event;
     switch (keyCode) {
       //OnEnterDown
       case 13:
         onEnterDown(event);
         break;
-
       default:
         break;
     }
-  }; //On Type Change
-
+  };
 
-  (0, _react.useEffect)(function () {
+  //On Type Change
+  (0, _react.useEffect)(() => {
     resetIsFormRendered();
-  }, [FormType]); //On Render Fields Change
+  }, [FormType]);
 
-  (0, _react.useEffect)(function () {
-    if (isFormFieldsAdded) resetIsFormRendered(false); //Add Form Fields
+  //On Render Fields Change
+  (0, _react.useEffect)(() => {
+    if (isFormFieldsAdded) resetIsFormRendered(false);
 
+    //Add Form Fields
     if (renderFormFields.length !== 0) {
-      setFormFields(function (fields) {
-        return renderFormFields.reduce(function (result, key) {
+      setFormFields(fields => {
+        return renderFormFields.reduce((result, key) => {
           var _field$className;
-
-          var fieldData = getFieldData(key);
-          var field = !getFormField(key) ? fieldData : getFormField(key);
-
-          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) {
+          const fieldData = getFieldData(key);
+          const field = getFormField(key) ? getFormField(key) : fieldData;
+          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 ((0, _typeof2.default)(fieldData === null || fieldData === void 0 ? void 0 : fieldData.label) === 'object') {
+          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) {
-            var onKeyDownProp = field.onKeyDown || function () {};
-
+            const onKeyDownProp = field.onKeyDown || (() => {});
             field.onKeyDown = function () {
-              onKeyDown.apply(void 0, arguments);
-              onKeyDownProp.apply(void 0, arguments);
-            };
-          } //Is Field Value Changed By USER
-          // eslint-disable-next-line no-use-before-define
-
-
-          addOnFieldRenderedObserver(key, function () {
-            var _getFormField2, _getFormField2$ref, _getFormField2$ref$cu;
-
-            var 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 handler = function handler() {
-              return _setFormField({
-                isValueChangedByUser: true
-              }, key);
+              onKeyDown(...arguments);
+              onKeyDownProp(...arguments);
             };
+          }
 
-            element === null || element === void 0 ? void 0 : element.addEventListener('paste', handler, {
+          //Is Field Value Changed By USER
+          // eslint-disable-next-line no-use-before-define
+          addOnFieldRenderedObserver(key, () => {
+            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 || 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);
@@ -393,53 +251,40 @@ function useFormTools() {
       });
     }
   }, [renderFormFields]);
-
-  var _useState11 = (0, _react.useState)([]),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      onFormRenderObservers = _useState12[0],
-      setOnFormRenderObservers = _useState12[1];
-
-  var addOnFormRenderObserver = function addOnFormRenderObserver(cb) {
-    var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-        _ref3$once = _ref3.once,
-        once = _ref3$once === void 0 ? false : _ref3$once;
-
-    setOnFormRenderObservers(function (state) {
-      return [].concat((0, _toConsumableArray2.default)(state), [{
-        cb: cb,
-        once: once,
-        isWorkedOut: false
-      }]);
-    });
-  }; // eslint-disable-next-line no-unused-vars
-
-
-  var updateOnFormRenderObserver = function updateOnFormRenderObserver(key, data) {
-    setOnFormRenderObservers(function (state) {
-      var copy = (0, _toConsumableArray2.default)(state);
-      copy[key] = _objectSpread(_objectSpread({}, state[key]), data);
+  const [onFormRenderObservers, setOnFormRenderObservers] = (0, _react.useState)([]);
+  const addOnFormRenderObserver = function (cb) {
+    let {
+      once = false
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    setOnFormRenderObservers(state => [...state, {
+      cb,
+      once,
+      isWorkedOut: false
+    }]);
+  };
+  // eslint-disable-next-line no-unused-vars
+  const updateOnFormRenderObserver = (key, data) => {
+    setOnFormRenderObservers(state => {
+      const copy = [...state];
+      copy[key] = {
+        ...state[key],
+        ...data
+      };
       return copy;
     });
   };
-
-  var removeOnFormRenderObserver = function removeOnFormRenderObserver(key) {
-    setOnFormRenderObservers(function (state) {
-      return state.slice().filter(function (v, i) {
-        return i !== key;
-      });
-    });
+  const removeOnFormRenderObserver = key => {
+    setOnFormRenderObservers(state => state.slice().filter((v, i) => i !== key));
   };
-
-  var onFormRenderWorker = function onFormRenderWorker() {
+  const onFormRenderWorker = () => {
     // eslint-disable-next-line default-param-last
     onFormRenderObservers.map(function () {
-      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          once = _ref4.once,
-          isWorkedOut = _ref4.isWorkedOut,
-          _ref4$cb = _ref4.cb,
-          cb = _ref4$cb === void 0 ? function () {} : _ref4$cb;
-
-      var key = arguments.length > 1 ? arguments[1] : undefined;
+      let {
+        once,
+        isWorkedOut,
+        cb = () => {}
+      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      let key = arguments.length > 1 ? arguments[1] : undefined;
       if (once && isWorkedOut) return null;
       cb(form);
       if (once) removeOnFormRenderObserver(key);else updateOnFormRenderObserver(key, {
@@ -447,330 +292,265 @@ function useFormTools() {
       });
       return null;
     });
-  }; //On Form Rendered
-
+  };
 
-  (0, _react.useEffect)(function () {
+  //On Form Rendered
+  (0, _react.useEffect)(() => {
     if (!isFormRendered && onFormRenderObservers.length) {
-      var formFieldsKeys = getFormFieldsKeys(form);
-      var isAllFieldsRendered = renderFormFields.reduce(function (result, key) {
+      const formFieldsKeys = getFormFieldsKeys(form);
+      const isAllFieldsRendered = renderFormFields.reduce((result, key) => {
         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 ---//
 
-  var hightliteErrorLabels = function hightliteErrorLabels() {
-    var fields = getFormFieldsAsArray();
-    var filtered = fields === null || fields === void 0 ? void 0 : fields.reduce(function (result, field) {
+  //--- 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(_objectSpread(_objectSpread({}, 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(function (field) {
-      var formField = document.querySelector(".".concat(field === null || field === void 0 ? void 0 : field.className));
+    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');
-
+      formField.classList.remove("errorLabelHightlite");
       if (field !== null && field !== void 0 && field.error) {
-        formField.classList.add('errorLabelHightlite');
+        formField.classList.add("errorLabelHightlite");
       }
-
       return null;
     });
   };
-
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     hightliteErrorLabels();
-  }, [form]); //--- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- END ---//
+  }, [form]);
+  //--- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- END ---//
+
   ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
-  //--- Fields Focus Controller ---//--- START ---//
-
-  var _useState13 = (0, _react.useState)(false),
-      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      isInitFocused = _useState14[0],
-      setIsInitFocused = _useState14[1];
-
-  var _useState15 = (0, _react.useState)(null),
-      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      autoFocusedField = _useState16[0],
-      setAutoFocusedField = _useState16[1];
-
-  var setFirstFieldInitFocused = function setFirstFieldInitFocused() {
-    return setIsInitFocused(true);
-  };
 
-  var resetIsInitFocused = function resetIsInitFocused() {
-    return setIsInitFocused(false);
-  };
-
-  var toggleFieldFocus = function toggleFieldFocus(_ref5) {
-    var key = _ref5.key,
-        _ref5$cb = _ref5.cb,
-        cb = _ref5$cb === void 0 ? function () {} : _ref5$cb,
-        argForm = _ref5.form,
-        field = _ref5.field;
-    var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'focus';
+  //--- 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,
+      cb = () => {},
+      form: argForm,
+      field
+    } = _ref;
+    let action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "focus";
     if (!key && !field) return null;
     if (!argForm) argForm = form;
-    var formField = field || getFormField(key, argForm);
-
+    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(function () {
-      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]();
+    if (action === "focus" && FocusControllerProps.onlyEmptyFieldAutoFocus && Boolean(formField === null || formField === void 0 ? void 0 : formField.value)) return null;
+    setTimeout(() => {
+      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);
   };
-
-  var setFieldFocus = function setFieldFocus(_ref6) {
-    var key = _ref6.key,
-        _ref6$cb = _ref6.cb,
-        cb = _ref6$cb === void 0 ? function () {} : _ref6$cb,
-        argForm = _ref6.form,
-        field = _ref6.field;
+  const setFieldFocus = _ref2 => {
+    let {
+      key,
+      cb = () => {},
+      form: argForm,
+      field
+    } = _ref2;
     return toggleFieldFocus({
-      key: key,
-      cb: cb,
+      key,
+      cb,
       form: argForm,
-      field: field
-    }, 'focus');
+      field
+    }, "focus");
   };
-
-  var setFieldBlur = function setFieldBlur(_ref7) {
-    var key = _ref7.key,
-        _ref7$cb = _ref7.cb,
-        cb = _ref7$cb === void 0 ? function () {} : _ref7$cb,
-        argForm = _ref7.form,
-        field = _ref7.field;
+  const setFieldBlur = _ref3 => {
+    let {
+      key,
+      cb = () => {},
+      form: argForm,
+      field
+    } = _ref3;
     return toggleFieldFocus({
-      key: key,
-      cb: cb,
+      key,
+      cb,
       form: argForm,
-      field: field
-    }, 'blur');
+      field
+    }, "blur");
   };
-
-  var setFirstFieldFocus = function setFirstFieldFocus() {
+  const setFirstFieldFocus = () => {
     var _field;
-
-    var field = null;
-
-    for (var i = 0; i < renderFormFields.length && !field; ++i) {
-      var key = renderFormFields[i];
-      var tmpField = getFormField(key);
+    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);
-
-    var callback = function callback() {
-      _setFormField({
+    const callback = () => {
+      setFormField({
         value: field.value
       }, field.key);
-
       setFirstFieldInitFocused();
     };
-
-    setTimeout(function () {
-      return setFieldFocus({
-        key: field.key,
-        cb: callback,
-        form: form
-      });
-    }, 50);
-  };
-
-  var _useState17 = (0, _react.useState)({}),
-      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      onFieldFocusCallbacks = _useState18[0],
-      setOnFieldFocusCallbacks = _useState18[1];
-
-  var addOnFieldFocusCallback = function addOnFieldFocusCallback(key, cb) {
-    setOnFieldFocusCallbacks(function (state) {
-      var stateCopy = _objectSpread({}, state);
-
+    setTimeout(() => setFieldFocus({
+      key: field.key,
+      cb: callback,
+      form
+    }), 50);
+  };
+  const [onFieldFocusCallbacks, setOnFieldFocusCallbacks] = (0, _react.useState)({});
+  const addOnFieldFocusCallback = (key, cb) => {
+    setOnFieldFocusCallbacks(state => {
+      const stateCopy = {
+        ...state
+      };
       if (!state[key]) stateCopy[key] = [];
       stateCopy[key].push(cb);
       return stateCopy;
     });
   };
-
-  var callOnFieldFocusCallbacks = function callOnFieldFocusCallbacks(key) {
+  const callOnFieldFocusCallbacks = key => {
     var _onFieldFocusCallback;
-
     if (!Array.isArray(onFieldFocusCallbacks[key])) return null;
-    (_onFieldFocusCallback = onFieldFocusCallbacks[key]) === null || _onFieldFocusCallback === void 0 ? void 0 : _onFieldFocusCallback.map(function (cb) {
-      return cb();
-    });
+    (_onFieldFocusCallback = onFieldFocusCallbacks[key]) === null || _onFieldFocusCallback === void 0 || _onFieldFocusCallback.map(cb => cb());
   };
-
-  var _useState19 = (0, _react.useState)([]),
-      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      focusOnRenderFields = _useState20[0],
-      setFocusOnRenderFields = _useState20[1];
-
-  var addFocusFieldOnRender = function addFocusFieldOnRender(key, cb) {
-    setFocusOnRenderFields(function (state) {
-      return [].concat((0, _toConsumableArray2.default)(state), [key]);
-    });
+  const [focusOnRenderFields, setFocusOnRenderFields] = (0, _react.useState)([]);
+  const addFocusFieldOnRender = (key, cb) => {
+    setFocusOnRenderFields(state => [...state, key]);
     if (cb) addOnFieldFocusCallback(key, cb);
   };
-
-  var removeFocusFieldOnRender = function removeFocusFieldOnRender(key) {
-    setFocusOnRenderFields(function (state) {
-      return state.filter(function (field) {
-        return field !== key;
-      });
-    });
+  const removeFocusFieldOnRender = key => {
+    setFocusOnRenderFields(state => state.filter(field => field !== key));
   };
-
-  (0, _react.useEffect)(function () {
+  (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(function (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) {
-          var cb = function cb() {
+      (_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: key,
-            form: form,
-            cb: cb
+            key,
+            form,
+            cb
           });
         }
-
         return null;
       });
     }
   }, [form, focusOnRenderFields, isInitFocused, isFormRendered]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     setAutoFocusedField(null);
   }, [isInitFocused]);
-  (0, _react.useEffect)(function () {
+  (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 ---//
-
-  var _useState21 = (0, _react.useState)({}),
-      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-      onFieldRenderedObservers = _useState22[0],
-      setOnFieldRenderedObservers = _useState22[1];
-
-  var _useState23 = (0, _react.useState)(false),
-      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
-      isFieldObserversReset = _useState24[0],
-      setIsFieldObserversReset = _useState24[1];
 
-  var resetOnFieldRenderObserversWorkedOut = function resetOnFieldRenderObserversWorkedOut() {
+  //--- OnFieldRendered Observer ---//--- START ---//
+  const [onFieldRenderedObservers, setOnFieldRenderedObservers] = (0, _react.useState)({});
+  const [isFieldObserversReset, setIsFieldObserversReset] = (0, _react.useState)(false);
+  const resetOnFieldRenderObserversWorkedOut = () => {
     if (!isFieldObserversReset && renderFormFields.length) {
-      renderFormFields.map(function (key) {
-        _setFormField({
+      renderFormFields.map(key => {
+        setFormField({
           isOnRenderObserversWorkedOut: false
         }, key);
-
         return key;
       });
       setIsFieldObserversReset(true);
     }
   };
-
-  var addOnFieldRenderedObserver = function addOnFieldRenderedObserver(key, cb) {
-    var isOnceCallable = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-    var observerId = null;
-    setOnFieldRenderedObservers(function (state) {
+  const addOnFieldRenderedObserver = function (key, cb) {
+    let isOnceCallable = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    let observerId = null;
+    setOnFieldRenderedObservers(state => {
       //Set Default Value
       if (!state[key]) state[key] = {};
       observerId = Object.keys(state[key]).length || 0;
       state[key][observerId] = {
         f: cb,
-        isOnceCallable: isOnceCallable
+        isOnceCallable
       };
       return state;
     });
     return observerId;
   };
-
-  var updateOnFieldRenderedObserver = function updateOnFieldRenderedObserver(key, id, data) {
-    setOnFieldRenderedObservers(function (state) {
+  const updateOnFieldRenderedObserver = (key, id, data) => {
+    setOnFieldRenderedObservers(state => {
       //Set Default Value
       if (!state[key]) return state;
-      state[key][id] = _objectSpread(_objectSpread({}, state[key][id]), data);
+      state[key][id] = {
+        ...state[key][id],
+        ...data
+      };
       return state;
     });
   };
-
-  var removeOnFieldRenderedObserver = function removeOnFieldRenderedObserver(key, id) {
-    setOnFieldRenderedObservers(function (state) {
+  const removeOnFieldRenderedObserver = (key, id) => {
+    setOnFieldRenderedObservers(state => {
       //Set Default Value
       if (!state[key]) return state;
-      state[key] = Object.keys(state).filter(function (cbId) {
-        return cbId !== id;
-      }).map(function (cbId) {
-        return state[key][cbId];
-      });
+      state[key] = Object.keys(state).filter(cbId => cbId !== id).map(cbId => state[key][cbId]);
       return state;
     });
   };
-
-  var onFieldRenderedObserver = function onFieldRenderedObserver(key, data) {
-    if (!onFieldRenderedObservers[key] || (0, _typeof2.default)(onFieldRenderedObservers[key]) !== 'object') return;
-    var Observers = onFieldRenderedObservers[key];
-    var FilteredObservers = Object.values(Observers).filter(function (observer) {
-      return !(observer !== null && observer !== void 0 && observer.isObserverWorkedOut);
-    });
+  const onFieldRenderedObserver = (key, data) => {
+    if (!onFieldRenderedObservers[key] || typeof onFieldRenderedObservers[key] !== "object") return;
+    const Observers = onFieldRenderedObservers[key];
+    const FilteredObservers = Object.values(Observers).filter(observer => !(observer !== null && observer !== void 0 && observer.isObserverWorkedOut));
     if (FilteredObservers.length === 0) return null;
-
-    _setFormField({
+    setFormField({
       isOnRenderObserversWorkedOut: true
     }, key);
-
-    FilteredObservers.map(function (_ref8, id) {
-      var f = _ref8.f,
-          isOnceCallable = _ref8.isOnceCallable;
+    FilteredObservers.map((_ref4, id) => {
+      let {
+        f,
+        isOnceCallable
+      } = _ref4;
       f(data);
       if (isOnceCallable) updateOnFieldRenderedObserver(key, id, {
         isObserverWorkedOut: true
@@ -778,41 +558,40 @@ function useFormTools() {
       return null;
     });
   };
-
-  var onRenderObserverWorker = function onRenderObserverWorker() {
+  const onRenderObserverWorker = () => {
     var _getFormFieldsKeys2;
-
-    return (_getFormFieldsKeys2 = getFormFieldsKeys(form)) === null || _getFormFieldsKeys2 === void 0 ? void 0 : _getFormFieldsKeys2.map(function (key) {
+    return (_getFormFieldsKeys2 = getFormFieldsKeys(form)) === null || _getFormFieldsKeys2 === void 0 ? void 0 : _getFormFieldsKeys2.map(key => {
       //OnFieldRendered
-      var fieldData = getFormField(key);
-
+      const fieldData = getFormField(key);
       if (!(fieldData !== null && fieldData !== void 0 && fieldData.isOnRenderObserversWorkedOut)) {
         onFieldRenderedObserver(key, fieldData);
         return {
-          key: key,
+          key,
           isWorkedOut: true
         };
       }
-
       return {
-        key: key,
+        key,
         isWorkedOut: false
       };
     });
   };
-
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     resetOnFieldRenderObserversWorkedOut();
     onRenderObserverWorker();
   }, [form]);
-  (0, _react.useEffect)(function () {
+  (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
@@ -830,123 +609,126 @@ function useFormTools() {
   //       else if (prev[key] !== current[key]) {
   //         result[key] = current[key];
   //       }
+
   //       if (i === arr.length-1) {
   //         resolve(result);
   //       }
+
   //       return result;
   //     }, {});
   //   });
   // };
+
   ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
-  //--- WindowScrollController ---//--- START ---//
 
-  var scrollToField = function scrollToField(_ref9) {
+  //--- WindowScrollController ---//--- START ---//
+  const scrollToField = _ref5 => {
     var _field2, _field3, _wrapperRef$current;
-
-    var _ref9$key = _ref9.key,
-        key = _ref9$key === void 0 ? null : _ref9$key,
-        _ref9$field = _ref9.field,
-        field = _ref9$field === void 0 ? null : _ref9$field,
-        argForm = _ref9.form;
+    let {
+      key = null,
+      field = null,
+      form: argForm
+    } = _ref5;
     if (!key && !field) return false;
     if (!argForm) argForm = form;
     if (!field) field = getFormField(key, argForm);
-    var 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
-
-    var _wrapperRef$current$g = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.getBoundingClientRect(),
-        topOffset = _wrapperRef$current$g.top;
-
-    var scrollTop = Math.abs(Math.abs(topOffset) - Math.abs(window.scrollY)) - 16;
+    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 || (_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 ---//
+
   ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
 
-
-  var addErrorsToForm = function addErrorsToForm(errors) {
-    var argForm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : form;
+  const addErrorsToForm = function (errors) {
+    let argForm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : form;
     if (!argForm) argForm = form;
-    setFormFields(function (fields) {
-      return errors.reduce(function (fields, _ref10) {
-        var error = _ref10.message,
-            errKey = _ref10.propertyPath;
+    setFormFields(fields => {
+      return errors.reduce((fields, _ref6) => {
+        let {
+          message: error,
+          propertyPath: errKey
+        } = _ref6;
         return updateFormField(fields, {
-          error: error
+          error
         }, errKey);
       }, fields);
     });
   };
-
   return {
-    FormDataDrivers: FormDataDrivers,
+    FormDataDrivers,
     //OnChangeObserver
-    addOnChangeObserver: addOnChangeObserver,
-    removeOnChangeObserver: removeOnChangeObserver,
-    onChangeObservers: onChangeObservers,
+    addOnChangeObserver,
+    removeOnChangeObserver,
+    onChangeObservers,
     //OnChangeHandler
-    onFieldChange: onFieldChange,
+    onFieldChange,
     //Form Submit Blocker
-    toggleFormSubmitBlock: toggleFormSubmitBlock,
-    clearFormSubmitBlockers: clearFormSubmitBlockers,
+    toggleFormSubmitBlock,
+    clearFormSubmitBlockers,
     isFormSubmitBlocked: Boolean(formSubmitBlockers.length),
     //Property Observers
     // addPropertyObserver,
+
     //Render Fields
-    renderFormFields: renderFormFields,
-    setRenderFormFields: setRenderFormFields,
-    addRenderFields: addRenderFields,
-    removeRenderFields: removeRenderFields,
-    getFieldClassName: getFieldClassName,
+    renderFormFields,
+    setRenderFormFields,
+    addRenderFields,
+    removeRenderFields,
+    getFieldClassName,
     //Field Focus Controller
-    isInitFocused: isInitFocused,
-    setFirstFieldInitFocused: setFirstFieldInitFocused,
-    resetIsInitFocused: resetIsInitFocused,
-    setFieldFocus: setFieldFocus,
-    setFieldBlur: setFieldBlur,
-    setFirstFieldFocus: setFirstFieldFocus,
-    autoFocusedField: autoFocusedField,
-    addFocusFieldOnRender: addFocusFieldOnRender,
-    removeFocusFieldOnRender: removeFocusFieldOnRender,
+    isInitFocused,
+    setFirstFieldInitFocused,
+    resetIsInitFocused,
+    setFieldFocus,
+    setFieldBlur,
+    setFirstFieldFocus,
+    autoFocusedField,
+    addFocusFieldOnRender,
+    removeFocusFieldOnRender,
     //Field Render Controller
-    addOnFieldRenderedObserver: addOnFieldRenderedObserver,
-    removeOnFieldRenderedObserver: removeOnFieldRenderedObserver,
-    onFieldRenderedObservers: onFieldRenderedObservers,
-    updateFormField: updateFormField,
-    addOnFormRenderObserver: addOnFormRenderObserver,
-    submitIsFormRendered: submitIsFormRendered,
-    resetIsFormRendered: resetIsFormRendered,
-    renderFields: function renderFields(_ref11) {
-      var _ref11$form = _ref11.form,
-          argForm = _ref11$form === void 0 ? form : _ref11$form,
-          _ref11$fields = _ref11.fields,
-          argFields = _ref11$fields === void 0 ? renderFormFields : _ref11$fields,
-          _ref11$cols = _ref11.cols,
-          argCols = _ref11$cols === void 0 ? 1 : _ref11$cols,
-          RenderFieldComponent = _ref11.RenderFieldComponent;
+    addOnFieldRenderedObserver,
+    removeOnFieldRenderedObserver,
+    onFieldRenderedObservers,
+    updateFormField,
+    addOnFormRenderObserver,
+    submitIsFormRendered,
+    resetIsFormRendered,
+    renderFields: _ref7 => {
+      let {
+        form: argForm = form,
+        fields: argFields = renderFormFields,
+        cols: argCols = 1,
+        RenderFieldComponent
+      } = _ref7;
       return (0, _RenderFields.default)({
         form: argForm,
         fields: argFields,
         cols: argCols,
-        RenderFieldComponent: RenderFieldComponent,
-        onFieldChange: onFieldChange,
+        RenderFieldComponent,
+        onFieldChange,
         FormDataDriver: getFormDataDriver(FormDataDriverName)
       });
     },
-    scrollToField: scrollToField,
-    getFieldData: getFieldData,
-    getFormField: getFormField,
-    setFormFields: setFormFields,
-    setFormField: function setFormField(data, key) {
-      return _setFormField(data, key);
-    },
-    getFormFieldsAsArray: getFormFieldsAsArray,
-    getFormFieldsKeys: getFormFieldsKeys,
-    removeAllFormFields: removeAllFormFields,
-    removeFormField: removeFormField,
-    removeFormFields: removeFormFields,
-    addErrorsToForm: addErrorsToForm
+    scrollToField,
+    getFieldData,
+    getFormField,
+    setFormFields,
+    setFormField: (data, key) => setFormField(data, key),
+    getFormFieldsAsArray,
+    getFormFieldsKeys,
+    removeAllFormFields,
+    removeFormField,
+    removeFormFields,
+    addErrorsToForm
   };
 }