intelicoreact 1.6.22 → 1.6.24

package/dist/Functions/useFormTools/index.js

@@ -1 +1,778 @@
-function e(e,r){(null==r||r>e.length)&&(r=e.length);for(var n=0,t=Array(r);n<r;n++)t[n]=e[n];return t}function r(e,r,n,t,o,u,i){try{var l=e[u](i),c=l.value}catch(e){n(e);return}l.done?r(c):Promise.resolve(c).then(t,o)}function n(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.forEach(function(r){var t;t=n[r],r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t})}return e}function t(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):(function(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n})(Object(r)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}),e}function o(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var n,t,o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var u=[],i=!0,l=!1;try{for(o=o.call(e);!(i=(n=o.next()).done)&&(u.push(n.value),!r||u.length!==r);i=!0);}catch(e){l=!0,t=e}finally{try{i||null==o.return||o.return()}finally{if(l)throw t}}return u}}(e,r)||l(e,r)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(r){return function(r){if(Array.isArray(r))return e(r)}(r)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(r)||l(r)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e){return e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e}function l(r,n){if(r){if("string"==typeof r)return e(r,n);var t=Object.prototype.toString.call(r).slice(8,-1);if("Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t)return Array.from(t);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return e(r,n)}}import{createRef as c,useEffect as a,useState as f}from"react";import s from"./form-drivers/ArrayWithObjects";import d from"./form-drivers/ObjectWithIterableObjects";import v from"./form-drivers/ObjectWithNamedKeyObjects";import m from"./functions/General";import b from"./functions/RenderFields";var y={setAutoFocus:!0,onlyEmptyFieldAutoFocus:!1};export default function p(){var e,l,p=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},F=p.form,h=p.setForm,O=p.FormType,g=p.FormFields,j=p.FormDataDriverName,k=void 0===j?"ArrayWithObjects":j,w=p.FormDataDriver,A=void 0===w?null:w,S=p.FocusControllerProps,R=void 0===S?y:S,C=p.goToNextFieldOnEnterPressed,I=void 0===C||C,P=this;R=n({},y,R);var W={ArrayWithObjects:{handlers:s,default:!0},ObjectWithIterableObjects:{handlers:d},ObjectWithNamedKeyObjects:{handlers:v}},D=function(e){var r,n;return A||(null==(r=W[e])?void 0:r.handlers)||(null==(n=Object.values(W).find(function(e){return!0===e.default}))?void 0:n.handlers)||function(){return{}}},E=m(),N=E.getFieldClassName,x=E.updateFormField,T=function(e){for(var r=arguments.length,n=Array(r>1?r-1:0),t=1;t<r;t++)n[t-1]=arguments[t];return D(e).apply(P,u(n))}(k,{form:F,setForm:h,FormFields:g}),B=T.getFieldData,K=T.getFormField,L=T.setFormFields,q=T.setFormField,M=T.getFormFieldsAsArray,H=T.getFormFieldsKeys,U=T.removeAllFormFields,G=T.removeFormField,V=T.removeFormFields,Y=o(f({}),2),$=Y[0],z=Y[1],J=function(e,r){$[e]&&"object"===i($[e])&&Object.values($[e]).map(function(e){return e({value:r,form:F}),null})},Q=function(e,r){var o;if(r===(null==(o=K(e))?void 0:o.value))return!1;J(e,r),q(function(e){return t(n({},e),{error:"",value:r})},e)},X=o(f([]),2),Z=X[0],_=X[1],ee=o(f(!1),2),er=ee[0],en=ee[1],et=o(f([]),2),eo=et[0],eu=et[1],ei=function(e){eu(function(r){return r.filter(function(r){return!e.includes(r)})})},el=o(f(!1),2),ec=el[0],ea=el[1],ef=function(){return ea(!0)},es=function(){return ea(!1)},ed=(e=function(e){var r,n,t;return function(e,r){var n,t,o,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return i.next=l(0),i.throw=l(1),i.return=l(2),"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function l(l){return function(c){var a=[l,c];if(n)throw TypeError("Generator is already executing.");for(;i&&(i=0,a[0]&&(u=0)),u;)try{if(n=1,t&&(o=2&a[0]?t.return:a[0]?t.throw||((o=t.return)&&o.call(t),0):t.next)&&!(o=o.call(t,a[1])).done)return o;switch(t=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return u.label++,{value:a[1],done:!1};case 5:u.label++,t=a[1],a=[0];continue;case 7:a=u.ops.pop(),u.trys.pop();continue;default:if(!(o=(o=u.trys).length>0&&o[o.length-1])&&(6===a[0]||2===a[0])){u=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){u.label=a[1];break}if(6===a[0]&&u.label<o[1]){u.label=o[1],o=a;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(a);break}o[2]&&u.ops.pop(),u.trys.pop();continue}a=r.call(e,u)}catch(e){a=[6,e],t=0}finally{n=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}}}(this,function(o){switch(o.label){case 0:if(!I)return[2,!1];return r=document.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])'),[4,new Promise(function(n){r.forEach(function(r,t){r===e.target&&n(t)})})];case 1:if(!(n=o.sent())||(t=n+1)>=r.length)return[2,!1];return r[t].focus(),[2]}})},l=function(){var n=this,t=arguments;return new Promise(function(o,u){var i=e.apply(n,t);function l(e){r(i,o,u,l,c,"next",e)}function c(e){r(i,o,u,l,c,"throw",e)}l(void 0)})},function(e){return l.apply(this,arguments)}),ev=function(){for(var e=arguments.length,r=Array(e),n=0;n<e;n++)r[n]=arguments[n];var t=r.reduce(function(e,r){var n,t;return(n=null==r?void 0:r.nativeEvent,null!=(t=KeyboardEvent)&&"undefined"!=typeof Symbol&&t[Symbol.hasInstance]?!!t[Symbol.hasInstance](n):n instanceof t)?r:e},null);if(!t)return!1;13===t.keyCode&&ed(t)};a(function(){es()},[O]),a(function(){er&&es(!1),0!==eo.length&&L(function(e){return eo.reduce(function(e,r){var n,t=B(r),o=K(r)?K(r):t;if((null==o?void 0:o.className)&&(null==o||null==(n=o.className)?void 0:n.indexOf(N(r,O)))!==-1||(o.className="".concat(null==o?void 0:o.className," ").concat(N(r,O))),"object"===i(null==t?void 0:t.label)&&(o.label=t.label[O]||t.label.default),o.ref=c(),o.wrapperRef=c(),o.isValueChangedByUser=!1,I){var l=o.onKeyDown||function(){};o.onKeyDown=function(){for(var e=arguments.length,r=Array(e),n=0;n<e;n++)r[n]=arguments[n];ev.apply(void 0,u(r)),l.apply(void 0,u(r))}}return ez(r,function(){var e,n,t,u=null==(t=K(r))||null==(n=t.ref)||null==(e=n.current)?void 0:e.querySelector((null==o?void 0:o.focusSelector)||"input"),i=function(){return q({isValueChangedByUser:!0},r)};null==u||u.addEventListener("paste",i,{once:!0}),null==u||u.addEventListener("keypress",i,{once:!0})},!0),x(e,o,r)},e)})},[eo]);var em=o(f([]),2),eb=em[0],ey=em[1],ep=function(e,r){ey(function(t){var o=u(t);return o[e]=n({},t[e],r),o})},eF=function(e){ey(function(r){return r.slice().filter(function(r,n){return n!==e})})},eh=function(){eb.map(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=e.once,n=e.isWorkedOut,t=e.cb,o=arguments.length>1?arguments[1]:void 0;return r&&n||((void 0===t?function(){}:t)(F),r?eF(o):ep(o,{isWorkedOut:!0})),null})};a(function(){if(!ec&&eb.length){var e=H(F);eo.reduce(function(r,n){return e.includes(n)||(r=!1),r},!0)&&(ef(!0),eh())}},[F,eo,eb]);var eO=function(){var e=M(),r=null==e?void 0:e.reduce(function(e,r){return(null==r?void 0:r.errorLabelHightlite)&&e.push(t(n({},r),{className:N(null==r?void 0:r.key,O)})),e},[]);null==r||r.map(function(e){var r=document.querySelector(".".concat(null==e?void 0:e.className));return r&&(r.classList.remove("errorLabelHightlite"),(null==e?void 0:e.error)&&r.classList.add("errorLabelHightlite")),null})};a(function(){eO()},[F]);var eg=o(f(!1),2),ej=eg[0],ek=eg[1],ew=o(f(null),2),eA=ew[0],eS=ew[1],eR=function(){return ek(!0)},eC=function(){return ek(!1)},eI=function(e){var r=e.key,n=e.cb,t=void 0===n?function(){}:n,o=e.form,u=e.field,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"focus";if(!r&&!u)return null;o||(o=F);var l=u||K(r,o);return!!l&&!!l.ref&&("focus"===i&&R.onlyEmptyFieldAutoFocus&&(null==l?void 0:l.value)?null:void setTimeout(function(){var e,r;null==(r=l.ref.current)||null==(e=r.querySelector((null==l?void 0:l.focusSelector)||"input"))||e[i](),t()},50))},eP=function(e){var r=e.key,n=e.cb;return eI({key:r,cb:void 0===n?function(){}:n,form:e.form,field:e.field},"focus")},eW=function(){for(var e=null,r=0;r<eo.length&&!e;++r){var n=K(eo[r]);!n||(null==n?void 0:n.disabled)||(e=n)}if(!e)return!1;if(R.onlyEmptyFieldAutoFocus&&(null==e?void 0:e.value))return eR(),!1;eS(e.key);var t=function(){q({value:e.value},e.key),eR()};setTimeout(function(){return eP({key:e.key,cb:t,form:F})},50)},eD=o(f({}),2),eE=eD[0],eN=eD[1],ex=function(e,r){eN(function(t){var o=n({},t);return t[e]||(o[e]=[]),o[e].push(r),o})},eT=function(e){var r;if(!Array.isArray(eE[e]))return null;null==(r=eE[e])||r.map(function(e){return e()})},eB=o(f([]),2),eK=eB[0],eL=eB[1],eq=function(e){eL(function(r){return r.filter(function(r){return r!==e})})};a(function(){if(R.setAutoFocus&&!ej&&!eA&&ec&&eW(),eK.length){var e;null==(e=H(F))||e.map(function(e){var r,n;return eK.includes(e)&&(null==(n=K(e))||null==(r=n.value)?void 0:r.length)===0&&eP({key:e,form:F,cb:function(){eq(e),eT(e)}}),null})}},[F,eK,ej,ec]),a(function(){eS(null)},[ej]),a(function(){eC()},[O]);var eM=o(f({}),2),eH=eM[0],eU=eM[1],eG=o(f(!1),2),eV=eG[0],eY=eG[1],e$=function(){!eV&&eo.length&&(eo.map(function(e){return q({isOnRenderObserversWorkedOut:!1},e),e}),eY(!0))},ez=function(e,r){var n=!(arguments.length>2)||void 0===arguments[2]||arguments[2],t=null;return eU(function(o){return o[e]||(o[e]={}),t=Object.keys(o[e]).length||0,o[e][t]={f:r,isOnceCallable:n},o}),t},eJ=function(e,r,t){eU(function(o){return o[e]&&(o[e][r]=n({},o[e][r],t)),o})},eQ=function(e,r){if(eH[e]&&"object"===i(eH[e])){var n=Object.values(eH[e]).filter(function(e){return!(null==e?void 0:e.isObserverWorkedOut)});if(0===n.length)return null;q({isOnRenderObserversWorkedOut:!0},e),n.map(function(n,t){var o=n.f,u=n.isOnceCallable;return o(r),u&&eJ(e,t,{isObserverWorkedOut:!0}),null})}},eX=function(){var e;return null==(e=H(F))?void 0:e.map(function(e){var r=K(e);return(null==r?void 0:r.isOnRenderObserversWorkedOut)?{key:e,isWorkedOut:!1}:(eQ(e,r),{key:e,isWorkedOut:!0})})};return a(function(){e$(),eX()},[F]),a(function(){eY(!1)},[O]),{FormDataDrivers:W,addOnChangeObserver:function(e,r){var n=null;return z(function(t){return t[e]||(t[e]={}),n=t[e].length,t[e][n]=r,t}),n},removeOnChangeObserver:function(e,r){z(function(n){return n[e]&&(n[e]=Object.keys(n).filter(function(e){return e!==r}).map(function(r){return n[e][r]})),n})},onChangeObservers:$,onFieldChange:Q,toggleFormSubmitBlock:function(e,r){_(function(n){return n.includes(e)||!r?u(n.filter(function(r){return r!==e})):u(n).concat([e])})},clearFormSubmitBlockers:function(){return _([])},isFormSubmitBlocked:!!Z.length,renderFormFields:eo,setRenderFormFields:function(e){en(!0),ei(eo),eC(),eu(e)},addRenderFields:function(e){eu(function(r){return u(r).concat(u(e))})},removeRenderFields:ei,getFieldClassName:N,isInitFocused:ej,setFirstFieldInitFocused:eR,resetIsInitFocused:eC,setFieldFocus:eP,setFieldBlur:function(e){var r=e.key,n=e.cb;return eI({key:r,cb:void 0===n?function(){}:n,form:e.form,field:e.field},"blur")},setFirstFieldFocus:eW,autoFocusedField:eA,addFocusFieldOnRender:function(e,r){eL(function(r){return u(r).concat([e])}),r&&ex(e,r)},removeFocusFieldOnRender:eq,addOnFieldRenderedObserver:ez,removeOnFieldRenderedObserver:function(e,r){eU(function(n){return n[e]&&(n[e]=Object.keys(n).filter(function(e){return e!==r}).map(function(r){return n[e][r]})),n})},onFieldRenderedObservers:eH,updateFormField:x,addOnFormRenderObserver:function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=r.once,t=void 0!==n&&n;ey(function(r){return u(r).concat([{cb:e,once:t,isWorkedOut:!1}])})},submitIsFormRendered:ef,resetIsFormRendered:es,renderFields:function(e){var r=e.form,n=void 0===r?F:r,t=e.fields,o=void 0===t?eo:t,u=e.cols;return b({form:n,fields:o,cols:void 0===u?1:u,RenderFieldComponent:e.RenderFieldComponent,onFieldChange:Q,FormDataDriver:D(k)})},scrollToField:function(e){var r,n=e.key,t=void 0===n?null:n,o=e.field,u=void 0===o?null:o,i=e.form;if(!t&&!u)return!1;i||(i=F),u||(u=K(t,i));var l=(null==u?void 0:u.wrapperRef)||(null==u?void 0:u.ref),c=Math.abs(Math.abs((null==l||null==(r=l.current)?void 0:r.getBoundingClientRect()).top)-Math.abs(window.scrollY))-16;window.scrollTo({top:c})},getFieldData:B,getFormField:K,setFormFields:L,setFormField:function(e,r){return q(e,r)},getFormFieldsAsArray:M,getFormFieldsKeys:H,removeAllFormFields:U,removeFormField:G,removeFormFields:V,addErrorsToForm:function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:F;r||(r=F),L(function(r){return e.reduce(function(e,r){return x(e,{error:r.message},r.propertyPath)},r)})}}}
+// eslint-disable-next-line no-unused-vars
+import { createRef, useEffect, useState } from "react";
+
+import ArrayWithObjects from "./form-drivers/ArrayWithObjects";
+import ObjectWithIterableObjects from "./form-drivers/ObjectWithIterableObjects";
+import ObjectWithNamedKeyObjects from "./form-drivers/ObjectWithNamedKeyObjects";
+import General from "./functions/General";
+import RenderFields from "./functions/RenderFields";
+
+const DefaultFocusControllerProps = {
+  setAutoFocus: true,
+  onlyEmptyFieldAutoFocus: false,
+};
+
+export default 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: true,
+    },
+    ObjectWithIterableObjects: {
+      handlers: ObjectWithIterableObjects,
+    },
+    ObjectWithNamedKeyObjects: {
+      handlers: ObjectWithNamedKeyObjects,
+    },
+  };
+
+  const getFormDataDriver = (name) => {
+    return (
+      FormDataDriver ||
+      FormDataDrivers[name]?.handlers ||
+      Object.values(FormDataDrivers).find((df) => df.default === true)
+        ?.handlers ||
+      (() => ({}))
+    );
+  };
+  const getFormDataDriverInstance = (name, ...args) => {
+    return getFormDataDriver(name)(...args);
+  };
+
+  const { getFieldClassName, updateFormField } = General();
+
+  const {
+    getFieldData,
+    getFormField,
+    setFormFields,
+    setFormField,
+    getFormFieldsAsArray,
+    getFormFieldsKeys,
+    removeAllFormFields,
+    removeFormField,
+    removeFormFields,
+  } = getFormDataDriverInstance(FormDataDriverName, {
+    form,
+    setForm,
+    FormFields,
+  });
+
+  ///////////////////////////////////////////////////////////////
+  //--- OnChange Observer ---//--- START ---//
+  const [onChangeObservers, setOnChangeObservers] = 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) => {
+    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] = 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] = useState(false);
+  const [renderFormFields, setRenderFormFieldsState] = 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] = 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?.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
+  useEffect(() => {
+    resetIsFormRendered();
+  }, [FormType]);
+
+  //On Render Fields Change
+  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 = createRef();
+          field.wrapperRef = 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,
+            () => {
+              const element = getFormField(key)?.ref?.current?.querySelector(
+                field?.focusSelector || "input",
+              );
+              const handler = () =>
+                setFormField({ isValueChangedByUser: true }, key);
+
+              element?.addEventListener("paste", handler, { once: true });
+              element?.addEventListener("keypress", handler, { once: true });
+            },
+            true,
+          );
+
+          return updateFormField(result, field, key);
+        }, fields);
+      });
+    }
+  }, [renderFormFields]);
+
+  const [onFormRenderObservers, setOnFormRenderObservers] = 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
+  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),
+        });
+      }
+
+      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;
+    });
+  };
+  useEffect(() => {
+    hightliteErrorLabels();
+  }, [form]);
+  //--- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- END ---//
+
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+
+  //--- Fields Focus Controller ---//--- START ---//
+  const [isInitFocused, setIsInitFocused] = useState(false);
+  const [autoFocusedField, setAutoFocusedField] = 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?.value)
+    )
+      return null;
+
+    setTimeout(() => {
+      formField.ref.current
+        ?.querySelector(formField?.focusSelector || "input")
+        ?.[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?.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] = 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] = useState([]);
+  const addFocusFieldOnRender = (key, cb) => {
+    setFocusOnRenderFields((state) => [...state, key]);
+
+    if (cb) addOnFieldFocusCallback(key, cb);
+  };
+  const removeFocusFieldOnRender = (key) => {
+    setFocusOnRenderFields((state) => state.filter((field) => field !== key));
+  };
+
+  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]);
+
+  useEffect(() => {
+    setAutoFocusedField(null);
+  }, [isInitFocused]);
+
+  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] = useState({});
+  const [isFieldObserversReset, setIsFieldObserversReset] = 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?.isObserverWorkedOut,
+    );
+
+    if (FilteredObservers.length === 0) return null;
+
+    setFormField({ isOnRenderObserversWorkedOut: true }, key);
+
+    FilteredObservers.map(({ f, isOnceCallable }, id) => {
+      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 };
+    });
+  };
+
+  useEffect(() => {
+    resetOnFieldRenderObserversWorkedOut();
+    onRenderObserverWorker();
+  }, [form]);
+
+  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 }) => {
+    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 = (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,
+
+    //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,
+    }) =>
+      RenderFields({
+        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,
+  };
+}