react-form-manage 1.0.8-beta.7 → 1.0.8

package/dist/hooks/useFormListControl.js

@@ -3,18 +3,22 @@ import { useEffect, useState } from "react";
 import { v4 } from "uuid";
 import { useShallow } from "zustand/react/shallow";
 import { useFormContext } from "../providers/Form";
-import { useFormCleanUp, useFormStore } from "../stores/formStore";
+import { useFormStore } from "../stores/formStore";
 function useFormListControl({ name, form, initialValues, formName }) {
+  const [formItemId] = useState(v4());
   const contextForm = useFormContext();
   const getFormValues = useFormStore((state) => state.getFormValues);
   const [listFormInitValues, setListFormInitValues] = useState(void 0);
-  const { clearCacheData, setCacheData } = useFormStore(useShallow((state) => ({
+  const { clearCacheData, setCacheData, setListener, getListener, clearArrItems } = useFormStore(useShallow((state) => ({
+    // Cache
     cacheData: state.cacheData,
     clearCacheData: state.clearCacheData,
-    setCacheData: state.setCacheData
-  })));
-  const { setCleanUpStack } = useFormCleanUp(useShallow((state) => ({
-    setCleanUpStack: state.setCleanUpStack
+    setCacheData: state.setCacheData,
+    // Listener
+    setListener: state.setListener,
+    getListener: state.getListener,
+    // Clear Arr Items
+    clearArrItems: state.clearArrItems
   })));
   const { initValue: internalInitValue, formState } = useFormStore(useShallow((state) => {
     return {
@@ -37,29 +41,33 @@ function useFormListControl({ name, form, initialValues, formName }) {
         value: d
       };
     }).filter(Boolean);
-    const mapCurWithKey = cur.map((c) => mapPrevWithKey.find((m) => m.key === c.key) || c);
+    const mapCurWithKey = cur.map((c) => {
+      const find = mapPrevWithKey.find((m) => m.key === c.key);
+      if (find) {
+        return {
+          key: find.key,
+          value: isNil(c.value) ? find.value : c.value
+        };
+      }
+      return c;
+    });
     const getNewValueCache = mapCurWithKey.filter(Boolean).map((c) => c.value);
     const startRemoveIndex = formDataBeforeChange.length - getNewValueCache.length;
     if (startRemoveIndex > 0) {
-      Array.from(Array(startRemoveIndex)).map((_, index) => {
-        return getNewValueCache.length + index;
-      }).forEach((index) => {
-        setCleanUpStack({
+      const clearItems = Array.from(Array(startRemoveIndex)).map((_, index) => {
+        const clearIndex = getNewValueCache.length + index;
+        return {
           formName: formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName),
-          name: `${name}.${index}`,
-          type: "array"
-        });
+          name: `${name}.${clearIndex}`
+        };
       });
+      clearArrItems(clearItems);
     }
     setCacheData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name, getNewValueCache);
   };
   const add = (index) => {
     setListFields((prev) => {
-      if (index > prev.length)
-        return prev;
-      if (index < 0)
-        return prev;
-      if (index === prev.length) {
+      if (isNil(index) || index === prev.length) {
         const newName = `${name}.${prev.length}`;
         const newKey = v4();
         const result2 = [
@@ -71,6 +79,10 @@ function useFormListControl({ name, form, initialValues, formName }) {
         ];
         return result2;
       }
+      if (index > prev.length)
+        return prev;
+      if (index < 0)
+        return prev;
       const clonePrev = [...prev];
       const result = clonePrev.reduce((prev2, cur, curIndex) => {
         const newKey = v4();
@@ -180,6 +192,12 @@ function useFormListControl({ name, form, initialValues, formName }) {
         });
         setListFields(result);
         setCacheData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name, listFormInitValues);
+        if (getListener(formItemId)) {
+          setListener({
+            formItemId,
+            isInitied: true
+          });
+        }
         return;
       }
       if (Array.isArray(internalInitValue)) {
@@ -193,6 +211,12 @@ function useFormListControl({ name, form, initialValues, formName }) {
         });
         setListFields(result);
         setListFormInitValues(internalInitValue);
+        if (getListener(formItemId)) {
+          setListener({
+            formItemId,
+            isInitied: true
+          });
+        }
         return;
       }
       if (Array.isArray(initialValues)) {
@@ -209,6 +233,12 @@ function useFormListControl({ name, form, initialValues, formName }) {
         }
         setListFields(result);
         setListFormInitValues(initialValues);
+        if (getListener(formItemId)) {
+          setListener({
+            formItemId,
+            isInitied: true
+          });
+        }
         return;
       }
     }
@@ -218,6 +248,42 @@ function useFormListControl({ name, form, initialValues, formName }) {
       clearCacheData();
     };
   }, [listFields]);
+  useEffect(() => {
+    if (!getListener(formItemId)) {
+      setListener({
+        formName: formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName),
+        name: name || "",
+        formItemId,
+        type: "array",
+        onArrayChange: (newArr) => {
+          setListFields((prev) => {
+            const result = newArr.map((_, i) => {
+              const itemName = `${name}.${i}`;
+              const existingItem = prev[i];
+              return {
+                key: existingItem ? existingItem.key : v4(),
+                name: itemName
+              };
+            });
+            handleCacheListField(prev, result.map((r, i) => {
+              return { ...r, value: newArr[i] };
+            }));
+            return result;
+          });
+        }
+      });
+    }
+    return () => {
+      if (getListener(formItemId)) {
+        setListener({
+          formName: formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName),
+          name: name || "",
+          formItemId,
+          onArrayChange: void 0
+        });
+      }
+    };
+  }, []);
   return { listFields, move, add, remove };
 }
 export {

package/dist/index.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./index";

package/dist/index.d.ts

@@ -1,10 +1,11 @@
-import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps, type ValidationRule, type FormFieldError, type SubmitState, type UseFormItemStateWatchReturn } from "./providers/Form";
 import { SUBMIT_STATE } from "./constants/form";
+import Form, { useForm, useFormStateWatch, useSubmitDataWatch, useWatch, type FormFieldError, type FormProps, type SubmitState, type UseFormItemStateWatchReturn, type ValidationRule } from "./providers/Form";
 import FormItem, { type FormItemProps } from "./components/Form/FormItem";
 import FormList, { type FormListProps } from "./components/Form/FormList";
-import Input from "./components/Input";
 import InputWrapper, { type InputWrapperProps } from "./components/Form/InputWrapper";
+import Input from "./components/Input";
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
-export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps, type FormItemProps, type FormListProps, type InputWrapperProps, type ValidationRule, type FormFieldError, type SubmitState, type UseFormItemStateWatchReturn, SUBMIT_STATE, };
+import { useFormStore, type CleanUpItem, type FormInstance, type ListenerItem } from "./stores/formStore";
+export { Form, FormItem, FormList, Input, InputWrapper, SUBMIT_STATE, useForm, useFormItemControl, useFormListControl, useFormStateWatch, useFormStore, useSubmitDataWatch, useWatch, type CleanUpItem, type FormFieldError, type FormInstance, type FormItemProps, type FormListProps, type FormProps, type InputWrapperProps, type ListenerItem, type SubmitState, type UseFormItemStateWatchReturn, type ValidationRule, };
 export default Form;

package/dist/index.esm.d.ts

@@ -0,0 +1 @@
+export * from "./index";

package/dist/index.js

@@ -1,11 +1,12 @@
-import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch } from "./providers/Form";
 import { SUBMIT_STATE } from "./constants/form";
+import Form, { useForm, useFormStateWatch, useSubmitDataWatch, useWatch } from "./providers/Form";
 import FormItem from "./components/Form/FormItem";
 import FormList from "./components/Form/FormList";
-import Input from "./components/Input";
 import InputWrapper from "./components/Form/InputWrapper";
+import Input from "./components/Input";
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
+import { useFormStore } from "./stores/formStore";
 var stdin_default = Form;
 export {
   Form,
@@ -19,6 +20,7 @@ export {
   useFormItemControl,
   useFormListControl,
   useFormStateWatch,
+  useFormStore,
   useSubmitDataWatch,
   useWatch
 };

package/dist/providers/Form.d.ts

@@ -1,8 +1,14 @@
 import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
+import FormItem from "../components/Form/FormItem";
+import { OnChangeOptions } from "../hooks/useFormItemControl";
 import type { PublicFormInstance, UseFormItemStateWatchReturn } from "../types/public";
-export type { FormFieldError, SubmitState, UseFormItemStateWatchReturn, ValidationRule, } from "../types/public";
+export type { FormFieldError, SubmitState, UseFormItemStateWatchReturn, ValidationRule } from "../types/public";
 export declare const FormContext: import("react").Context<any>;
+export interface SetFieldValueOptions extends OnChangeOptions {
+    deepTrigger?: boolean;
+}
 export interface FormProps<T = any> extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
+    collectHiddenFields?: boolean;
     children: ReactNode;
     formName: string;
     initialValues?: T;
@@ -15,10 +21,12 @@ export interface FormProps<T = any> extends Omit<FormHTMLAttributes<HTMLFormElem
     }) => void | Promise<void>;
     FormElement?: ComponentType<any>;
 }
-declare function Form<T = any>({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, ...props }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Form<T = any>({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, collectHiddenFields: formCollectHiddenFields, ...props }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Form {
     var useForm: typeof import("./Form").useForm;
+    var Item: typeof FormItem;
     var useWatch: typeof import("./Form").useWatch;
+    var useWatchNormalized: typeof import("./Form").useWatchNormalized;
     var useSubmitDataWatch: typeof import("./Form").useSubmitDataWatch;
     var useFormStateWatch: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => any;
     var useFormItemStateWatch: <T = any>(nameOrFormItemId: string, formNameOrFormInstance?: string | PublicFormInstance<T>) => UseFormItemStateWatchReturn;
@@ -27,6 +35,11 @@ export default Form;
 export declare function useFormContext(): any;
 export declare function useForm<T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>): PublicFormInstance<T>[];
 export declare function useWatch<T = any>(name: keyof T & string, formNameOrFormInstance?: string | PublicFormInstance<T>): T[keyof T] | undefined;
+export declare function useWatchNormalized<T, TFn extends (v: any) => any>({ name, normalizeFn, formNameOrFormInstance, }: {
+    name: keyof T & string;
+    normalizeFn: TFn;
+    formNameOrFormInstance?: string | PublicFormInstance<T>;
+}): ReturnType<TFn>;
 export declare function useSubmitDataWatch<T = any>({ formNameOrFormInstance, triggerWhenChange, mapFn, }: {
     formNameOrFormInstance?: string | PublicFormInstance<T>;
     triggerWhenChange?: boolean;

package/dist/providers/Form.js

@@ -1,40 +1,50 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneDeep, get, isEqual, last, set, uniq } from "lodash";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneDeep, filter, get, isArray, isEqual, isNil, isPlainObject, last, set, uniqBy } from "lodash";
 import { useTask } from "minh-custom-hooks-release";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow";
-import FormCleanUp from "../components/Form/FormCleanUp";
+import FormItem from "../components/Form/FormItem";
 import { SUBMIT_STATE } from "../constants/form";
-import { useFormListeners, useFormStore } from "../stores/formStore";
-import { getAllNoneObjStringPath } from "../utils/obj.util";
+import { useFormStore } from "../stores/formStore";
+import { getAllNoneObjStringPath, getAllPathsIncludingContainers, getAllPathsStopAtArray } from "../utils/obj.util";
 const FormContext = createContext(null);
-function Form({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, ...props }) {
-  const { appInitValue, getFormItemValue, setInitData, setData, getFormValues, setFormState, setFormInstance, revokeFormInstance, setSubmitHistory, clearFormValues, clearFormInitialValues, clearFormState } = useFormStore(useShallow((state) => {
-    var _a;
-    return {
-      appInitValue: state.initialValues,
-      setInitData: state.setInitData,
-      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: (_a = state.formStates) == null ? void 0 : _a[formName]
-    };
-  }));
-  const { getListeners } = useFormListeners(useShallow((state) => {
+function Form({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, collectHiddenFields: formCollectHiddenFields = true, ...props }) {
+  const {
+    // appInitValue,
+    getFormItemValue,
+    setInitData,
+    setData,
+    getFormValues,
+    setFormState,
+    setFormInstance,
+    revokeFormInstance,
+    setSubmitHistory,
+    clearFormValues,
+    clearFormInitialValues,
+    clearFormState
+  } = useFormStore(useShallow((state) => ({
+    // appInitValue: state.initialValues,
+    setInitData: state.setInitData,
+    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?.[formName],
+  })));
+  const { getListeners } = useFormStore(useShallow((state) => {
     return {
       getListeners: state.getListeners
     };
   }));
-  const setFieldValue = (name, value, options) => {
+  const handlePrimitiveValue = (name, value, options) => {
     const listener = getListeners().find((l) => l.name === name && l.formName === formName);
     if (listener) {
       listener.onChange(value, options);
@@ -42,20 +52,170 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
       setData(formName, name, value);
     }
   };
+  const handleArrayListener = (name, value, options, coreRecursive) => {
+    const listener = getListeners().find((l) => l.name === name && l.formName === formName);
+    if (!listener)
+      return;
+    const currentValue = getFormItemValue(formName, name);
+    if (!isEqual(currentValue, value)) {
+      listener.onArrayChange(value, options);
+      value.forEach((item, index) => {
+        const itemName = `${name}.${index}`;
+        const itemListener = getListeners().find((l) => l.name === itemName && l.formName === formName);
+        if (itemListener) {
+          itemListener.onChange(item, options);
+        }
+        const nestedPaths = getAllPathsIncludingContainers(item);
+        nestedPaths.forEach((p) => {
+          if (coreRecursive) {
+            coreRecursive(`${itemName}.${p}`, get(item, p), options);
+          }
+        });
+      });
+      if (isArray(currentValue) && currentValue.length > value.length) {
+        for (let index = value.length; index < currentValue.length; index++) {
+          const itemName = `${name}.${index}`;
+          if (coreRecursive) {
+            coreRecursive(itemName, void 0, options);
+          }
+        }
+      }
+    }
+  };
+  const handlePlainObject = (name, value, options, coreRecursive) => {
+    const listener = getListeners().find((l) => l.name === name && l.formName === formName);
+    if (listener && listener.type !== "array") {
+      listener.onChange(value, options);
+    }
+    const allPaths = getAllPathsIncludingContainers(value);
+    allPaths.forEach((p) => {
+      if (coreRecursive) {
+        const fullPath = `${name}.${p}`;
+        coreRecursive(fullPath, get(value, p), options);
+      }
+    });
+    const previousValue = getFieldValue(name);
+    if (isPlainObject(previousValue)) {
+      const previousKeys = Object.keys(previousValue);
+      const newKeys = Object.keys(value);
+      const removedKeys = previousKeys.filter((k) => !newKeys.includes(k));
+      removedKeys.forEach((key) => {
+        if (coreRecursive) {
+          coreRecursive(`${name}.${key}`, void 0, options);
+        }
+      });
+    }
+  };
+  const handleNonListenerArray = (name, value, options, coreRecursive) => {
+    const previousValues = getFieldValue(name);
+    if (isArray(previousValues)) {
+      if (previousValues.length !== value.length || !isEqual(previousValues, value)) {
+        setData(formName, name, value);
+      }
+      value.forEach((item, index) => {
+        if (!isEqual(previousValues[index], item)) {
+          const itemName = `${name}.${index}`;
+          const itemListener = getListeners().find((l) => l.name === itemName && l.formName === formName);
+          if (itemListener) {
+            itemListener.onChange(item, options);
+          }
+          const nestedPaths = getAllPathsIncludingContainers(item);
+          nestedPaths.forEach((p) => {
+            if (coreRecursive) {
+              coreRecursive(`${itemName}.${p}`, get(item, p), options);
+            }
+          });
+        }
+      });
+      if (previousValues.length > value.length) {
+        for (let index = value.length; index < previousValues.length; index++) {
+          const itemName = `${name}.${index}`;
+          const removedItem = previousValues[index];
+          const nestedPaths = getAllPathsIncludingContainers(removedItem);
+          nestedPaths.forEach((p) => {
+            if (coreRecursive) {
+              coreRecursive(`${itemName}.${p}`, void 0, options);
+            }
+          });
+          if (coreRecursive) {
+            coreRecursive(itemName, void 0, options);
+          }
+        }
+      }
+    }
+  };
+  const deepTriggerSetCore = (name, value, options) => {
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null || value === void 0) {
+      handlePrimitiveValue(name, value, options);
+      return;
+    }
+    if (isPlainObject(value)) {
+      const listener = getListeners().find((l) => l.name === name && l.formName === formName);
+      handlePlainObject(name, value, options, deepTriggerSetCore);
+      return;
+    }
+    if (Array.isArray(value)) {
+      const listener = getListeners().find((l) => l.name === name && l.formName === formName);
+      if (listener && listener.type === "array") {
+        handleArrayListener(name, value, options, deepTriggerSetCore);
+      } else if (!listener) {
+        handleNonListenerArray(name, value, options, deepTriggerSetCore);
+      } else {
+        handlePlainObject(name, value, options, deepTriggerSetCore);
+      }
+      return;
+    }
+    handlePrimitiveValue(name, value, options);
+  };
+  const handleDeepTriggerSet = (name, value, options) => {
+    deepTriggerSetCore(name, value, options);
+  };
+  const setFieldValue = (name, value, options) => {
+    if (options == null ? void 0 : options.deepTrigger) {
+      handleDeepTriggerSet(name, value, options);
+      return;
+    }
+    const listener = getListeners().find((l) => l.name === name && l.formName === formName);
+    if (listener) {
+      if (listener.type === "array") {
+        if (!isEqual(getFormItemValue(formName, name), value)) {
+          listener.onArrayChange(value, options);
+          const allStringPath = getAllNoneObjStringPath(value);
+          allStringPath.forEach((p) => {
+            const findListener = getListeners().find((l) => l.name === `${name}.${p}` && l.formName === formName);
+            if (findListener) {
+              findListener.onChange(get(value, p), options);
+            } else {
+              setData(formName, `${name}.${p}`, get(value, p));
+            }
+          });
+        }
+      } else {
+        listener.onChange(value, options);
+      }
+    } else {
+      setData(formName, name, value);
+    }
+  };
   const setFieldValues = (values, options = { notTriggerDirty: false }) => {
-    const allStringPath = getAllNoneObjStringPath(values);
-    allStringPath.forEach((p) => {
-      const listener = getListeners().find((l) => l.name === p && l.formName === formName);
+    const allPaths = getAllPathsStopAtArray(values);
+    allPaths.forEach((path) => {
+      const pathValue = get(values, path);
+      if (Array.isArray(pathValue)) {
+        handleDeepTriggerSet(path, pathValue, options);
+        return;
+      }
+      const listener = getListeners().find((l) => l.name === path && l.formName === formName);
       if (listener) {
-        listener.onChange(get(values, listener.name), options);
+        listener.onChange(pathValue, options);
       } else {
-        setData(formName, p, get(values, p));
+        setData(formName, path, pathValue);
       }
     });
   };
-  const getFieldValue = (name) => {
+  function getFieldValue(name) {
     return getFormItemValue(formName, name);
-  };
+  }
   const getFieldValues = (names = []) => {
     return names.map((name) => ({
       name,
@@ -96,7 +256,17 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
         const formValues = getFormValues(formName);
         const resultValues = cloneDeep(formValues);
         const cleanValues = {};
-        uniq(listeners, (l) => l.name).forEach((l) => {
+        uniqBy(filter(listeners, (l) => {
+          if (!l.hidden)
+            return true;
+          if (isNil(props2 == null ? void 0 : props2.collectHiddenFields)) {
+            if (isNil(l.collectOnHidden)) {
+              return formCollectHiddenFields;
+            }
+            return Boolean(l.collectOnHidden);
+          }
+          return props2.collectHiddenFields;
+        }), (l) => l.name).forEach((l) => {
           set(cleanValues, l.name, get(resultValues, l.name));
         });
         const handleIsolateCase = async () => {
@@ -235,9 +405,9 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
       clearFormState(formName);
     };
   }, []);
-  return _jsxs(FormContext.Provider, { value: {
+  return _jsx(FormContext.Provider, { value: {
     formName
-  }, children: [FormElement ? _jsx(FormElement, { onSubmit: (e) => {
+  }, children: FormElement ? _jsx(FormElement, { onSubmit: (e) => {
     e.preventDefault();
     e.stopPropagation();
     runSubmit(void 0);
@@ -245,7 +415,7 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
     e.preventDefault();
     e.stopPropagation();
     runSubmit(void 0);
-  }, ...props, children }), _jsx(FormCleanUp, {})] });
+  }, ...props, children }) });
 }
 function useFormContext() {
   const c = useContext(FormContext);
@@ -254,7 +424,8 @@ function useFormContext() {
   return c;
 }
 function useForm(formNameOrFormInstance) {
-  const targetFormName = typeof formNameOrFormInstance === "object" && formNameOrFormInstance !== null ? formNameOrFormInstance.formName : formNameOrFormInstance;
+  const formContext = useContext(FormContext);
+  const targetFormName = isNil(formNameOrFormInstance) ? formContext == null ? void 0 : formContext.formName : typeof formNameOrFormInstance === "object" && formNameOrFormInstance !== null ? formNameOrFormInstance.formName : formNameOrFormInstance;
   const formInstance = useFormStore((state) => {
     return state.formInstances.find((i) => i.formName === targetFormName);
   });
@@ -268,6 +439,17 @@ function useWatch(name, formNameOrFormInstance) {
   });
   return value;
 }
+function useWatchNormalized({ name, normalizeFn, formNameOrFormInstance }) {
+  const [formInstance] = useForm(formNameOrFormInstance);
+  const rawValue = useFormStore((state) => {
+    var _a;
+    return state.getFormItemValue((_a = formInstance == null ? void 0 : formInstance.formName) != null ? _a : formNameOrFormInstance, name);
+  });
+  const normalizedValue = useMemo(() => {
+    return normalizeFn(rawValue);
+  }, [rawValue, normalizeFn]);
+  return normalizedValue;
+}
 function useSubmitDataWatch({ formNameOrFormInstance, triggerWhenChange = false, mapFn }) {
   const [formInstance] = useForm(formNameOrFormInstance);
   const value = useFormStore((state) => {
@@ -301,7 +483,9 @@ const useFormItemStateWatch = (nameOrFormItemId, formNameOrFormInstance) => {
   };
 };
 Form.useForm = useForm;
+Form.Item = FormItem;
 Form.useWatch = useWatch;
+Form.useWatchNormalized = useWatchNormalized;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;
 Form.useFormItemStateWatch = useFormItemStateWatch;
@@ -313,5 +497,6 @@ export {
   useFormItemStateWatch,
   useFormStateWatch,
   useSubmitDataWatch,
-  useWatch
+  useWatch,
+  useWatchNormalized
 };

package/dist/stores/formStore.d.ts

@@ -1,7 +1,21 @@
-export interface FormInstance {
+type ListenerFormItemType = "normal" | "array";
+export interface SubmitProps<T = any> {
+    externalFinishCallback?: (values: T, allValues?: any) => void | Promise<void>;
+    externalRejectCallback?: (errorFields: any[]) => void | Promise<void>;
+    externalFinallyCallback?: (result: {
+        errorsField: any[];
+        values: T;
+        withUnRegisteredValues: any;
+    }) => void | Promise<void>;
+    callBothFinish?: boolean;
+    callBothReject?: boolean;
+    callBothFinally?: boolean;
+    collectHiddenFields?: boolean;
+}
+export interface FormInstance<T = any> {
     formName: string;
     resetFields: (values?: any) => void;
-    submit: (values?: any) => void;
+    submit: (props?: SubmitProps<T>) => void;
     submitAsync: (values?: any) => Promise<any>;
     setFieldValue: (name: string, value: any, options?: any) => void;
     setFieldValues: (values: Record<string, any>, options?: any) => void;
@@ -13,6 +27,30 @@ export interface FormInstance {
     getFieldErrors: () => Record<string, any>;
     setFieldFocus: (name: string) => void;
 }
+export interface ListenerItem {
+    name?: string;
+    formName?: string;
+    isTouched?: boolean;
+    isDirty?: boolean;
+    formItemId?: string;
+    internalErrors?: any;
+    onArrayChange?: any;
+    onChange?: any;
+    onReset?: any;
+    onFocus?: any;
+    emitFocus?: any;
+    isInitied?: boolean;
+    type?: ListenerFormItemType;
+    hidden?: boolean;
+    collectOnHidden?: boolean;
+}
+export interface CleanUpItem {
+    name?: string;
+    type?: string;
+    key: string;
+    itemKey?: string;
+    formName?: string;
+}
 interface FormStoreState {
     forms: Record<string, any>;
     initialValues: Record<string, any>;
@@ -20,9 +58,11 @@ interface FormStoreState {
     cacheData: Record<string, any>;
     formInstances: FormInstance[];
     submitHistory: Record<string, any[]>;
+    listeners: ListenerItem[];
+    cleanUpStack: CleanUpItem[];
     [key: string]: any;
 }
 export declare const useFormStore: import("zustand").UseBoundStore<import("zustand").StoreApi<FormStoreState>>;
-export declare const useFormListeners: import("zustand").UseBoundStore<import("zustand").StoreApi<any>>;
-export declare const useFormCleanUp: import("zustand").UseBoundStore<import("zustand").StoreApi<any>>;
+export declare const useFormListeners: import("zustand").UseBoundStore<import("zustand").StoreApi<FormStoreState>>;
+export declare const useFormCleanUp: import("zustand").UseBoundStore<import("zustand").StoreApi<FormStoreState>>;
 export {};