react-form-manage 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1951 @@
+var lodash = require('lodash');
+var minhCustomHooksRelease = require('minh-custom-hooks-release');
+var react = require('react');
+var reactDom = require('react-dom');
+var shallow = require('zustand/react/shallow');
+var immer = require('immer');
+var uuid = require('uuid');
+var zustand = require('zustand');
+var antd = require('antd');
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+function getAllNoneObjStringPath(value, prevPath) {
+  if (typeof value === "object") {
+    return Object.keys(value).reduce(function (prev, cur) {
+      return [].concat(prev, getAllNoneObjStringPath(value[cur], lodash.join(lodash.filter([prevPath, cur], function (v) {
+        return !lodash.isNil(v) && v !== "";
+      }), ".")));
+    }, []);
+  }
+  return [prevPath];
+}
+
+var useFormStore = zustand.create(function (storeSet, storeGet) {
+  return {
+    forms: {},
+    initialValues: {},
+    formStates: {},
+    cacheData: {},
+    formInstances: [],
+    submitHistory: {},
+    setData: function setData(formName, name, value) {
+      return storeSet(immer.produce(function (state) {
+        var oldValues = state.forms;
+        lodash.set(oldValues, formName + "." + name, value);
+      }));
+    },
+    getCacheData: function getCacheData(formName) {
+      return lodash.get(storeGet(), "cacheData." + formName);
+    },
+    setCacheData: function setCacheData(formName, name, value) {
+      return storeSet(immer.produce(function (state) {
+        var oldValues = state.cacheData;
+        lodash.set(oldValues, formName + "." + name, value);
+      }));
+    },
+    clearCacheData: function clearCacheData(formName) {
+      return storeSet(immer.produce(function (state) {
+        var oldValues = state.cacheData;
+        if (formName) {
+          lodash.set(oldValues, formName, {});
+        } else {
+          lodash.set(oldValues, "", {});
+        }
+      }));
+    },
+    getFormItemValue: function getFormItemValue(formName, name) {
+      var _storeGet$forms;
+      return lodash.get((_storeGet$forms = storeGet().forms) == null ? void 0 : _storeGet$forms[formName], name);
+    },
+    getFormValues: function getFormValues(formName) {
+      var _storeGet$forms2;
+      return (_storeGet$forms2 = storeGet().forms) == null ? void 0 : _storeGet$forms2[formName];
+    },
+    clearFormValues: function clearFormValues(formName) {
+      return storeSet(immer.produce(function (state) {
+        var oldValues = state.forms;
+
+        // console.log("Clear form values", formName);
+
+        lodash.unset(oldValues, formName);
+
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }));
+    },
+    clearFormInitialValues: function clearFormInitialValues(formName) {
+      return storeSet(immer.produce(function (state) {
+        var oldValues = state.initialValues;
+
+        // console.log("Clear form initial values", formName);
+
+        lodash.unset(oldValues, formName);
+
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }));
+    },
+    clearObjKeyItem: function clearObjKeyItem(formName, name) {
+      return storeSet(immer.produce(function (state) {
+        var oldValues = state.forms;
+
+        // console.log("Clear item value", formName, name);
+
+        lodash.unset(oldValues, formName + "." + name);
+
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }));
+    },
+    clearArrItem: function clearArrItem(formName, name) {
+      return storeSet(immer.produce(function (state) {
+        var oldValues = state.forms;
+        console.log("Clear item array value", formName, name);
+        var arrPath = name.split(".").slice(0, -1).join(".");
+        var elPath = Number(name.split(".").slice(-1).join(""));
+        var getArrItem = lodash.get(oldValues, formName + "." + arrPath);
+        if (lodash.isNumber(elPath)) {
+          getArrItem.splice(elPath, 1);
+        }
+
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }));
+    },
+    setFormState: function setFormState(_ref) {
+      var formName = _ref.formName,
+        isInitied = _ref.isInitied,
+        submitState = _ref.submitState;
+      return storeSet(immer.produce(function (state) {
+        var oldValues = state.formStates;
+        var getFormState = lodash.get(storeGet().formStates, formName);
+        if (lodash.isNil(getFormState)) {
+          lodash.set(oldValues, formName, {
+            isInitied: isInitied,
+            submitState: submitState
+          });
+        } else {
+          if (!lodash.isNil(isInitied)) {
+            lodash.set(oldValues, formName + ".isInitied", isInitied);
+          }
+          if (!lodash.isNil(submitState)) {
+            lodash.set(oldValues, formName + ".submitState", submitState);
+          }
+        }
+      }));
+    },
+    clearFormState: function clearFormState(formName) {
+      return storeSet(immer.produce(function (state) {
+        var oldValues = state.formStates;
+
+        // console.log("Clear form state", formName);
+
+        lodash.unset(oldValues, formName);
+
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }));
+    },
+    getFormState: function getFormState(formName) {
+      return lodash.get(storeGet(), "formStates." + formName);
+    },
+    setFormInitData: function setFormInitData(formName, initValues) {
+      return storeSet(immer.produce(function (state) {
+        var oldValues = state.initialValues;
+        var listInitPath = getAllNoneObjStringPath(initValues);
+
+        // console.log({ listInitPath, initValues });
+
+        listInitPath.forEach(function (k) {
+          if (lodash.get(initValues, k)) {
+            // console.log("init form data values: ", k, get(initValues, k));
+            lodash.set(oldValues, formName + "." + k, lodash.get(initValues, k));
+          }
+        });
+      }));
+    },
+    getInitData: function getInitData(formName, name) {
+      return lodash.get(storeGet().initialValues, formName + "." + name);
+    },
+    setInitData: function setInitData(formName, name, value) {
+      return storeSet(immer.produce(function (state) {
+        var oldValues = state.initialValues;
+        // console.log("Inner init: ", `${formName}.${name}`, value);
+        lodash.set(oldValues, formName + "." + name, value);
+      }));
+    },
+    setFormInstance: function setFormInstance(_ref2) {
+      var formName = _ref2.formName,
+        resetFields = _ref2.resetFields,
+        submit = _ref2.submit,
+        submitAsync = _ref2.submitAsync,
+        setFieldValue = _ref2.setFieldValue,
+        setFieldValues = _ref2.setFieldValues,
+        getFieldValue = _ref2.getFieldValue,
+        getFieldValues = _ref2.getFieldValues,
+        getFieldErrors = _ref2.getFieldErrors,
+        setFieldFocus = _ref2.setFieldFocus;
+      return storeSet(immer.produce(function (state) {
+        var storeListeners = state.formInstances;
+        var findListenerIndex = storeListeners.findIndex(function (l) {
+          return l.formName === formName;
+        });
+        if (findListenerIndex > -1) {
+          if (!lodash.isNil(resetFields)) {
+            storeListeners[findListenerIndex].resetFields = resetFields;
+          }
+          if (!lodash.isNil(submit)) {
+            storeListeners[findListenerIndex].submit = submit;
+          }
+          if (!lodash.isNil(setFieldFocus)) {
+            storeListeners[findListenerIndex].setFieldFocus = setFieldFocus;
+          }
+          if (!lodash.isNil(submitAsync)) {
+            storeListeners[findListenerIndex].submitAsync = submitAsync;
+          }
+          if (!lodash.isNil(setFieldValue)) {
+            storeListeners[findListenerIndex].setFieldValue = setFieldValue;
+          }
+          if (!lodash.isNil(setFieldValues)) {
+            storeListeners[findListenerIndex].setFieldValues = setFieldValues;
+          }
+          if (!lodash.isNil(getFieldValue)) {
+            storeListeners[findListenerIndex].getFieldValue = getFieldValue;
+          }
+          if (!lodash.isNil(getFieldValues)) {
+            storeListeners[findListenerIndex].getFieldValues = getFieldValues;
+          }
+          if (!lodash.isNil(getFieldErrors)) {
+            storeListeners[findListenerIndex].getFieldErrors = getFieldErrors;
+          }
+          return;
+        }
+        storeListeners.push({
+          formName: formName,
+          resetFields: resetFields,
+          submit: submit,
+          submitAsync: submitAsync,
+          setFieldValue: setFieldValue,
+          setFieldValues: setFieldValues,
+          getFieldValue: getFieldValue,
+          getFieldValues: getFieldValues,
+          getFieldErrors: getFieldErrors,
+          setFieldFocus: setFieldFocus
+        });
+      }));
+    },
+    revokeFormInstance: function revokeFormInstance(_ref3) {
+      var formName = _ref3.formName;
+      return storeSet(immer.produce(function (state) {
+        var instances = state.formInstances;
+        var findInstanceIndex = instances.findIndex(function (l) {
+          return l.formName == formName;
+        });
+
+        // console.log("Find item for revoke: ", findListenerIndex, formItemId);
+
+        if (findInstanceIndex > -1) {
+          // const listenersInfo = cloneDeep(instances[findInstanceIndex]);
+
+          instances.splice(findInstanceIndex, 1);
+
+          // onAfterRevoke(
+          //   listenersInfo,
+          //   instances.filter(
+          //     (l) =>
+          //       l.name === listenersInfo.name &&
+          //       l.formName === listenersInfo.formName &&
+          //       l.formItemId !== listenersInfo.formItemId
+          //   )
+          // );
+        }
+      }));
+    },
+    getCurrentSubmit: function getCurrentSubmit(formName) {
+      return lodash.last(lodash.get(storeGet().submitHistory, formName)) || null;
+    },
+    getSubmitHistory: function getSubmitHistory(formName) {
+      return lodash.get(storeGet().submitHistory, formName);
+    },
+    setSubmitHistory: function setSubmitHistory(formName, submitData) {
+      return storeSet(immer.produce(function (state) {
+        var oldValues = lodash.get(state.submitHistory, formName);
+        if (oldValues) {
+          oldValues.push(submitData);
+          oldValues.splice(0, oldValues.length - 3);
+        } else {
+          lodash.set(state.submitHistory, formName, [submitData]);
+        }
+        console.log("Submit history: ", formName);
+      }));
+    }
+  };
+});
+var useFormListeners = zustand.create(function (storeSet, storeGet) {
+  return {
+    listeners: [],
+    getListener: function getListener(formItemId) {
+      return storeGet().listeners.find(function (l) {
+        return l.formItemId === formItemId;
+      });
+    },
+    getListeners: function getListeners() {
+      return storeGet().listeners;
+    },
+    setListener: function setListener(_ref4) {
+      var formName = _ref4.formName,
+        name = _ref4.name,
+        onChange = _ref4.onChange,
+        onReset = _ref4.onReset,
+        isTouched = _ref4.isTouched,
+        isDirty = _ref4.isDirty,
+        formItemId = _ref4.formItemId,
+        internalErrors = _ref4.internalErrors,
+        onFocus = _ref4.onFocus,
+        emitFocus = _ref4.emitFocus;
+      return storeSet(immer.produce(function (state) {
+        var storeListeners = state.listeners;
+        var findListenerIndex = state.listeners.findIndex(function (l) {
+          return l.formItemId === formItemId;
+        });
+        if (findListenerIndex > -1) {
+          if (!lodash.isNil(formName)) {
+            storeListeners[findListenerIndex].formName = formName;
+          }
+          if (!lodash.isNil(name)) {
+            storeListeners[findListenerIndex].name = name;
+          }
+          if (!lodash.isNil(onChange)) {
+            storeListeners[findListenerIndex].onChange = onChange;
+          }
+          if (!lodash.isNil(onReset)) {
+            storeListeners[findListenerIndex].onReset = onReset;
+          }
+          if (!lodash.isNil(isTouched)) {
+            storeListeners[findListenerIndex].isTouched = isTouched;
+          }
+          if (!lodash.isNil(isDirty)) {
+            storeListeners[findListenerIndex].isDirty = isDirty;
+          }
+          if (!lodash.isNil(internalErrors)) {
+            storeListeners[findListenerIndex].internalErrors = internalErrors;
+          }
+          if (!lodash.isNil(onFocus)) {
+            storeListeners[findListenerIndex].onFocus = onFocus;
+          }
+          if (!lodash.isNil(emitFocus)) {
+            storeListeners[findListenerIndex].emitFocus = emitFocus;
+          }
+          return;
+        }
+        storeListeners.push({
+          name: name,
+          formName: formName,
+          isTouched: isTouched,
+          isDirty: isDirty,
+          formItemId: formItemId,
+          internalErrors: internalErrors,
+          onChange: onChange,
+          onReset: onReset
+        });
+      }));
+    },
+    revokeListener: function revokeListener(formItemId, onAfterRevoke) {
+      return storeSet(immer.produce(function (state) {
+        var storeListeners = state.listeners;
+        var findListenerIndex = storeListeners.findIndex(function (l) {
+          return l.formItemId == formItemId;
+        });
+
+        // console.log("Find item for revoke: ", findListenerIndex, formItemId);
+
+        if (findListenerIndex > -1) {
+          var listenersInfo = lodash.cloneDeep(storeListeners[findListenerIndex]);
+          storeListeners.splice(findListenerIndex, 1);
+          onAfterRevoke(listenersInfo, storeListeners.filter(function (l) {
+            return l.name === listenersInfo.name && l.formName === listenersInfo.formName && l.formItemId !== listenersInfo.formItemId;
+          }));
+        }
+      }));
+    }
+  };
+});
+var useFormCleanUp = zustand.create(function (storeSet) {
+  return {
+    cleanUpStack: [],
+    setCleanUpStack: function setCleanUpStack(_ref5) {
+      var name = _ref5.name,
+        type = _ref5.type,
+        itemKey = _ref5.itemKey,
+        formName = _ref5.formName;
+      return storeSet(immer.produce(function (state) {
+        var oldValues = state.cleanUpStack;
+        var cleanUpKey = uuid.v4();
+        oldValues.push({
+          name: name,
+          type: type,
+          key: cleanUpKey,
+          itemKey: itemKey,
+          formName: formName
+        });
+      }));
+    },
+    clearCleanUpStack: function clearCleanUpStack() {
+      return storeSet(immer.produce(function (state) {
+        state.cleanUpStack = [];
+      }));
+    }
+  };
+});
+
+var FormCleanUp = function FormCleanUp() {
+  var _useFormCleanUp = useFormCleanUp(shallow.useShallow(function (state) {
+      return {
+        cleanUpStack: state.cleanUpStack,
+        clearCleanUpStack: state.clearCleanUpStack
+      };
+    })),
+    cleanUpStack = _useFormCleanUp.cleanUpStack,
+    clearCleanUpStack = _useFormCleanUp.clearCleanUpStack;
+  var _useFormListeners = useFormListeners(shallow.useShallow(function (state) {
+      return {
+        revokeListener: state.revokeListener
+      };
+    })),
+    revokeListener = _useFormListeners.revokeListener;
+  var _useFormStore = useFormStore(shallow.useShallow(function (state) {
+      return {
+        clearObjKeyItem: state.clearObjKeyItem,
+        clearArrItem: state.clearArrItem
+      };
+    })),
+    clearObjKeyItem = _useFormStore.clearObjKeyItem,
+    clearArrItem = _useFormStore.clearArrItem;
+  react.useEffect(function () {
+    if (Array.isArray(cleanUpStack) && cleanUpStack != null && cleanUpStack.length) {
+      //   console.log("Trigger clean up: ", cleanUpStack);
+      cleanUpStack.forEach(function (c) {
+        if (c.itemKey) {
+          console.log("Revoke in Clean up: ", c);
+          revokeListener(c.itemKey, function (listener, same) {
+            if (!same.length) {
+              console.log("Trigger after revoke: ", listener, same);
+              clearObjKeyItem(listener.formName, listener.name);
+            }
+          });
+        } else {
+          if (c.type === "array") {
+            console.log(c);
+            clearArrItem(c.formName, c.name);
+          }
+        }
+      });
+      clearCleanUpStack();
+    }
+  }, [cleanUpStack]);
+  return h(Fragment, null);
+};
+
+var _excluded$4 = ["children", "formName", "initialValues", "onFinish", "onReject", "onFinally", "FormElement"];
+function _catch(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
+  return result;
+}
+var FormContext = react.createContext(null);
+function Form(_ref) {
+  var children = _ref.children,
+    formName = _ref.formName,
+    initialValues = _ref.initialValues,
+    onFinish = _ref.onFinish,
+    onReject = _ref.onReject,
+    onFinally = _ref.onFinally,
+    FormElement = _ref.FormElement,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  var _useFormStore = useFormStore(shallow.useShallow(function (state) {
+      var _state$formStates;
+      return {
+        setInitData: state.setFormInitData,
+        getFormValues: state.getFormValues,
+        setFormState: state.setFormState,
+        setFormInstance: state.setFormInstance,
+        revokeFormInstance: state.revokeFormInstance,
+        setData: state.setData,
+        setSubmitHistory: state.setSubmitHistory,
+        getFormItemValue: state.getFormItemValue,
+        clearFormValues: state.clearFormValues,
+        clearFormInitialValues: state.clearFormInitialValues,
+        clearFormState: state.clearFormState,
+        // Test, nhớ xóa sau khi xong
+        formStates: (_state$formStates = state.formStates) == null ? void 0 : _state$formStates[formName]
+      };
+    })),
+    getFormItemValue = _useFormStore.getFormItemValue,
+    setInitData = _useFormStore.setInitData,
+    setData = _useFormStore.setData,
+    getFormValues = _useFormStore.getFormValues,
+    setFormState = _useFormStore.setFormState,
+    setFormInstance = _useFormStore.setFormInstance,
+    revokeFormInstance = _useFormStore.revokeFormInstance,
+    setSubmitHistory = _useFormStore.setSubmitHistory,
+    clearFormValues = _useFormStore.clearFormValues,
+    clearFormInitialValues = _useFormStore.clearFormInitialValues,
+    clearFormState = _useFormStore.clearFormState;
+  var _useFormListeners = useFormListeners(shallow.useShallow(function (state) {
+      return {
+        getListeners: state.getListeners
+      };
+    })),
+    getListeners = _useFormListeners.getListeners;
+  var setFieldValue = function setFieldValue(name, value, options) {
+    var listener = getListeners().find(function (l) {
+      return l.name === name && l.formName === formName;
+    });
+    if (listener) {
+      listener.onChange(value, options);
+    } else {
+      setData(formName, name, value);
+    }
+  };
+  var setFieldValues = function setFieldValues(values, options) {
+    if (options === void 0) {
+      options = {
+        notTriggerDirty: false
+      };
+    }
+    var allStringPath = getAllNoneObjStringPath(values);
+    allStringPath.forEach(function (p) {
+      var listener = getListeners().find(function (l) {
+        return l.name === p && l.formName === formName;
+      });
+      if (listener) {
+        listener.onChange(lodash.get(values, listener.name), options);
+      } else {
+        setData(formName, p, lodash.get(values, p));
+      }
+    });
+  };
+  var getFieldValue = function getFieldValue(name) {
+    return getFormItemValue(formName, name);
+  };
+  var getFieldValues = function getFieldValues(names) {
+    if (names === void 0) {
+      names = [];
+    }
+    return names.map(function (name) {
+      return {
+        name: name,
+        value: getFormItemValue(formName, name)
+      };
+    });
+  };
+  var setFieldFocus = function setFieldFocus(name) {
+    var listener = getListeners().find(function (l) {
+      return l.name === name && l.formName === formName;
+    });
+    if (listener && typeof listener.emitFocus === "function") {
+      listener.emitFocus();
+    }
+  };
+  var getFieldErrors = function getFieldErrors(names) {
+    var listeners = getListeners().filter(function (l) {
+      return names.includes(l.name) && l.formName === formName;
+    });
+    return listeners.map(function (l) {
+      return {
+        name: l.name,
+        errors: l.internalErrors || []
+      };
+    });
+  };
+  var getAllFieldErrors = function getAllFieldErrors() {
+    var _getListeners;
+    return (_getListeners = getListeners()) == null ? void 0 : _getListeners.filter(function (l) {
+      var _l$internalErrors;
+      return ((_l$internalErrors = l.internalErrors) == null ? void 0 : _l$internalErrors.length) && l.formName === formName;
+    }).map(function (l) {
+      return {
+        name: l.name,
+        formName: l.formName,
+        formItemId: l.formItemId,
+        errors: l.internalErrors
+      };
+    });
+  };
+
+  // Submit data
+  var _useTask = minhCustomHooksRelease.useTask({
+      task: function task(props) {
+        try {
+          var _temp = _catch(function () {
+            reactDom.flushSync(setFormState({
+              formName: formName,
+              submitState: "submitting"
+            }));
+            var errorFields = getAllFieldErrors();
+            var listeners = getListeners().filter(function (l) {
+              return l.formName === formName;
+            });
+            var formValues = getFormValues(formName);
+            var resultValues = lodash.cloneDeep(formValues);
+            var cleanValues = {};
+            lodash.uniq(listeners, function (l) {
+              return l.name;
+            }).forEach(function (l) {
+              lodash.set(cleanValues, l.name, lodash.get(resultValues, l.name));
+            });
+            var handleIsolateCase = function handleIsolateCase() {
+              try {
+                var _temp1 = function () {
+                  if (!(errorFields != null && errorFields.length)) {
+                    var _temp6 = function _temp6() {
+                      // if (!isEqual(cleanValues, last(getSubmitHistory(formName)))) {
+                      //   setSubmitHistory(formName, cleanValues);
+                      // }
+
+                      setSubmitHistory(formName, cleanValues);
+
+                      // if (
+                      //   !isEqual(
+                      //     resultValues,
+                      //     last(submitHistoryWithUnRegisteredValues.current)
+                      //   )
+                      // ) {
+                      //   submitHistoryWithUnRegisteredValues.current = [
+                      //     ...submitHistoryWithUnRegisteredValues.current,
+                      //     resultValues,
+                      //   ].slice(-10, 10);
+                      // }
+
+                      // resultWatchQueue.current.forEach((l) => {
+                      //   l.emitSubmitTrigger(cleanValues);
+                      //   l.emitDataChange(cleanValues);
+                      //   l.emitDataWithUnRegisteredValuesChange(resultValues);
+                      //   l.emitSubmitTriggerWithUnRegisteredValues(resultValues);
+                      // });
+                    };
+                    var _temp5 = function () {
+                      if (typeof (props == null ? void 0 : props.externalFinishCallback) !== "function") {
+                        var _temp2 = function _temp2(_onFinish) {
+                          _onFinish;
+                        };
+                        return onFinish ? Promise.resolve(onFinish(cleanValues, resultValues)).then(_temp2) : _temp2(onFinish);
+                      } else {
+                        var _temp4 = function () {
+                          if (props != null && props.callBothFinish) {
+                            var _temp3 = function _temp3(_onFinish2) {
+                              _onFinish2;
+                              return Promise.resolve(props == null ? void 0 : props.externalFinishCallback(cleanValues, resultValues)).then(function () {});
+                            };
+                            return onFinish ? Promise.resolve(onFinish(cleanValues, resultValues)).then(_temp3) : _temp3(onFinish);
+                          } else {
+                            return Promise.resolve(props == null ? void 0 : props.externalFinishCallback(cleanValues, resultValues)).then(function () {});
+                          }
+                        }();
+                        if (_temp4 && _temp4.then) return _temp4.then(function () {});
+                      }
+                    }();
+                    return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5);
+                  } else {
+                    var _temp0 = function () {
+                      if (typeof (props == null ? void 0 : props.externalRejectCallback) !== "function") {
+                        var _temp7 = function _temp7(_onReject) {
+                          _onReject;
+                        };
+                        return onReject ? Promise.resolve(onReject(errorFields)).then(_temp7) : _temp7(onReject);
+                      } else {
+                        var _temp9 = function () {
+                          if (props != null && props.callBothReject) {
+                            var _temp8 = function _temp8(_onReject2) {
+                              _onReject2;
+                              return Promise.resolve(props == null ? void 0 : props.externalRejectCallback(errorFields)).then(function () {});
+                            };
+                            return onReject ? Promise.resolve(onReject(errorFields)).then(_temp8) : _temp8(onReject);
+                          } else {
+                            return Promise.resolve(props == null ? void 0 : props.externalRejectCallback(errorFields)).then(function () {});
+                          }
+                        }();
+                        if (_temp9 && _temp9.then) return _temp9.then(function () {});
+                      }
+                    }();
+                    if (_temp0 && _temp0.then) return _temp0.then(function () {});
+                  }
+                }();
+                return Promise.resolve(_temp1 && _temp1.then ? _temp1.then(function () {}) : void 0);
+              } catch (e) {
+                return Promise.reject(e);
+              }
+            };
+            var handleFinallyCase = function handleFinallyCase() {
+              try {
+                var _temp13 = function () {
+                  if (typeof (props == null ? void 0 : props.externalFinallyCallback) !== "function") {
+                    var _temp10 = function _temp10(_onFinally) {
+                      _onFinally;
+                    };
+                    return onFinally ? Promise.resolve(onFinally({
+                      errorsField: errorFields,
+                      values: cleanValues,
+                      withUnRegisteredValues: resultValues
+                    })).then(_temp10) : _temp10(onFinally);
+                  } else {
+                    var _temp12 = function () {
+                      if (props != null && props.callBothFinally) {
+                        var _temp11 = function _temp11(_onFinally2) {
+                          _onFinally2;
+                          return Promise.resolve(props == null ? void 0 : props.externalFinallyCallback({
+                            errorsField: errorFields,
+                            values: cleanValues,
+                            withUnRegisteredValues: resultValues
+                          })).then(function () {});
+                        };
+                        return onFinally ? Promise.resolve(onFinally({
+                          errorsField: errorFields,
+                          values: cleanValues,
+                          withUnRegisteredValues: resultValues
+                        })).then(_temp11) : _temp11(onFinally);
+                      } else {
+                        return Promise.resolve(props == null ? void 0 : props.externalFinallyCallback({
+                          errorsField: errorFields,
+                          values: cleanValues,
+                          withUnRegisteredValues: resultValues
+                        })).then(function () {});
+                      }
+                    }();
+                    if (_temp12 && _temp12.then) return _temp12.then(function () {});
+                  }
+                }();
+                return Promise.resolve(_temp13 && _temp13.then ? _temp13.then(function () {}) : void 0);
+              } catch (e) {
+                return Promise.reject(e);
+              }
+            };
+            return Promise.resolve(Promise.allSettled([handleIsolateCase(), handleFinallyCase()])).then(function () {
+              if (errorFields != null && errorFields.length) {
+                setFormState({
+                  formName: formName,
+                  submitState: "rejected"
+                });
+              } else {
+                setFormState({
+                  formName: formName,
+                  submitState: "submitted"
+                });
+              }
+            });
+          }, function (error) {
+            console.error("Error in form submit: ", error);
+            setFormState({
+              formName: formName,
+              submitState: "rejected"
+            });
+          });
+          return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      }
+    }),
+    runSubmit = _useTask.run,
+    runSubmitAsync = _useTask.runAsync,
+    reset = _useTask.reset;
+  var resetFields = function resetFields(resetOptions) {
+    reset();
+    reactDom.flushSync(setFormState({
+      formName: formName,
+      isInitied: false
+    }));
+    var totalListenerFields = getListeners();
+    if (Array.isArray(resetOptions)) {
+      totalListenerFields.forEach(function (l) {
+        var findListenerByName = resetOptions.find(function (o) {
+          return o.name === l.name;
+        });
+        if (findListenerByName) {
+          l.onReset(findListenerByName == null ? void 0 : findListenerByName.value);
+        }
+      });
+      totalListenerFields.filter(function (l) {
+        return resetOptions.find(function (o) {
+          return o.name !== l.name;
+        });
+      }).forEach(function (l) {
+        l == null || l.onReset == null || l.onReset();
+      });
+    } else if (typeof resetOptions === "object") {
+      var allStringPath = getAllNoneObjStringPath(resetOptions);
+      allStringPath.forEach(function (p) {
+        var listener = totalListenerFields.find(function (l) {
+          return l.name === p && l.formName === formName;
+        });
+        if (listener) {
+          listener.onChange(lodash.get(resetOptions, listener.name));
+        } else {
+          setData(formName, p, lodash.get(resetOptions, p));
+        }
+      });
+    } else {
+      totalListenerFields.forEach(function (l) {
+        l == null || l.onReset == null || l.onReset();
+      });
+    }
+    setFormState({
+      formName: formName,
+      isInitied: true
+    });
+  };
+  react.useEffect(function () {
+    setInitData(formName, initialValues);
+    setFormState({
+      formName: formName,
+      isInitied: true,
+      submitState: "idle"
+    });
+    setFormInstance({
+      formName: formName,
+      resetFields: resetFields,
+      submit: runSubmit,
+      submitAsync: runSubmitAsync,
+      setFieldValue: setFieldValue,
+      setFieldValues: setFieldValues,
+      getFieldValue: getFieldValue,
+      getFieldValues: getFieldValues,
+      setFieldFocus: setFieldFocus,
+      getFieldErrors: getFieldErrors
+    });
+    return function () {
+      revokeFormInstance({
+        formName: formName
+      });
+      clearFormInitialValues(formName);
+      clearFormValues(formName);
+      clearFormState(formName);
+    };
+  }, []);
+  return h(FormContext.Provider, {
+    value: {
+      formName: formName
+    }
+  }, FormElement ? h(FormElement, _extends({
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      runSubmit();
+    }
+  }, props), children) : h("form", _extends({
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      runSubmit();
+    }
+  }, props), children), h(FormCleanUp, null));
+}
+function useFormContext() {
+  var c = react.useContext(FormContext);
+  if (!c) throw new Error("Must be use inside FormProvider");
+  return c;
+}
+function useForm(formNameOrFormInstance) {
+  var formInstance = useFormStore(function (state) {
+    return state.formInstances.find(function (i) {
+      var _formNameOrFormInstan;
+      return i.formName === ((_formNameOrFormInstan = formNameOrFormInstance == null ? void 0 : formNameOrFormInstance.formName) != null ? _formNameOrFormInstan : formNameOrFormInstance);
+    });
+  });
+  return [formInstance];
+}
+function useWatch(name, formNameOrFormInstance) {
+  var _useForm = useForm(formNameOrFormInstance),
+    formInstance = _useForm[0];
+  var value = useFormStore(function (state) {
+    var _formInstance$formNam;
+    return state.getFormItemValue((_formInstance$formNam = formInstance == null ? void 0 : formInstance.formName) != null ? _formInstance$formNam : formNameOrFormInstance, name);
+  });
+  return value;
+}
+function useSubmitDataWatch(_ref2) {
+  var formNameOrFormInstance = _ref2.formNameOrFormInstance,
+    _ref2$triggerWhenChan = _ref2.triggerWhenChange,
+    triggerWhenChange = _ref2$triggerWhenChan === void 0 ? false : _ref2$triggerWhenChan,
+    mapFn = _ref2.mapFn;
+  var _useForm2 = useForm(formNameOrFormInstance),
+    formInstance = _useForm2[0];
+  var value = useFormStore(function (state) {
+    return lodash.last(lodash.get(state.submitHistory, formInstance == null ? void 0 : formInstance.formName));
+  });
+  var _useState = react.useState(mapFn ? mapFn(value, null) : value),
+    submitData = _useState[0],
+    setSubmitData = _useState[1];
+  react.useEffect(function () {
+    if (!triggerWhenChange || !lodash.isEqual(submitData, value)) {
+      setSubmitData(mapFn ? mapFn(value, submitData) : value);
+    }
+  }, [value, triggerWhenChange]);
+  return submitData;
+}
+var useFormStateWatch = function useFormStateWatch(formNameOrFormInstance) {
+  var _useForm3 = useForm(formNameOrFormInstance),
+    formInstance = _useForm3[0];
+  var formState = useFormStore(function (state) {
+    var _state$formStates2;
+    return (_state$formStates2 = state.formStates) == null ? void 0 : _state$formStates2[formInstance == null ? void 0 : formInstance.formName];
+  });
+  return formState;
+};
+Form.useForm = useForm;
+Form.useWatch = useWatch;
+Form.useSubmitDataWatch = useSubmitDataWatch;
+Form.useFormStateWatch = useFormStateWatch;
+
+// ESM re-declaration of validation constants to match src/constants/validation.ts
+var IS_STRING_NUMBER_REGEX = /^\d+$/;
+var IS_USERNAME_REGEX = /^[a-zA-Z0-9._]{3,16}$/;
+var IS_PASSWORD_REGEX = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+var IS_POSITIVE_STRING_NUMBER_REGEX = /^[1-9]\d*$/;
+var IS_POSITIVE_INTEGER_STRING_NUMBER_REGEX = /^(?:0|[1-9]\d*)(?:\.\d+)?$/;
+var IS_VIETNAMESE_PHONE_NUMBER_REGEX = /^(?:\+84|0)[\s\-\.]?(?:3[2-9]|5[6|8|9]|7[06-9]|8[1-5]|9[0-9])[\s\-\.]?\d[\d\s\-\.]{6,8}$/;
+var IS_EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+var IS_NAME_REGEX = /^[A-Za-zÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂÂÊÔƠƯăâêôơưÇçÝýỳỵỷỹ\s]{2,50}$/;
+var IS_NOSPACE_STRING_AND_NUMBER_REGEX = /^[A-Za-zÀ-ỹ0-9]+$/;
+var IS_STRING_AND_NUMBER_REGEX = /^[A-Za-zÀ-ỹ0-9][A-Za-zÀ-ỹ0-9\s]*$/;
+var IS_NO_SPACE_ALPHABET_STRING_AND_NUMBER_REGEX = /^[A-Za-z0-9]+$/;
+var IS_ALPHABET_STRING_AND_NUMBER_REGEX = /^[A-Za-z0-9]+(?:\s[A-Za-z0-9]+)*$/;
+var IS_NO_SPACE_ALPHABET_STRING_REGEX = /^[A-Za-z]+$/;
+
+var _iteratorSymbol = typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator")) : "@@iterator";
+function _settle(pact, state, value) {
+  if (!pact.s) {
+    if (value instanceof _Pact) {
+      if (value.s) {
+        if (state & 1) {
+          state = value.s;
+        }
+        value = value.v;
+      } else {
+        value.o = _settle.bind(null, pact, state);
+        return;
+      }
+    }
+    if (value && value.then) {
+      value.then(_settle.bind(null, pact, state), _settle.bind(null, pact, 2));
+      return;
+    }
+    pact.s = state;
+    pact.v = value;
+    var observer = pact.o;
+    if (observer) {
+      observer(pact);
+    }
+  }
+}
+var _Pact = /*#__PURE__*/function () {
+  function _Pact() {}
+  _Pact.prototype.then = function (onFulfilled, onRejected) {
+    var result = new _Pact();
+    var state = this.s;
+    if (state) {
+      var callback = state & 1 ? onFulfilled : onRejected;
+      if (callback) {
+        try {
+          _settle(result, 1, callback(this.v));
+        } catch (e) {
+          _settle(result, 2, e);
+        }
+        return result;
+      } else {
+        return this;
+      }
+    }
+    this.o = function (_this) {
+      try {
+        var value = _this.v;
+        if (_this.s & 1) {
+          _settle(result, 1, onFulfilled ? onFulfilled(value) : value);
+        } else if (onRejected) {
+          _settle(result, 1, onRejected(value));
+        } else {
+          _settle(result, 2, value);
+        }
+      } catch (e) {
+        _settle(result, 2, e);
+      }
+    };
+    return result;
+  };
+  return _Pact;
+}();
+function _isSettledPact(thenable) {
+  return thenable instanceof _Pact && thenable.s & 1;
+}
+function _forTo(array, body, check) {
+  var i = -1,
+    pact,
+    reject;
+  function _cycle(result) {
+    try {
+      while (++i < array.length && (!check || !check())) {
+        result = body(i);
+        if (result && result.then) {
+          if (_isSettledPact(result)) {
+            result = result.v;
+          } else {
+            result.then(_cycle, reject || (reject = _settle.bind(null, pact = new _Pact(), 2)));
+            return;
+          }
+        }
+      }
+      if (pact) {
+        _settle(pact, 1, result);
+      } else {
+        pact = result;
+      }
+    } catch (e) {
+      _settle(pact || (pact = new _Pact()), 2, e);
+    }
+  }
+  _cycle();
+  return pact;
+}
+var VALID_PREMITIVE_TYPE = ["string", "number", "undefined"];
+function _forOf(target, body, check) {
+  if (typeof target[_iteratorSymbol] === "function") {
+    var iterator = target[_iteratorSymbol](),
+      step,
+      pact,
+      reject;
+    function _cycle(result) {
+      try {
+        while (!(step = iterator.next()).done && (!check || !check())) {
+          result = body(step.value);
+          if (result && result.then) {
+            if (_isSettledPact(result)) {
+              result = result.v;
+            } else {
+              result.then(_cycle, reject || (reject = _settle.bind(null, pact = new _Pact(), 2)));
+              return;
+            }
+          }
+        }
+        if (pact) {
+          _settle(pact, 1, result);
+        } else {
+          pact = result;
+        }
+      } catch (e) {
+        _settle(pact || (pact = new _Pact()), 2, e);
+      }
+    }
+    _cycle();
+    if (iterator.return) {
+      var _fixup = function (value) {
+        try {
+          if (!step.done) {
+            iterator.return();
+          }
+        } catch (e) {}
+        return value;
+      };
+      if (pact && pact.then) {
+        return pact.then(_fixup, function (e) {
+          throw _fixup(e);
+        });
+      }
+      _fixup();
+    }
+    return pact;
+  }
+  // No support for Symbol.iterator
+  if (!("length" in target)) {
+    throw new TypeError("Object is not iterable");
+  }
+  // Handle live collections properly
+  var values = [];
+  for (var i = 0; i < target.length; i++) {
+    values.push(target[i]);
+  }
+  return _forTo(values, function (i) {
+    return body(values[i]);
+  }, check);
+}
+function useFormItemControl(_ref) {
+  var formName = _ref.formName,
+    form = _ref.form,
+    name = _ref.name,
+    initialValue = _ref.initialValue,
+    formItemId = _ref.formItemId,
+    rules = _ref.rules,
+    elementRef = _ref.elementRef;
+  var contextForm = useFormContext();
+  var _useFormStore = useFormStore(shallow.useShallow(function (state) {
+      return {
+        value: lodash.get(state.forms, (formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)) + "." + name),
+        setData: state.setData,
+        getCacheData: state.getCacheData,
+        getFormValues: state.getFormValues
+      };
+    })),
+    value = _useFormStore.value,
+    setData = _useFormStore.setData,
+    getCacheData = _useFormStore.getCacheData,
+    getFormValues = _useFormStore.getFormValues;
+  var _useFormCleanUp = useFormCleanUp(shallow.useShallow(function (state) {
+      return {
+        setCleanUpStack: state.setCleanUpStack
+      };
+    })),
+    setCleanUpStack = _useFormCleanUp.setCleanUpStack;
+  var _useFormStore2 = useFormStore(shallow.useShallow(function (state) {
+      // console.log(
+      //   "Shallow get initValue: ",
+      //   formName || form?.formName || contextForm?.formName,
+      //   name,
+      //   get(
+      //     state.initialValues,
+      //     `${formName || form?.formName || contextForm?.formName}.${name}`
+      //   )
+      // );
+      return {
+        initValue: lodash.get(state.initialValues, (formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)) + "." + name),
+        setInitData: state.setInitData,
+        getInitData: state.getInitData
+      };
+    })),
+    internalInitValue = _useFormStore2.initValue,
+    setInitData = _useFormStore2.setInitData,
+    getInitData = _useFormStore2.getInitData;
+  var _useFormListeners = useFormListeners(shallow.useShallow(function (state) {
+      // console.log(
+      //   "Get listener from store: ",
+      //   state.listeners.find((l) => l.formItemId === formItemId)
+      // );
+      return {
+        listener: state.listeners.find(function (l) {
+          return l.formItemId === formItemId;
+        }),
+        setListener: state.setListener
+      };
+    })),
+    listener = _useFormListeners.listener,
+    setListener = _useFormListeners.setListener;
+  var onInitData = function onInitData(value) {
+    // console.log(
+    //   "Init:",
+    //   formName || form?.formName || contextForm?.formName,
+    //   name,
+    //   value
+    // );
+    setInitData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name, value);
+  };
+  var onFocus = function onFocus() {
+    setListener({
+      formItemId: formItemId,
+      isTouched: true,
+      isDirty: listener == null ? void 0 : listener.isDirty
+    });
+  };
+  var emitFocus = function emitFocus() {
+    if (elementRef != null && elementRef.current) {
+      elementRef.current.focus();
+    }
+  };
+  var onChange = function onChange(value, options) {
+    if ((options == null ? void 0 : options.notTriggerDirty) !== true) {
+      setListener({
+        formItemId: formItemId,
+        isDirty: true,
+        isTouched: listener == null ? void 0 : listener.isTouched
+      });
+    }
+    setData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name, value);
+  };
+  var onReset = function onReset(value) {
+    console.log("Reset", value, getInitData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name));
+    onChange(lodash.isNil(value) ? getInitData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name) : value);
+  };
+
+  // validate field rules
+  var internalRules = react.useMemo(function () {
+    return rules || [];
+  }, [rules]);
+  var _useTaskEffect = minhCustomHooksRelease.useTaskEffect({
+      task: function task() {
+        try {
+          var _temp2 = function _temp2() {
+            setListener({
+              formItemId: formItemId,
+              internalErrors: listErrors
+            });
+            return listErrors;
+          };
+          var listErrors = [];
+          var formValues = getFormValues(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName));
+          var ruleToTask = internalRules == null ? void 0 : internalRules.map(function (r, index) {
+            return function () {
+              try {
+                var _temp4 = function _temp4(_result) {
+                  if (_exit) return _result;
+                  if (VALID_PREMITIVE_TYPE.includes(typeof value)) {
+                    var _fieldValue$toString;
+                    // REQUIRE
+                    if (r.required && !((fieldValue == null || (_fieldValue$toString = fieldValue.toString()) == null || (_fieldValue$toString = _fieldValue$toString.trim()) == null ? void 0 : _fieldValue$toString.length) > 0)) {
+                      // tempMessage.push("This field is required!");
+                      listErrors.push({
+                        ruleName: ruleName,
+                        message: r.message
+                      });
+                      return;
+                    }
+
+                    // Min Max
+                    if (!lodash.isNil(r.min) || !lodash.isNil(r.max)) {
+                      var _r$min, _r$max;
+                      if (lodash.isNil(value)) {
+                        listErrors.push({
+                          ruleName: ruleName,
+                          message: r.message
+                        });
+                        return;
+                      }
+                      if (((_r$min = r.min) != null ? _r$min : Number.MIN_SAFE_INTEGER) <= ((_r$max = r.max) != null ? _r$max : Number.MAX_SAFE_INTEGER)) {
+                        if (!lodash.isNil(r.min)) {
+                          if (!isNaN(Number(fieldValue)) && Number(fieldValue) <= r.min) {
+                            // tempMessage.push(MIN_INVALID_MESSAGE);
+                            listErrors.push({
+                              ruleName: ruleName,
+                              message: r.message
+                            });
+                            return;
+                          }
+                        }
+                        if (!lodash.isNil(r.max)) {
+                          if (!isNaN(Number(fieldValue)) && Number(fieldValue) >= r.max) {
+                            // tempMessage.push(MAX_INVALID_MESSAGE);
+                            listErrors.push({
+                              ruleName: ruleName,
+                              message: r.message
+                            });
+                            return;
+                          }
+                        }
+                      }
+                    }
+
+                    // MIN LENGTH MAX LENGTH
+                    if (!lodash.isNil(r.minLength) || !lodash.isNil(r.maxLength)) {
+                      var _r$minLength, _r$maxLength;
+                      if (((_r$minLength = r.minLength) != null ? _r$minLength : Number.MIN_SAFE_INTEGER) <= ((_r$maxLength = r.maxLength) != null ? _r$maxLength : Number.MAX_SAFE_INTEGER)) {
+                        if (!lodash.isNil(r.minLength)) {
+                          if ((fieldValue == null ? void 0 : fieldValue.length) <= r.minLength) {
+                            // tempMessage.push(MIN_INVALID_LENGTH_MESSAGE);
+                            listErrors.push({
+                              ruleName: ruleName,
+                              message: r.message
+                            });
+                            return;
+                          }
+                        }
+                        if (!lodash.isNil(r.maxLength)) {
+                          if ((fieldValue == null ? void 0 : fieldValue.length) >= r.maxLength) {
+                            // tempMessage.push(MAX_INVALID_LENGTH_MESSAGE);
+                            listErrors.push({
+                              ruleName: ruleName,
+                              message: r.message
+                            });
+                            return;
+                          }
+                        }
+                      }
+                    }
+
+                    // Password
+                    if (r.isPassword && !IS_PASSWORD_REGEX.test(fieldValue)) {
+                      // tempMessage.push(IS_PASSWORD_INVALID_MESSAGE);
+                      listErrors.push({
+                        ruleName: ruleName,
+                        message: r.message
+                      });
+                      return;
+                    }
+
+                    // Username
+                    if (r.isUsername && !IS_USERNAME_REGEX.test(fieldValue)) {
+                      // tempMessage.push(IS_USERNAME_INVALID_MESSAGE);
+                      listErrors.push({
+                        ruleName: ruleName,
+                        message: r.message
+                      });
+                      return;
+                    }
+
+                    // Is Vietnamese Phone number
+                    if (r.isPhoneNumber && !IS_VIETNAMESE_PHONE_NUMBER_REGEX.test(fieldValue)) {
+                      // tempMessage.push(IS_VIETNAMESE_PHONE_NUMBER_INVALID_MESSAGE);
+                      listErrors.push({
+                        ruleName: ruleName,
+                        message: r.message
+                      });
+                      return;
+                    }
+
+                    // String number
+                    if (r.isStringNumber && !IS_STRING_NUMBER_REGEX.test(fieldValue)) {
+                      // tempMessage.push(IS_STRING_NUMBER_INVALID_MESSAGE);
+                      listErrors.push({
+                        ruleName: ruleName,
+                        message: r.message
+                      });
+                      return;
+                    }
+
+                    // String positive number
+                    if (r.isPositiveStringNumber && !IS_POSITIVE_STRING_NUMBER_REGEX.test(fieldValue)) {
+                      // tempMessage.push(IS_POSITIVE_STRING_NUMBER_INVALID_MESSAGE);
+                      listErrors.push({
+                        ruleName: ruleName,
+                        message: r.message
+                      });
+                      return;
+                    }
+
+                    // String positive integer number
+                    if (r.isPositiveIntegerStringNumber && !IS_POSITIVE_INTEGER_STRING_NUMBER_REGEX.test(fieldValue)) {
+                      // tempMessage.push(
+                      listErrors.push({
+                        ruleName: ruleName,
+                        message: r.message
+                      });
+                      return;
+                      //   IS_POSITIVE_INTEGER_STRING_NUMBER_INVALID_MESSAGE
+                      // );
+                    }
+
+                    // Email
+                    if (r.isEmail && !IS_EMAIL_REGEX.test(fieldValue)) {
+                      // tempMessage.push(IS_EMAIL_INVALID_MESSAGE);
+                      listErrors.push({
+                        ruleName: ruleName,
+                        message: r.message
+                      });
+                      return;
+                    }
+
+                    // Vietnamese Name
+                    if (r.isVietnameseName && !IS_NAME_REGEX.test(fieldValue)) {
+                      // tempMessage.push(IS_NAME_INVALID_MESSAGE);
+                      listErrors.push({
+                        ruleName: ruleName,
+                        message: r.message
+                      });
+                      return;
+                    }
+
+                    // String and number without whitespace
+                    if (r.isNoSpaceStringAndNumber && !IS_NOSPACE_STRING_AND_NUMBER_REGEX.test(fieldValue)) {
+                      // tempMessage.push(IS_NOSPACE_STRING_AND_NUMBER_MESSAGE);
+                      listErrors.push({
+                        ruleName: ruleName,
+                        message: r.message
+                      });
+                      return;
+                    }
+
+                    // String and number with
+                    if (r.isStringAndNumber && !IS_STRING_AND_NUMBER_REGEX.test(fieldValue)) {
+                      // tempMessage.push(IS_STRING_AND_NUMBER_MESSAGE);
+                      listErrors.push({
+                        ruleName: ruleName,
+                        message: r.message
+                      });
+                      return;
+                    }
+                    if (r.isNoSpaceOnlyAlphabetStringAndNumber && !IS_NO_SPACE_ALPHABET_STRING_AND_NUMBER_REGEX.test(fieldValue)) {
+                      // tempMessage.push(IS_NO_SPACE_ALPHABET_STRING_AND_NUMBER_MESSAGE);
+                      listErrors.push({
+                        ruleName: ruleName,
+                        message: r.message
+                      });
+                      return;
+                    }
+                    if (r.isOnlyAlphabetStringAndNumber && !IS_ALPHABET_STRING_AND_NUMBER_REGEX.test(fieldValue)) {
+                      // tempMessage.push(IS_ALPHABET_STRING_AND_NUMBER_MESSAGE);
+                      listErrors.push({
+                        ruleName: ruleName,
+                        message: r.message
+                      });
+                      return;
+                    }
+                    if (r.isNoSpaceAlphabetString && !IS_NO_SPACE_ALPHABET_STRING_REGEX.test(fieldValue)) {
+                      // tempMessage.push(IS_NO_SPACE_ALPHABET_STRING_MESSAGE);
+                      listErrors.push({
+                        ruleName: ruleName,
+                        message: r.message
+                      });
+                    }
+                  }
+                };
+                var _exit;
+                var ruleName = (r == null ? void 0 : r.name) || index;
+                var fieldValue = value == null || value.toString == null ? void 0 : value.toString();
+                var _temp3 = function () {
+                  if (typeof r.handler === "function") {
+                    return Promise.resolve(r.handler(value, formValues)).then(function (_r$handler) {
+                      if (!_r$handler) {
+                        listErrors.push({
+                          ruleName: ruleName,
+                          message: r.message
+                        });
+                        _exit = 1;
+                      }
+                    });
+                  }
+                }();
+                return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
+              } catch (e) {
+                return Promise.reject(e);
+              }
+            };
+          });
+
+          // console.log("Trigger validate: ", listErrors);
+          var _temp = _forOf(ruleToTask, function (rAsync) {
+            return Promise.resolve(rAsync()).then(function () {});
+          });
+          return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      },
+      deps: [internalRules, value],
+      onError: function onError(err) {
+        console.log(err);
+      }
+    }),
+    errors = _useTaskEffect.data,
+    state = _useTaskEffect.state;
+
+  // useEffect(() => {
+  //   console.log({ name, errors });
+  // }, [errors]);
+
+  // useEffect(() => {
+  //   console.log({ name, listener });
+  // }, [listener]);
+
+  react.useEffect(function () {
+    // console.log({ internalInitValue, value, initialValue });
+    // console.log("Init item value: ", name, value, internalInitValue);
+    // console.log("internalInitValue: ", internalInitValue);
+
+    if (!value) {
+      if (!internalInitValue) {
+        if (!lodash.isNil(initialValue)) {
+          console.log("On init data", initialValue);
+          onInitData(initialValue);
+        }
+      } else {
+        onChange(internalInitValue);
+      }
+    }
+  }, [internalInitValue]);
+  react.useEffect(function () {
+    if (!listener) {
+      setListener({
+        onChange: onChange,
+        emitFocus: emitFocus,
+        isTouched: false,
+        isDirty: false,
+        name: name,
+        formName: formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName),
+        formItemId: formItemId,
+        onReset: onReset
+      });
+    }
+
+    // return () => {
+    //   console.log("Revoke listener", listener);
+
+    // };
+  }, []);
+  react.useEffect(function () {
+    if (listener) {
+      setListener({
+        formItemId: formItemId,
+        onChange: onChange,
+        name: name,
+        formName: formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName),
+        onReset: onReset,
+        isTouched: listener == null ? void 0 : listener.isTouched,
+        isDirty: listener == null ? void 0 : listener.isDirty
+      });
+    }
+    var cacheData = getCacheData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName));
+
+    // console.log("Get cache Data after list change: ", cacheData);
+
+    if (cacheData) {
+      var getNewDataFromCache = lodash.get(cacheData, name);
+
+      // console.log("Init data when change form ite: ", name, cacheData);
+
+      if (!getNewDataFromCache) {
+        onChange(initialValue);
+      } else onChange(getNewDataFromCache);
+    }
+  }, [name, formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)]);
+  react.useEffect(function () {
+    return function () {
+      setCleanUpStack({
+        itemKey: formItemId
+      });
+    };
+  }, []);
+  return {
+    value: value,
+    onChange: onChange,
+    state: state,
+    errors: errors,
+    onFocus: onFocus,
+    isDirty: listener == null ? void 0 : listener.isDirty
+  };
+}
+
+function FormItem(_ref) {
+  var _cloneElement;
+  var children = _ref.children,
+    name = _ref.name,
+    formName = _ref.formName,
+    initialValue = _ref.initialValue,
+    externalFormItemId = _ref.formItemId,
+    rules = _ref.rules,
+    _ref$valuePropName = _ref.valuePropName,
+    valuePropName = _ref$valuePropName === void 0 ? "value" : _ref$valuePropName,
+    getValueFromEvent = _ref.getValueFromEvent;
+  var elRef = react.useRef();
+  var _useState = react.useState(externalFormItemId != null ? externalFormItemId : uuid.v4()),
+    formItemId = _useState[0];
+  var _useFormItemControl = useFormItemControl({
+      formName: formName,
+      name: name,
+      initialValue: initialValue,
+      formItemId: formItemId,
+      rules: rules,
+      elementRef: elRef
+    }),
+    value = _useFormItemControl.value,
+    _onChange = _useFormItemControl.onChange,
+    errors = _useFormItemControl.errors,
+    state = _useFormItemControl.state,
+    onFocus = _useFormItemControl.onFocus,
+    isDirty = _useFormItemControl.isDirty;
+  // console.log("re-render", formName, name);
+
+  // useEffect(() => {
+  //   console.log({ value });
+  // }, [value]);
+
+  return react.cloneElement(children, (_cloneElement = {}, _cloneElement[valuePropName] = value, _cloneElement.onChange = function onChange(e) {
+    var val = e;
+    if (getValueFromEvent && typeof getValueFromEvent === "function") {
+      val = getValueFromEvent(e);
+    } else {
+      if (e && e.target) {
+        val = e.target.value;
+      }
+    }
+    _onChange(val);
+  }, _cloneElement.isDirty = isDirty, _cloneElement.errors = errors, _cloneElement.onFocus = onFocus, _cloneElement.validateState = state, _cloneElement.ref = elRef, _cloneElement));
+}
+
+function useFormListControl(_ref) {
+  var name = _ref.name,
+    form = _ref.form,
+    initialValues = _ref.initialValues,
+    formName = _ref.formName;
+  var contextForm = useFormContext();
+  var getFormValues = useFormStore(function (state) {
+    return state.getFormValues;
+  });
+  var _useState = react.useState(),
+    listFormInitValues = _useState[0],
+    setListFormInitValues = _useState[1];
+  var _useFormStore = useFormStore(shallow.useShallow(function (state) {
+      return {
+        cacheData: state.cacheData,
+        clearCacheData: state.clearCacheData,
+        setCacheData: state.setCacheData
+      };
+    })),
+    clearCacheData = _useFormStore.clearCacheData,
+    setCacheData = _useFormStore.setCacheData;
+  var _useFormCleanUp = useFormCleanUp(shallow.useShallow(function (state) {
+      return {
+        setCleanUpStack: state.setCleanUpStack
+      };
+    })),
+    setCleanUpStack = _useFormCleanUp.setCleanUpStack;
+  var _useFormStore2 = useFormStore(shallow.useShallow(function (state) {
+      // console.log(
+      //   "Shallow get initValue: ",
+      //   formName || form?.formName || contextForm?.formName,
+      //   name,
+      //   get(
+      //     state.initialValues,
+      //     `${formName || form?.formName || contextForm?.formName}.${name}`
+      //   )
+      // );
+      return {
+        initValue: lodash.get(state.initialValues, (formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)) + "." + name),
+        formState: lodash.get(state.formStates, formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)),
+        setInitData: state.setInitData,
+        getFormState: state.getFormState
+      };
+    })),
+    internalInitValue = _useFormStore2.initValue,
+    formState = _useFormStore2.formState;
+  var _useState2 = react.useState([]),
+    listFields = _useState2[0],
+    setListFields = _useState2[1];
+  var handleCacheListField = function handleCacheListField(prev, cur) {
+    var currentFormValues = lodash.cloneDeep(getFormValues(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)));
+    var formDataBeforeChange = lodash.get(currentFormValues, name);
+    var mapPrevWithKey = formDataBeforeChange.map(function (d, index) {
+      var findPrev = prev.find(function (p, pIndex) {
+        return pIndex === index;
+      });
+      if (!findPrev) return undefined;
+      return {
+        key: findPrev.key,
+        value: d
+      };
+    }).filter(Boolean);
+    var mapCurWithKey = cur.map(function (c) {
+      return mapPrevWithKey.find(function (m) {
+        return m.key === c.key;
+      }) || c;
+    });
+    var getNewValueCache = mapCurWithKey.filter(Boolean).map(function (c) {
+      return c.value;
+    });
+    var startRemoveIndex = formDataBeforeChange.length - getNewValueCache.length;
+    // console.log("Before list fields: ", prev);
+    // console.log("After list fields: ", cur);
+    // console.log("Before change arr value: ", formDataBeforeChange);
+    // console.log("Mapping prev value with prev fields: ", mapPrevWithKey);
+    // console.log("Mapping Cur value with prev fields: ", mapCurWithKey);
+    // console.log("After change arr value: ", getNewValueCache);
+
+    // Nếu số phần tử trước khi thay đổi mảng lớn hơn thì đẩy 2 phần tử còn lại vào clean up stack để clear
+    if (startRemoveIndex > 0) {
+      Array.from(Array(startRemoveIndex)).map(function (_, index) {
+        return getNewValueCache.length + index;
+      }).forEach(function (index) {
+        // console.log("Data for cleanup arr element: ", {
+        //   formName: formName || form?.formName || contextForm?.formName,
+        //   name: `${name}.${index}`,
+        //   type: "array",
+        // });
+        setCleanUpStack({
+          formName: formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName),
+          name: name + "." + index,
+          type: "array"
+        });
+      });
+    }
+
+    // console.log({ getNewValueCache });
+    setCacheData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name, getNewValueCache);
+  };
+  var add = function add(index) {
+    setListFields(function (prev) {
+      if (index > prev.length) return prev;
+      if (index < 0) return prev;
+      if (index === prev.length) {
+        var newName = name + "." + prev.length;
+        var newKey = uuid.v4();
+        var _result = [].concat(prev, [{
+          name: newName,
+          key: newKey
+        }]);
+        return _result;
+      }
+      var clonePrev = [].concat(prev);
+      var result = clonePrev.reduce(function (prev, cur, curIndex) {
+        var newKey = uuid.v4();
+        if (curIndex === index) return [].concat(prev, [{
+          key: newKey
+        }, cur]);
+        return [].concat(prev, [cur]);
+      }, []).map(function (r, index) {
+        return {
+          name: name + "." + index,
+          key: r.key
+        };
+      });
+      handleCacheListField(prev, result);
+      return result;
+    });
+  };
+  var remove = function remove(_ref2) {
+    var index = _ref2.index,
+      key = _ref2.key;
+    setListFields(function (prev) {
+      if (!lodash.isNil(key)) {
+        var clonePrev = [].concat(prev);
+        var removedItem = clonePrev.filter(function (d) {
+          return d.key !== key;
+        });
+        console.log("Remove data: ", removedItem);
+        var result = removedItem.map(function (r, index) {
+          return {
+            name: name + "." + index,
+            key: r.key
+          };
+        });
+        handleCacheListField(prev, result);
+        return result;
+      }
+      if (!lodash.isNil(index)) {
+        if (index > prev.length - 1 || index < 0) return prev;
+        var _clonePrev = [].concat(prev);
+        _clonePrev.splice(index, 1);
+        var _result2 = _clonePrev.map(function (r, index) {
+          return {
+            name: name + "." + index,
+            key: r.key
+          };
+        });
+        handleCacheListField(prev, _result2);
+        return _result2;
+      }
+      return prev;
+    });
+  };
+  var move = function move(_ref3) {
+    var from = _ref3.from,
+      fromKey = _ref3.fromKey,
+      to = _ref3.to;
+    setListFields(function (prev) {
+      console.log("move list item: ", {
+        from: from,
+        to: to
+      });
+      if (from >= listFields.length || from < 0 || to >= listFields.length || to < 0 || from === to) return prev;
+      console.log("Trigger move item: ");
+      if (!lodash.isNil(fromKey)) {
+        var findItemIndex = prev.findIndex(function (p) {
+          return p.key === fromKey;
+        });
+        if (findItemIndex < 0) return prev;
+        var moveItem = lodash.cloneDeep(listFields[findItemIndex]);
+        var result = prev.reduce(function (prev, cur, curIndex) {
+          if (findItemIndex === curIndex) return [].concat(prev);
+          if (to === curIndex) {
+            if (findItemIndex > to) return [].concat(prev, [moveItem, cur]);else return [].concat(prev, [cur, moveItem]);
+          } else {
+            return [].concat(prev, [cur]);
+          }
+        }, []).map(function (i, index) {
+          return {
+            key: i.key,
+            name: name + "." + index
+          };
+        });
+        handleCacheListField(prev, result);
+        return result;
+      } else if (!lodash.isNil(from)) {
+        console.log("Trigger from index: ");
+        var _moveItem = lodash.cloneDeep(listFields[from]);
+        var _result3 = prev.reduce(function (prev, cur, curIndex) {
+          if (from === curIndex) return [].concat(prev);
+          if (to === curIndex) {
+            if (from > to) return [].concat(prev, [_moveItem, cur]);else return [].concat(prev, [cur, _moveItem]);
+          } else {
+            return [].concat(prev, [cur]);
+          }
+        }, []).map(function (i, index) {
+          return {
+            key: i.key,
+            name: name + "." + index
+          };
+        });
+        console.log({
+          result: _result3
+        });
+        handleCacheListField(prev, _result3);
+        return _result3;
+      }
+      return prev;
+    });
+  };
+  react.useEffect(function () {
+    console.log("Trigger init", formState == null ? void 0 : formState.isInitied, internalInitValue);
+    if (formState != null && formState.isInitied) {
+      if (Array.isArray(listFormInitValues)) {
+        var result = listFormInitValues.map(function (_, i) {
+          var itemName = name + "." + i;
+          var key = uuid.v4();
+          return {
+            key: key,
+            name: itemName
+          };
+        });
+        console.log("Get local init values: ", listFormInitValues, result);
+        setListFields(result);
+        setCacheData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name, listFormInitValues);
+        return;
+      }
+      if (Array.isArray(internalInitValue)) {
+        var _result4 = internalInitValue.map(function (_, i) {
+          var itemName = name + "." + i;
+          var key = uuid.v4();
+          return {
+            key: key,
+            name: itemName
+          };
+        });
+
+        // console.log("Get form init values: ", internalInitValue, result);
+
+        setListFields(_result4);
+        setListFormInitValues(internalInitValue);
+        return;
+      }
+
+      // console.log({ initialValues });
+
+      // console.log("After init: ", { result: cloneDeep(result) });
+
+      if (Array.isArray(initialValues)) {
+        var _result5 = initialValues.map(function (_, i) {
+          var itemName = name + "." + i;
+          var key = uuid.v4();
+          return {
+            key: key,
+            name: itemName
+          };
+        });
+        if (initialValues) {
+          setCacheData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name, initialValues);
+        }
+        setListFields(_result5);
+        setListFormInitValues(initialValues);
+
+        // console.log("Get form init values: ", internalInitValue, result);
+
+        return;
+      }
+    }
+  }, [formState == null ? void 0 : formState.isInitied]);
+
+  // useEffect(() => {
+  //   console.log("Show form list init values: ", { internalInitValue });
+  // }, [internalInitValue]);
+
+  // useEffect(() => {
+  //   console.log("List fields update: ", listFields);
+  // }, [listFields]);
+
+  react.useEffect(function () {
+    // console.log({ listFields });
+    return function () {
+      // console.log("Cleanup listfield change");
+      clearCacheData();
+    };
+  }, [listFields]);
+  return {
+    listFields: listFields,
+    move: move,
+    add: add,
+    remove: remove
+  };
+}
+
+var _excluded$3 = ["listFields"];
+var FormList = function FormList(_ref) {
+  var name = _ref.name,
+    initialValues = _ref.initialValues,
+    form = _ref.form,
+    formName = _ref.formName,
+    children = _ref.children;
+  var _useTestRrenderListCo = useFormListControl({
+      name: name,
+      initialValues: initialValues,
+      form: form,
+      formName: formName
+    }),
+    listFields = _useTestRrenderListCo.listFields,
+    actions = _objectWithoutPropertiesLoose(_useTestRrenderListCo, _excluded$3);
+  return children(listFields, _extends({}, actions));
+};
+
+var _excluded$2 = ["onChange", "ref"];
+var Input = function Input(_ref) {
+  var _onChange = _ref.onChange,
+    ref = _ref.ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  return h("input", _extends({
+    ref: ref,
+    onChange: function onChange(e) {
+      _onChange && _onChange(e.target.value);
+    }
+  }, props));
+};
+
+var _excluded$1 = ["onChange", "isValidating"];
+var AntInput = function AntInput(_ref) {
+  var _onChange = _ref.onChange,
+    isValidating = _ref.isValidating,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  return h(antd.Input, _extends({}, props, {
+    onChange: function onChange(e) {
+      _onChange && _onChange(e.target.value);
+    },
+    disabled: isValidating
+  }));
+};
+
+var _excluded = ["children", "errors"];
+var InputWrapper = function InputWrapper(_ref) {
+  var children = _ref.children,
+    _ref$errors = _ref.errors,
+    errors = _ref$errors === void 0 ? [] : _ref$errors,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return h("div", null, react.cloneElement(children, props), (props.isDirty || props.formState === "submitted") && (errors == null ? void 0 : errors.map(function (r) {
+    return h("div", {
+      key: props.name + "-" + props.formItemId + "-" + r.ruleName
+    }, r == null ? void 0 : r.message);
+  })));
+};
+
+exports.AntInput = AntInput;
+exports.FormItem = FormItem;
+exports.FormList = FormList;
+exports.Input = Input;
+exports.InputWrapper = InputWrapper;
+exports["default"] = Form;
+exports.useForm = useForm;
+exports.useFormItemControl = useFormItemControl;
+exports.useFormListControl = useFormListControl;
+exports.useFormStateWatch = useFormStateWatch;
+exports.useSubmitDataWatch = useSubmitDataWatch;
+exports.useWatch = useWatch;
+//# sourceMappingURL=index.cjs.map