intelicoreact 1.5.33 → 1.5.35

package/dist/Functions/useFormTools/index.js

@@ -1,734 +1,661 @@
+// eslint-disable-next-line no-unused-vars
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    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
-
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return useFormTools;
+    }
+});
+const _react = require("react");
+const _ArrayWithObjects = /*#__PURE__*/ _interop_require_default(require("./form-drivers/ArrayWithObjects"));
+const _ObjectWithIterableObjects = /*#__PURE__*/ _interop_require_default(require("./form-drivers/ObjectWithIterableObjects"));
+const _ObjectWithNamedKeyObjects = /*#__PURE__*/ _interop_require_default(require("./form-drivers/ObjectWithNamedKeyObjects"));
+const _General = /*#__PURE__*/ _interop_require_default(require("./functions/General"));
+const _RenderFields = /*#__PURE__*/ _interop_require_default(require("./functions/RenderFields"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 const DefaultFocusControllerProps = {
-  setAutoFocus: true,
-  onlyEmptyFieldAutoFocus: false
+    setAutoFocus: true,
+    onlyEmptyFieldAutoFocus: false
 };
-function useFormTools() {
-  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
-    },
-    ObjectWithIterableObjects: {
-      handlers: _ObjectWithIterableObjects.default
-    },
-    ObjectWithNamedKeyObjects: {
-      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
-  } = (0, _General.default)();
-  const {
-    getFieldData,
-    getFormField,
-    setFormFields,
-    setFormField,
-    getFormFieldsAsArray,
-    getFormFieldsKeys,
-    removeAllFormFields,
-    removeFormField,
-    removeFormFields
-  } = getFormDataDriverInstance(FormDataDriverName, {
-    form,
-    setForm,
-    FormFields
-  });
-
-  ///////////////////////////////////////////////////////////////
-  //--- OnChange Observer ---//--- START ---//
-  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;
-      state[key][observerId] = cb;
-      return state;
-    });
-    return observerId;
-  };
-  const removeOnChangeObserver = (key, id) => {
-    setOnChangeObservers(state => {
-      //Set Default Value
-      if (!state[key]) return state;
-      state[key] = Object.keys(state).filter(cbId => cbId !== id).map(cbId => state[key][cbId]);
-      return state;
-    });
-  };
-  const onChangeObserver = (key, value) => {
-    if (!onChangeObservers[key] || typeof onChangeObservers[key] !== "object") return;
-    const Observers = onChangeObservers[key];
-    Object.values(Observers).map(cb => {
-      cb({
-        value,
-        form
-      });
-      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,
-      error: "",
-      value
-    }), key);
-  };
-  //--- OnChange Observer ---//--- END ---//
-
-  ///////////////////////////////////////////////////////////////
-  ///////////////////////////////////////////////////////////////
-
-  //--- 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 ---//
-
-  ///////////////////////////////////////////////////////////////
-  ///////////////////////////////////////////////////////////////
-
-  //--- Property Observer Blocker ---//--- START ---//
-  // const [propertyObservers, setPropertyObservers] = useState({});
-  // function addPropertyObserver () {
-  // };
-  //--- Property Observer Blocker ---//--- END ---//
-
-  ///////////////////////////////////////////////////////////////
-  ///////////////////////////////////////////////////////////////
-
-  //--- 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);
-  };
-  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);
-      });
+function useFormTools({ form, setForm, FormType, FormFields, FormDataDriverName = "ArrayWithObjects" || "ObjectWithIterableObjects" || "ObjectWithNamedKeyObjects", FormDataDriver = null, FocusControllerProps = DefaultFocusControllerProps, goToNextFieldOnEnterPressed = true } = {}) {
+    FocusControllerProps = {
+        ...DefaultFocusControllerProps,
+        ...FocusControllerProps
+    };
+    const FormDataDrivers = {
+        ArrayWithObjects: {
+            handlers: _ArrayWithObjects.default,
+            default: true
+        },
+        ObjectWithIterableObjects: {
+            handlers: _ObjectWithIterableObjects.default
+        },
+        ObjectWithNamedKeyObjects: {
+            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 = (name, ...args)=>{
+        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
     });
-    if (!currentIndex) return false;
-    const nextIndex = currentIndex + 1;
-    if (nextIndex >= focusable.length) return false;
-    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;
-    }, null);
-    if (!event) return false;
-    const {
-      keyCode
-    } = event;
-    switch (keyCode) {
-      //OnEnterDown
-      case 13:
-        onEnterDown(event);
-        break;
-      default:
-        break;
-    }
-  };
-
-  //On Type Change
-  (0, _react.useEffect)(() => {
-    resetIsFormRendered();
-  }, [FormType]);
-
-  //On Render Fields Change
-  (0, _react.useEffect)(() => {
-    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 || (_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
-          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 || element.addEventListener("keypress", handler, {
-              once: true
+    ///////////////////////////////////////////////////////////////
+    //--- OnChange Observer ---//--- START ---//
+    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;
+            state[key][observerId] = cb;
+            return state;
+        });
+        return observerId;
+    };
+    const removeOnChangeObserver = (key, id)=>{
+        setOnChangeObservers((state)=>{
+            //Set Default Value
+            if (!state[key]) return state;
+            state[key] = Object.keys(state).filter((cbId)=>cbId !== id).map((cbId)=>state[key][cbId]);
+            return state;
+        });
+    };
+    const onChangeObserver = (key, value)=>{
+        if (!onChangeObservers[key] || typeof onChangeObservers[key] !== "object") return;
+        const Observers = onChangeObservers[key];
+        Object.values(Observers).map((cb)=>{
+            cb({
+                value,
+                form
             });
-          }, true);
-          return updateFormField(result, field, key);
-        }, fields);
-      });
-    }
-  }, [renderFormFields]);
-  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;
-    });
-  };
-  const removeOnFormRenderObserver = key => {
-    setOnFormRenderObservers(state => state.slice().filter((v, i) => i !== key));
-  };
-  const onFormRenderWorker = () => {
-    // eslint-disable-next-line default-param-last
-    onFormRenderObservers.map(function () {
-      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, {
-        isWorkedOut: true
-      });
-      return null;
-    });
-  };
-
-  //On Form Rendered
-  (0, _react.useEffect)(() => {
-    if (!isFormRendered && onFormRenderObservers.length) {
-      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 ---//
-
-  ///////////////////////////////////////////////////////////////
-  ///////////////////////////////////////////////////////////////
-
-  //--- 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) {
+            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,
+                error: "",
+                value
+            }), key);
+    };
+    //--- OnChange Observer ---//--- END ---//
+    ///////////////////////////////////////////////////////////////
+    ///////////////////////////////////////////////////////////////
+    //--- 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 ---//
+    ///////////////////////////////////////////////////////////////
+    ///////////////////////////////////////////////////////////////
+    //--- Property Observer Blocker ---//--- START ---//
+    // const [propertyObservers, setPropertyObservers] = useState({});
+    // function addPropertyObserver () {
+    // };
+    //--- Property Observer Blocker ---//--- END ---//
+    ///////////////////////////////////////////////////////////////
+    ///////////////////////////////////////////////////////////////
+    //--- 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
-        result.push({
-          ...field,
-          className: getFieldClassName(field === null || field === void 0 ? void 0 : field.key, FormType)
+        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"])');
+        const currentIndex = await new Promise((resolve)=>{
+            focusable.forEach((node, i)=>{
+                if (node === e.target) resolve(i);
+            });
         });
-      }
-      return result;
-    }, []);
-    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 ---//
-
-  ///////////////////////////////////////////////////////////////
-  ///////////////////////////////////////////////////////////////
-
-  //--- 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;
-    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$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,
-      cb = () => {},
-      form: argForm,
-      field
-    } = _ref2;
-    return toggleFieldFocus({
-      key,
-      cb,
-      form: argForm,
-      field
-    }, "focus");
-  };
-  const setFieldBlur = _ref3 => {
-    let {
-      key,
-      cb = () => {},
-      form: argForm,
-      field
-    } = _ref3;
-    return toggleFieldFocus({
-      key,
-      cb,
-      form: argForm,
-      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
-      };
-      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 || _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 || _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({
+        if (!currentIndex) return false;
+        const nextIndex = currentIndex + 1;
+        if (nextIndex >= focusable.length) return false;
+        const nextItem = focusable[nextIndex];
+        nextItem.focus();
+    };
+    const onKeyDown = (...args)=>{
+        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;
+        const { keyCode } = event;
+        switch(keyCode){
+            //OnEnterDown
+            case 13:
+                onEnterDown(event);
+                break;
+            default:
+                break;
+        }
+    };
+    //On Type Change
+    (0, _react.useEffect)(()=>{
+        resetIsFormRendered();
+    }, [
+        FormType
+    ]);
+    //On Render Fields Change
+    (0, _react.useEffect)(()=>{
+        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 ? 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) {
+                        field.className = `${field === null || field === void 0 ? void 0 : field.className} ${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 = (...args)=>{
+                            onKeyDown(...args);
+                            onKeyDownProp(...args);
+                        };
+                    }
+                    //Is Field Value Changed By USER
+                    // eslint-disable-next-line no-use-before-define
+                    addOnFieldRenderedObserver(key, ()=>{
+                        var _getFormField_ref_current, _getFormField_ref, _getFormField;
+                        const element = (_getFormField = getFormField(key)) === null || _getFormField === void 0 ? void 0 : (_getFormField_ref = _getFormField.ref) === null || _getFormField_ref === void 0 ? void 0 : (_getFormField_ref_current = _getFormField_ref.current) === null || _getFormField_ref_current === void 0 ? void 0 : _getFormField_ref_current.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, {
+                            once: true
+                        });
+                        element === null || element === void 0 ? void 0 : element.addEventListener("keypress", handler, {
+                            once: true
+                        });
+                    }, true);
+                    return updateFormField(result, field, key);
+                }, fields);
+            });
+        }
+    }, [
+        renderFormFields
+    ]);
+    const [onFormRenderObservers, setOnFormRenderObservers] = (0, _react.useState)([]);
+    const addOnFormRenderObserver = (cb, { once = false } = {})=>{
+        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;
+        });
+    };
+    const removeOnFormRenderObserver = (key)=>{
+        setOnFormRenderObservers((state)=>state.slice().filter((v, i)=>i !== key));
+    };
+    const onFormRenderWorker = ()=>{
+        // eslint-disable-next-line default-param-last
+        onFormRenderObservers.map(({ once, isWorkedOut, cb = ()=>{} } = {}, key)=>{
+            if (once && isWorkedOut) return null;
+            cb(form);
+            if (once) removeOnFormRenderObserver(key);
+            else updateOnFormRenderObserver(key, {
+                isWorkedOut: true
+            });
+            return null;
+        });
+    };
+    //On Form Rendered
+    (0, _react.useEffect)(()=>{
+        if (!isFormRendered && onFormRenderObservers.length) {
+            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 ---//
+    ///////////////////////////////////////////////////////////////
+    ///////////////////////////////////////////////////////////////
+    //--- 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 ? void 0 : field.errorLabelHightlite) {
+                // eslint-disable-next-line no-use-before-define
+                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)=>{
+            const formField = document.querySelector(`.${field === null || field === void 0 ? void 0 : field.className}`);
+            if (!formField) return null;
+            formField.classList.remove("errorLabelHightlite");
+            if (field === null || field === void 0 ? void 0 : field.error) {
+                formField.classList.add("errorLabelHightlite");
+            }
+            return null;
+        });
+    };
+    (0, _react.useEffect)(()=>{
+        hightliteErrorLabels();
+    }, [
+        form
+    ]);
+    //--- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- END ---//
+    ///////////////////////////////////////////////////////////////
+    ///////////////////////////////////////////////////////////////
+    //--- 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 = ({ key, cb = ()=>{}, form: argForm, field }, action = "focus")=>{
+        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_current_querySelector, _formField_ref_current;
+            (_formField_ref_current = formField.ref.current) === null || _formField_ref_current === void 0 ? void 0 : (_formField_ref_current_querySelector = _formField_ref_current.querySelector((formField === null || formField === void 0 ? void 0 : formField.focusSelector) || "input")) === null || _formField_ref_current_querySelector === void 0 ? void 0 : _formField_ref_current_querySelector[action]();
+            cb();
+        }, 50);
+    };
+    const setFieldFocus = ({ key, cb = ()=>{}, form: argForm, field })=>toggleFieldFocus({
+            key,
+            cb,
+            form: argForm,
+            field
+        }, "focus");
+    const setFieldBlur = ({ key, cb = ()=>{}, form: argForm, field })=>toggleFieldFocus({
             key,
-            form,
-            cb
-          });
+            cb,
+            form: argForm,
+            field
+        }, "blur");
+    const setFirstFieldFocus = ()=>{
+        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 ? void 0 : tmpField.disabled)) field = tmpField;
         }
-        return null;
-      });
-    }
-  }, [form, focusOnRenderFields, isInitFocused, isFormRendered]);
-  (0, _react.useEffect)(() => {
-    setAutoFocusedField(null);
-  }, [isInitFocused]);
-  (0, _react.useEffect)(() => {
-    resetIsInitFocused();
-  }, [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 ---//
-  const [onFieldRenderedObservers, setOnFieldRenderedObservers] = (0, _react.useState)({});
-  const [isFieldObserversReset, setIsFieldObserversReset] = (0, _react.useState)(false);
-  const resetOnFieldRenderObserversWorkedOut = () => {
-    if (!isFieldObserversReset && renderFormFields.length) {
-      renderFormFields.map(key => {
+        if (!field) return false;
+        if (FocusControllerProps.onlyEmptyFieldAutoFocus && Boolean(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
+            };
+            if (!state[key]) stateCopy[key] = [];
+            stateCopy[key].push(cb);
+            return stateCopy;
+        });
+    };
+    const callOnFieldFocusCallbacks = (key)=>{
+        var _onFieldFocusCallbacks_key;
+        if (!Array.isArray(onFieldFocusCallbacks[key])) return null;
+        (_onFieldFocusCallbacks_key = onFieldFocusCallbacks[key]) === null || _onFieldFocusCallbacks_key === void 0 ? void 0 : _onFieldFocusCallbacks_key.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 _getFormField_value, _getFormField;
+                if (focusOnRenderFields.includes(key) && ((_getFormField = getFormField(key)) === null || _getFormField === void 0 ? void 0 : (_getFormField_value = _getFormField.value) === null || _getFormField_value === void 0 ? void 0 : _getFormField_value.length) === 0) {
+                    const cb = ()=>{
+                        removeFocusFieldOnRender(key);
+                        callOnFieldFocusCallbacks(key);
+                    };
+                    setFieldFocus({
+                        key,
+                        form,
+                        cb
+                    });
+                }
+                return null;
+            });
+        }
+    }, [
+        form,
+        focusOnRenderFields,
+        isInitFocused,
+        isFormRendered
+    ]);
+    (0, _react.useEffect)(()=>{
+        setAutoFocusedField(null);
+    }, [
+        isInitFocused
+    ]);
+    (0, _react.useEffect)(()=>{
+        resetIsInitFocused();
+    }, [
+        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 ---//
+    const [onFieldRenderedObservers, setOnFieldRenderedObservers] = (0, _react.useState)({});
+    const [isFieldObserversReset, setIsFieldObserversReset] = (0, _react.useState)(false);
+    const resetOnFieldRenderObserversWorkedOut = ()=>{
+        if (!isFieldObserversReset && renderFormFields.length) {
+            renderFormFields.map((key)=>{
+                setFormField({
+                    isOnRenderObserversWorkedOut: false
+                }, key);
+                return key;
+            });
+            setIsFieldObserversReset(true);
+        }
+    };
+    const addOnFieldRenderedObserver = (key, cb, isOnceCallable = 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
+            };
+            return state;
+        });
+        return observerId;
+    };
+    const updateOnFieldRenderedObserver = (key, id, data)=>{
+        setOnFieldRenderedObservers((state)=>{
+            //Set Default Value
+            if (!state[key]) return state;
+            state[key][id] = {
+                ...state[key][id],
+                ...data
+            };
+            return state;
+        });
+    };
+    const removeOnFieldRenderedObserver = (key, id)=>{
+        setOnFieldRenderedObservers((state)=>{
+            //Set Default Value
+            if (!state[key]) return state;
+            state[key] = Object.keys(state).filter((cbId)=>cbId !== id).map((cbId)=>state[key][cbId]);
+            return state;
+        });
+    };
+    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 ? void 0 : observer.isObserverWorkedOut));
+        if (FilteredObservers.length === 0) return null;
         setFormField({
-          isOnRenderObserversWorkedOut: false
+            isOnRenderObserversWorkedOut: true
         }, key);
-        return key;
-      });
-      setIsFieldObserversReset(true);
-    }
-  };
-  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
-      };
-      return state;
-    });
-    return observerId;
-  };
-  const updateOnFieldRenderedObserver = (key, id, data) => {
-    setOnFieldRenderedObservers(state => {
-      //Set Default Value
-      if (!state[key]) return state;
-      state[key][id] = {
-        ...state[key][id],
-        ...data
-      };
-      return state;
-    });
-  };
-  const removeOnFieldRenderedObserver = (key, id) => {
-    setOnFieldRenderedObservers(state => {
-      //Set Default Value
-      if (!state[key]) return state;
-      state[key] = Object.keys(state).filter(cbId => cbId !== id).map(cbId => state[key][cbId]);
-      return state;
-    });
-  };
-  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({
-      isOnRenderObserversWorkedOut: true
-    }, key);
-    FilteredObservers.map((_ref4, id) => {
-      let {
-        f,
-        isOnceCallable
-      } = _ref4;
-      f(data);
-      if (isOnceCallable) updateOnFieldRenderedObserver(key, id, {
-        isObserverWorkedOut: true
-      });
-      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 {
-          key,
-          isWorkedOut: true
-        };
-      }
-      return {
-        key,
-        isWorkedOut: false
-      };
-    });
-  };
-  (0, _react.useEffect)(() => {
-    resetOnFieldRenderObserversWorkedOut();
-    onRenderObserverWorker();
-  }, [form]);
-  (0, _react.useEffect)(() => {
-    setIsFieldObserversReset(false);
-  }, [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
-  //       if ([null, undefined].includes(prev[key])) {
-  //         result[key] = current[key];
-  //       }
-  //       //If PROPERTY is AN OBJECT
-  //       else if (typeof current[key] === 'object') {
-  //         //If PROPERTY is EXISTS BEFORE
-  //         const innerCompare = compare(prev[key], current[key]);
-  //         // //If SOMETHING CHANGED
-  //         if (innerCompare?.length) result[key] = innerCompare;
-  //       }
-  //       //If PROPERTY is AN SIMPLE VALUE and PROPERTY CHANGED
-  //       else if (prev[key] !== current[key]) {
-  //         result[key] = current[key];
-  //       }
-
-  //       if (i === arr.length-1) {
-  //         resolve(result);
-  //       }
-
-  //       return result;
-  //     }, {});
-  //   });
-  // };
-
-  ///////////////////////////////////////////////////////////////
-  ///////////////////////////////////////////////////////////////
-
-  //--- WindowScrollController ---//--- START ---//
-  const scrollToField = _ref5 => {
-    var _field2, _field3, _wrapperRef$current;
-    let {
-      key = null,
-      field = null,
-      form: argForm
-    } = _ref5;
-    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 {
-      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 ---//
-
-  ///////////////////////////////////////////////////////////////
-  ///////////////////////////////////////////////////////////////
-
-  const addErrorsToForm = function (errors) {
-    let argForm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : form;
-    if (!argForm) argForm = form;
-    setFormFields(fields => {
-      return errors.reduce((fields, _ref6) => {
-        let {
-          message: error,
-          propertyPath: errKey
-        } = _ref6;
-        return updateFormField(fields, {
-          error
-        }, errKey);
-      }, fields);
-    });
-  };
-  return {
-    FormDataDrivers,
-    //OnChangeObserver
-    addOnChangeObserver,
-    removeOnChangeObserver,
-    onChangeObservers,
-    //OnChangeHandler
-    onFieldChange,
-    //Form Submit Blocker
-    toggleFormSubmitBlock,
-    clearFormSubmitBlockers,
-    isFormSubmitBlocked: Boolean(formSubmitBlockers.length),
-    //Property Observers
-    // addPropertyObserver,
-
-    //Render Fields
-    renderFormFields,
-    setRenderFormFields,
-    addRenderFields,
-    removeRenderFields,
-    getFieldClassName,
-    //Field Focus Controller
-    isInitFocused,
-    setFirstFieldInitFocused,
-    resetIsInitFocused,
-    setFieldFocus,
-    setFieldBlur,
-    setFirstFieldFocus,
-    autoFocusedField,
-    addFocusFieldOnRender,
-    removeFocusFieldOnRender,
-    //Field Render Controller
-    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,
+        FilteredObservers.map(({ f, isOnceCallable }, id)=>{
+            f(data);
+            if (isOnceCallable) updateOnFieldRenderedObserver(key, id, {
+                isObserverWorkedOut: true
+            });
+            return null;
+        });
+    };
+    const onRenderObserverWorker = ()=>{
+        var _getFormFieldsKeys;
+        return (_getFormFieldsKeys = getFormFieldsKeys(form)) === null || _getFormFieldsKeys === void 0 ? void 0 : _getFormFieldsKeys.map((key)=>{
+            //OnFieldRendered
+            const fieldData = getFormField(key);
+            if (!(fieldData === null || fieldData === void 0 ? void 0 : fieldData.isOnRenderObserversWorkedOut)) {
+                onFieldRenderedObserver(key, fieldData);
+                return {
+                    key,
+                    isWorkedOut: true
+                };
+            }
+            return {
+                key,
+                isWorkedOut: false
+            };
+        });
+    };
+    (0, _react.useEffect)(()=>{
+        resetOnFieldRenderObserversWorkedOut();
+        onRenderObserverWorker();
+    }, [
+        form
+    ]);
+    (0, _react.useEffect)(()=>{
+        setIsFieldObserversReset(false);
+    }, [
+        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
+    //       if ([null, undefined].includes(prev[key])) {
+    //         result[key] = current[key];
+    //       }
+    //       //If PROPERTY is AN OBJECT
+    //       else if (typeof current[key] === 'object') {
+    //         //If PROPERTY is EXISTS BEFORE
+    //         const innerCompare = compare(prev[key], current[key]);
+    //         // //If SOMETHING CHANGED
+    //         if (innerCompare?.length) result[key] = innerCompare;
+    //       }
+    //       //If PROPERTY is AN SIMPLE VALUE and PROPERTY CHANGED
+    //       else if (prev[key] !== current[key]) {
+    //         result[key] = current[key];
+    //       }
+    //       if (i === arr.length-1) {
+    //         resolve(result);
+    //       }
+    //       return result;
+    //     }, {});
+    //   });
+    // };
+    ///////////////////////////////////////////////////////////////
+    ///////////////////////////////////////////////////////////////
+    //--- WindowScrollController ---//--- START ---//
+    const scrollToField = ({ key = null, field = null, form: argForm })=>{
+        var _wrapperRef_current;
+        if (!key && !field) return false;
+        if (!argForm) argForm = form;
+        if (!field) field = getFormField(key, argForm);
+        const wrapperRef = (field === null || field === void 0 ? void 0 : field.wrapperRef) || (field === null || field === void 0 ? void 0 : field.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();
+        const scrollTop = Math.abs(Math.abs(topOffset) - Math.abs(window.scrollY)) - 16;
+        window.scrollTo({
+            top: scrollTop
+        });
+    };
+    //--- WindowScrollController ---//--- END ---//
+    ///////////////////////////////////////////////////////////////
+    ///////////////////////////////////////////////////////////////
+    const addErrorsToForm = (errors, argForm = form)=>{
+        if (!argForm) argForm = form;
+        setFormFields((fields)=>{
+            return errors.reduce((fields, { message: error, propertyPath: errKey })=>{
+                return updateFormField(fields, {
+                    error
+                }, errKey);
+            }, fields);
+        });
+    };
+    return {
+        FormDataDrivers,
+        //OnChangeObserver
+        addOnChangeObserver,
+        removeOnChangeObserver,
+        onChangeObservers,
+        //OnChangeHandler
         onFieldChange,
-        FormDataDriver: getFormDataDriver(FormDataDriverName)
-      });
-    },
-    scrollToField,
-    getFieldData,
-    getFormField,
-    setFormFields,
-    setFormField: (data, key) => setFormField(data, key),
-    getFormFieldsAsArray,
-    getFormFieldsKeys,
-    removeAllFormFields,
-    removeFormField,
-    removeFormFields,
-    addErrorsToForm
-  };
-}
+        //Form Submit Blocker
+        toggleFormSubmitBlock,
+        clearFormSubmitBlockers,
+        isFormSubmitBlocked: Boolean(formSubmitBlockers.length),
+        //Property Observers
+        // addPropertyObserver,
+        //Render Fields
+        renderFormFields,
+        setRenderFormFields,
+        addRenderFields,
+        removeRenderFields,
+        getFieldClassName,
+        //Field Focus Controller
+        isInitFocused,
+        setFirstFieldInitFocused,
+        resetIsInitFocused,
+        setFieldFocus,
+        setFieldBlur,
+        setFirstFieldFocus,
+        autoFocusedField,
+        addFocusFieldOnRender,
+        removeFocusFieldOnRender,
+        //Field Render Controller
+        addOnFieldRenderedObserver,
+        removeOnFieldRenderedObserver,
+        onFieldRenderedObservers,
+        updateFormField,
+        addOnFormRenderObserver,
+        submitIsFormRendered,
+        resetIsFormRendered,
+        renderFields: ({ form: argForm = form, fields: argFields = renderFormFields, cols: argCols = 1, RenderFieldComponent })=>(0, _RenderFields.default)({
+                form: argForm,
+                fields: argFields,
+                cols: argCols,
+                RenderFieldComponent,
+                onFieldChange,
+                FormDataDriver: getFormDataDriver(FormDataDriverName)
+            }),
+        scrollToField,
+        getFieldData,
+        getFormField,
+        setFormFields,
+        setFormField: (data, key)=>setFormField(data, key),
+        getFormFieldsAsArray,
+        getFormFieldsKeys,
+        removeAllFormFields,
+        removeFormField,
+        removeFormFields,
+        addErrorsToForm
+    };
+}