intelicoreact 1.5.38 → 1.5.41

package/dist/Functions/useFormTools/index.js

@@ -1,661 +1,723 @@
-// eslint-disable-next-line no-unused-vars
 "use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return useFormTools;
-    }
+  value: true
 });
-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
-    };
-}
+exports.default = useFormTools;
+var _react = require("react");
+var _ArrayWithObjects = _interopRequireDefault(require("./form-drivers/ArrayWithObjects"));
+var _ObjectWithIterableObjects = _interopRequireDefault(require("./form-drivers/ObjectWithIterableObjects"));
+var _ObjectWithNamedKeyObjects = _interopRequireDefault(require("./form-drivers/ObjectWithNamedKeyObjects"));
+var _General = _interopRequireDefault(require("./functions/General"));
+var _RenderFields = _interopRequireDefault(require("./functions/RenderFields"));
+// eslint-disable-next-line no-unused-vars
+
 const DefaultFocusControllerProps = {
-    setAutoFocus: true,
-    onlyEmptyFieldAutoFocus: false
+  setAutoFocus: true,
+  onlyEmptyFieldAutoFocus: false
 };
-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
+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 => {
+    return FormDataDriver || FormDataDrivers[name]?.handlers || Object.values(FormDataDrivers).find(df => df.default === true)?.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;
     });
-    ///////////////////////////////////////////////////////////////
-    //--- 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);
-            });
-        });
-        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();
-    }, [
+    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
-    ]);
-    //--- 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,
-            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;
-        }
-        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
+      });
+      return null;
+    });
+  };
+  const onFieldChange = (key, value) => {
+    if (value === getFormField(key)?.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);
+      });
+    });
+    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?.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) => {
+          const fieldData = getFieldData(key);
+          const field = getFormField(key) ? getFormField(key) : fieldData;
+          if (!field?.className || field?.className?.indexOf(getFieldClassName(key, FormType)) === -1) {
+            field.className = `${field?.className} ${getFieldClassName(key, FormType)}`;
+          }
+          if (typeof 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);
             };
-            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;
+          }
+
+          //Is Field Value Changed By USER
+          // eslint-disable-next-line no-use-before-define
+          addOnFieldRenderedObserver(key, () => {
+            const element = getFormField(key)?.ref?.current?.querySelector(field?.focusSelector || "input");
+            const handler = () => setFormField({
+              isValueChangedByUser: true
+            }, key);
+            element?.addEventListener("paste", handler, {
+              once: true
             });
-        }
-    }, [
-        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;
+            element?.addEventListener("keypress", handler, {
+              once: true
             });
-            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;
+          }, 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?.reduce((result, field) => {
+      if (field?.errorLabelHightlite) {
+        // eslint-disable-next-line no-use-before-define
+        result.push({
+          ...field,
+          className: getFieldClassName(field?.key, FormType)
         });
-    };
-    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;
+      }
+      return result;
+    }, []);
+    filtered?.map(field => {
+      const formField = document.querySelector(`.${field?.className}`);
+      if (!formField) return null;
+      formField.classList.remove("errorLabelHightlite");
+      if (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?.value)) return null;
+    setTimeout(() => {
+      formField.ref.current?.querySelector(formField?.focusSelector || "input")?.[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 = () => {
+    let field = null;
+    for (let i = 0; i < renderFormFields.length && !field; ++i) {
+      const key = renderFormFields[i];
+      const tmpField = getFormField(key);
+      if (tmpField && !tmpField?.disabled) field = tmpField;
+    }
+    if (!field) return false;
+    if (FocusControllerProps.onlyEmptyFieldAutoFocus && Boolean(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 => {
+    if (!Array.isArray(onFieldFocusCallbacks[key])) return null;
+    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) {
+      getFormFieldsKeys(form)?.map(key => {
+        if (focusOnRenderFields.includes(key) && getFormField(key)?.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: true
+          isOnRenderObserversWorkedOut: false
         }, key);
-        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
+        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?.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 = () => {
+    return getFormFieldsKeys(form)?.map(key => {
+      //OnFieldRendered
+      const fieldData = getFormField(key);
+      if (!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 => {
+    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 = field?.wrapperRef || field?.ref;
+    // eslint-disable-next-line no-unsafe-optional-chaining
+    const {
+      top: topOffset
+    } = 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,
         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: ({ 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
-    };
-}
+        FormDataDriver: getFormDataDriver(FormDataDriverName)
+      });
+    },
+    scrollToField,
+    getFieldData,
+    getFormField,
+    setFormFields,
+    setFormField: (data, key) => setFormField(data, key),
+    getFormFieldsAsArray,
+    getFormFieldsKeys,
+    removeAllFormFields,
+    removeFormField,
+    removeFormFields,
+    addErrorsToForm
+  };
+}