react-form-manage 1.0.8-beta.10 → 1.0.8-beta.12

package/CHANGELOG.md

@@ -15,6 +15,11 @@ Docs: Update usage notes for `FormItem` control-on-init flag and `hidden` prop.
 
 - Add isTouched field to FormItem for tracking user interaction state
 
+## [1.0.8-beta.10] - 2026-01-27
+- `useForm()` giờ có thể trả về form instance từ provider lân cận nếu không truyền `formName` (không còn bắt buộc truyền tên form khi đã wrap trong `Form`).
+- `FormList.add` khi không truyền `index` sẽ mặc định append vào cuối danh sách.
+- Docs: cập nhật hướng dẫn cho `useForm` và `FormList.add`.
+
 ## [1.0.8-beta.1] - 2026-01-22
 
 - Fix UseFormItemControlReturn errors type to properly export FormFieldError[]

package/README.md

@@ -2,8 +2,6 @@
 
 Thư viện form nhẹ dành cho React — hỗ trợ form, field, list (array fields), và cơ chế listener để giảm re-render.
 
-Phiên bản này xuất phát từ mã nguồn JS. Typings (.d.ts) được cung cấp trong `src/types/components.d.ts`.
-
 ---
 
 ## Cài đặt
@@ -80,6 +78,8 @@ export default Example;
 
 Bạn có thể lấy instance form để gọi phương thức chương trình như `submit`, `resetFields`, `setFieldValue`…
 
+`useForm` ưu tiên lấy instance từ provider gần nhất nếu không truyền `formName`, giúp bạn không cần truyền tên form khi đã bọc trong `Form`.
+
 Ví dụ sử dụng hook attached trên `Form`:
 
 ```jsx
@@ -87,7 +87,7 @@ import React from "react";
 import Form from "react-form-manage";
 
 function CtrlExample() {
-  const [form] = Form.useForm("myForm"); // hoặc useForm('myForm')
+  const [form] = Form.useForm(); // hoặc Form.useForm('myForm') khi muốn chỉ định form khác
 
   return (
     <div>
@@ -156,6 +156,9 @@ Custom validator (async):
 
 `FormList` là render-prop component cung cấp `listFields` và các action `add`, `remove`, `move`.
 
+Ghi chú:
+- `add()` nếu không truyền `index` sẽ tự động append phần tử mới vào cuối danh sách.
+
 Ví dụ:
 
 ```jsx
@@ -192,7 +195,7 @@ Lưu ý: `FormList` quản lý các `key` nội bộ và push các mục cần c
 
 ## Hooks (tóm tắt)
 
-- `useForm(formNameOrFormInstance)` — trả về form instance đã đăng ký.
+- `useForm(formNameOrFormInstance?)` — nếu không truyền thì lấy instance từ `Form` provider gần nhất; nếu truyền `formName` thì chọn form tương ứng.
 - `useWatch(name, formNameOrFormInstance)` — subscribe giá trị field.
 - `useSubmitDataWatch` — watch dữ liệu submit cuối cùng.
 - `useFormStateWatch` — watch state của form (isInitied, submitState…).

package/dist/components/Form/FormCleanUp.js

@@ -1,13 +1,13 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useShallow } from "zustand/react/shallow";
-import { useFormCleanUp, useFormListeners, useFormStore } from "../../stores/formStore";
+import { useFormStore } from "../../stores/formStore";
 const FormCleanUp = () => {
-  const { cleanUpStack, clearCleanUpStack } = useFormCleanUp(useShallow((state) => ({
+  const { cleanUpStack, clearCleanUpStack } = useFormStore(useShallow((state) => ({
     cleanUpStack: state.cleanUpStack,
     clearCleanUpStack: state.clearCleanUpStack
   })));
-  const { revokeListener } = useFormListeners(useShallow((state) => ({
+  const { revokeListener } = useFormStore(useShallow((state) => ({
     revokeListener: state.revokeListener
   })));
   const { clearObjKeyItem, clearArrItem } = useFormStore(useShallow((state) => {

package/dist/components/Form/FormList.d.ts

@@ -20,5 +20,5 @@ export interface FormListProps<T = any> {
         }) => void;
     }) => React.ReactNode;
 }
-declare const FormList: <T = any>({ name, initialValues, form, formName, children }: FormListProps<T>) => import("react").ReactNode;
+declare const FormList: <T = any>({ name, initialValues, form, formName, children, }: FormListProps<T>) => import("react").ReactNode;
 export default FormList;

package/dist/components/Form/FormList.js

@@ -1,6 +1,6 @@
-import useTestRrenderListControl from "../../hooks/useFormListControl";
+import useFormListControl from "../../hooks/useFormListControl";
 const FormList = ({ name, initialValues, form, formName, children }) => {
-  const { listFields, ...actions } = useTestRrenderListControl({
+  const { listFields, ...actions } = useFormListControl({
     name,
     initialValues,
     form,

package/dist/hooks/useFormItemControl.js

@@ -4,7 +4,7 @@ import { useEffect, useMemo } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { IS_ALPHABET_STRING_AND_NUMBER_REGEX, IS_EMAIL_REGEX, IS_NAME_REGEX, IS_NO_SPACE_ALPHABET_STRING_AND_NUMBER_REGEX, IS_NO_SPACE_ALPHABET_STRING_REGEX, IS_NOSPACE_STRING_AND_NUMBER_REGEX, IS_PASSWORD_REGEX, IS_POSITIVE_INTEGER_STRING_NUMBER_REGEX, IS_POSITIVE_STRING_NUMBER_REGEX, IS_STRING_AND_NUMBER_REGEX, IS_STRING_NUMBER_REGEX, IS_USERNAME_REGEX, IS_VIETNAMESE_PHONE_NUMBER_REGEX } from "../constants/validation";
 import { useFormContext } from "../providers/Form";
-import { useFormCleanUp, useFormListeners, useFormStore } from "../stores/formStore";
+import { useFormStore } from "../stores/formStore";
 const VALID_PREMITIVE_TYPE = ["string", "number", "undefined"];
 function useFormItemControl({ formName, form, name, initialValue, formItemId, rules, elementRef }) {
   const contextForm = useFormContext();
@@ -20,7 +20,7 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
       submitState: (_d = (_c = state2.formStates) == null ? void 0 : _c[formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)]) == null ? void 0 : _d.submitState
     };
   }));
-  const { setCleanUpStack } = useFormCleanUp(useShallow((state2) => ({
+  const { setCleanUpStack } = useFormStore(useShallow((state2) => ({
     setCleanUpStack: state2.setCleanUpStack
   })));
   const { initValue: internalInitValue, setInitData, getInitData } = useFormStore(useShallow((state2) => {
@@ -30,7 +30,7 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
       getInitData: state2.getInitData
     };
   }));
-  const { listener, setListener } = useFormListeners(useShallow((state2) => {
+  const { listener, setListener } = useFormStore(useShallow((state2) => {
     return {
       listener: state2.listeners.find((l) => l.formItemId === formItemId),
       setListener: state2.setListener

package/dist/hooks/useFormListControl.d.ts

@@ -16,7 +16,7 @@ interface UseFormListControlReturn {
         fromKey?: string;
         to: number;
     }) => void;
-    add: (index: number) => void;
+    add: (index?: number) => void;
     remove: (opts: {
         index?: number;
         key?: string;

package/dist/hooks/useFormListControl.js

@@ -3,7 +3,7 @@ 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 contextForm = useFormContext();
   const getFormValues = useFormStore((state) => state.getFormValues);
@@ -13,7 +13,7 @@ function useFormListControl({ name, form, initialValues, formName }) {
     clearCacheData: state.clearCacheData,
     setCacheData: state.setCacheData
   })));
-  const { setCleanUpStack } = useFormCleanUp(useShallow((state) => ({
+  const { setCleanUpStack } = useFormStore(useShallow((state) => ({
     setCleanUpStack: state.setCleanUpStack
   })));
   const { initValue: internalInitValue, formState } = useFormStore(useShallow((state) => {
@@ -55,11 +55,7 @@ function useFormListControl({ name, form, initialValues, formName }) {
   };
   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 +67,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();

package/dist/index.d.ts

@@ -6,5 +6,6 @@ import Input from "./components/Input";
 import InputWrapper, { type InputWrapperProps } from "./components/Form/InputWrapper";
 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 FormInstance, type ListenerItem, type CleanUpItem } from "./stores/formStore";
+export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, useFormStore, type FormProps, type FormItemProps, type FormListProps, type InputWrapperProps, type ValidationRule, type FormFieldError, type SubmitState, type UseFormItemStateWatchReturn, type FormInstance, type ListenerItem, type CleanUpItem, SUBMIT_STATE, };
 export default Form;

package/dist/index.js

@@ -6,6 +6,7 @@ import Input from "./components/Input";
 import InputWrapper from "./components/Form/InputWrapper";
 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

@@ -22,6 +22,9 @@ declare namespace Form {
     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;
+    var useWatchFormListeners: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => {
+        listeners: import("../stores/formStore").ListenerItem[];
+    };
 }
 export default Form;
 export declare function useFormContext(): any;
@@ -34,3 +37,6 @@ export declare function useSubmitDataWatch<T = any>({ formNameOrFormInstance, tr
 }): T | undefined;
 export declare const useFormStateWatch: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => any;
 export declare const useFormItemStateWatch: <T = any>(nameOrFormItemId: string, formNameOrFormInstance?: string | PublicFormInstance<T>) => UseFormItemStateWatchReturn;
+export declare const useWatchFormListeners: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => {
+    listeners: import("../stores/formStore").ListenerItem[];
+};

package/dist/providers/Form.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneDeep, get, isEqual, last, set, uniq } from "lodash";
+import { cloneDeep, get, isEqual, isNil, last, set, uniqBy } from "lodash";
 import { useTask } from "minh-custom-hooks-release";
 import { createContext, useContext, useEffect, useState } from "react";
 import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow";
 import FormCleanUp from "../components/Form/FormCleanUp";
 import { SUBMIT_STATE } from "../constants/form";
-import { useFormListeners, useFormStore } from "../stores/formStore";
+import { useFormStore } from "../stores/formStore";
 import { getAllNoneObjStringPath } from "../utils/obj.util";
 const FormContext = createContext(null);
 function Form({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, ...props }) {
@@ -39,7 +39,7 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
     // Test, nhớ xóa sau khi xong
     // formStates: state.formStates?.[formName],
   })));
-  const { getListeners } = useFormListeners(useShallow((state) => {
+  const { getListeners } = useFormStore(useShallow((state) => {
     return {
       getListeners: state.getListeners
     };
@@ -106,7 +106,7 @@ 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(listeners, (l) => l.name).forEach((l) => {
           set(cleanValues, l.name, get(resultValues, l.name));
         });
         const handleIsolateCase = async () => {
@@ -264,9 +264,10 @@ 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);
+    return Object.values(state.formInstances).find((i) => i.formName === targetFormName);
   });
   return [formInstance];
 }
@@ -310,11 +311,22 @@ const useFormItemStateWatch = (nameOrFormItemId, formNameOrFormInstance) => {
     errors: (listener == null ? void 0 : listener.internalErrors) || []
   };
 };
+const useWatchFormListeners = (formNameOrFormInstance) => {
+  const [formInstance] = useForm(formNameOrFormInstance);
+  const listeners = useFormStore(useShallow((state) => {
+    const allListeners = state.listeners;
+    return {
+      listeners: allListeners.filter((l) => !isNil(formNameOrFormInstance) ? true : l.formName === (formInstance == null ? void 0 : formInstance.formName))
+    };
+  }));
+  return listeners;
+};
 Form.useForm = useForm;
 Form.useWatch = useWatch;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;
 Form.useFormItemStateWatch = useFormItemStateWatch;
+Form.useWatchFormListeners = useWatchFormListeners;
 export {
   FormContext,
   Form as default,
@@ -323,5 +335,6 @@ export {
   useFormItemStateWatch,
   useFormStateWatch,
   useSubmitDataWatch,
-  useWatch
+  useWatch,
+  useWatchFormListeners
 };

package/dist/stores/formStore.d.ts

@@ -13,16 +13,38 @@ 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;
+    onChange?: any;
+    onReset?: any;
+    onFocus?: any;
+    emitFocus?: any;
+    isInitied?: boolean;
+}
+export interface CleanUpItem {
+    name?: string;
+    type?: string;
+    key: string;
+    itemKey?: string;
+    formName?: string;
+}
 interface FormStoreState {
     forms: Record<string, any>;
     initialValues: Record<string, any>;
     formStates: Record<string, any>;
     cacheData: Record<string, any>;
-    formInstances: FormInstance[];
+    formInstances: Record<string, 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 {};

package/dist/stores/formStore.js

@@ -3,12 +3,12 @@ import { cloneDeep, get, isNil, isNumber, last, set, unset } from "lodash";
 import { v4 } from "uuid";
 import { create } from "zustand";
 import { getAllNoneObjStringPath } from "../utils/obj.util";
-const useFormStore = create((storeSet, storeGet) => ({
+const createFormStoreSlice = (storeSet, storeGet, api) => ({
   forms: {},
   initialValues: {},
   formStates: {},
   cacheData: {},
-  formInstances: [],
+  formInstances: {},
   submitHistory: {},
   setData(formName, name, value) {
     return storeSet(produce((state) => {
@@ -191,8 +191,8 @@ const useFormStore = create((storeSet, storeGet) => ({
       }
     }));
   }
-}));
-const useFormListeners = create((storeSet, storeGet) => ({
+});
+const createListenersSlice = (storeSet, storeGet, api) => ({
   listeners: [],
   getListener(formItemId) {
     return storeGet().listeners.find((l) => l.formItemId === formItemId);
@@ -261,8 +261,8 @@ const useFormListeners = create((storeSet, storeGet) => ({
       }
     }));
   }
-}));
-const useFormCleanUp = create((storeSet) => ({
+});
+const createCleanUpSlice = (storeSet, storeGet, api) => ({
   cleanUpStack: [],
   setCleanUpStack({ name, type, itemKey, formName }) {
     return storeSet(produce((state) => {
@@ -276,7 +276,14 @@ const useFormCleanUp = create((storeSet) => ({
       state.cleanUpStack = [];
     }));
   }
+});
+const useFormStore = create((...a) => ({
+  ...createFormStoreSlice(...a),
+  ...createListenersSlice(...a),
+  ...createCleanUpSlice(...a)
 }));
+const useFormListeners = useFormStore;
+const useFormCleanUp = useFormStore;
 export {
   useFormCleanUp,
   useFormListeners,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-manage",
-  "version": "1.0.8-beta.10",
+  "version": "1.0.8-beta.12",
   "description": "Lightweight React form management with list and listener support.",
   "license": "MIT",
   "type": "module",
@@ -36,6 +36,7 @@
     "@emotion/styled": "^11.14.1",
     "@eslint/js": "^9.14.0",
     "@mui/material": "^7.3.7",
+    "@types/lodash": "^4.17.23",
     "@types/node": "^22.9.3",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",

package/src/App.tsx

@@ -1,4 +1,4 @@
-import { Checkbox } from "@mui/material";
+import { Checkbox, Dialog, DialogContent, TextField } from "@mui/material";
 import { Button, Input } from "antd";
 import { motion } from "framer-motion";
 import { useEffect } from "react";
@@ -8,10 +8,45 @@ import InputWrapper from "./components/Form/InputWrapper";
 import Form, { useForm } from "./providers/Form";
 
 import { Form as AntdForm } from "antd";
+import { useToggle } from "minh-custom-hooks-release";
+
+function TestFormWatch() {
+  const watchValue = Form.useWatch("numericCode");
+
+  return <div>TestFormWatch</div>;
+}
+
+function TestMuiDialog({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogContent>
+        {" "}
+        <Form
+          onFinish={(values) => {
+            console.log("Mui Dialog Form Values: ", values);
+          }}
+          formName="ADD_FORM"
+        >
+          <FormItem name="oooo">
+            <TextField />
+          </FormItem>
+
+          <Button htmlType="submit">Submit</Button>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
 
 const App = () => {
   const [form] = useForm("form1");
-
+  const { state: open, toggle } = useToggle(false);
   const watchCheckBox = Form.useWatch("checkControlledAfterInit", "form1");
 
   useEffect(() => {
@@ -155,7 +190,7 @@ const App = () => {
             <Checkbox />
           </FormItem>
         </motion.div>
-
+        <TestFormWatch />
         <Button
           onClick={() => {
             const current = form?.getFieldValue("checkControlledAfterInit");
@@ -174,6 +209,9 @@ const App = () => {
           Reset
         </Button>
       </Form>
+
+      <Button onClick={toggle}>Toggle Dialog</Button>
+      <TestMuiDialog onClose={toggle} open={open} />
     </div>
   );
 };

package/src/components/Form/FormCleanUp.tsx

@@ -1,20 +1,16 @@
 import { useEffect } from "react";
 import { useShallow } from "zustand/react/shallow";
-import {
-  useFormCleanUp,
-  useFormListeners,
-  useFormStore,
-} from "../../stores/formStore";
+import { useFormStore } from "../../stores/formStore";
 
 const FormCleanUp = () => {
-  const { cleanUpStack, clearCleanUpStack } = useFormCleanUp(
+  const { cleanUpStack, clearCleanUpStack } = useFormStore(
     useShallow((state) => ({
       cleanUpStack: state.cleanUpStack,
       clearCleanUpStack: state.clearCleanUpStack,
     })),
   );
 
-  const { revokeListener } = useFormListeners(
+  const { revokeListener } = useFormStore(
     useShallow((state) => ({
       revokeListener: state.revokeListener,
     })),

package/src/components/Form/FormList.tsx

@@ -1,4 +1,4 @@
-import useTestRrenderListControl from "../../hooks/useFormListControl";
+import useFormListControl from "../../hooks/useFormListControl";
 import type { FormInstance } from "../../stores/formStore";
 
 export interface FormListProps<T = any> {
@@ -6,11 +6,24 @@ export interface FormListProps<T = any> {
   initialValues?: T[];
   form?: FormInstance;
   formName?: string;
-  children: (fields: Array<{ name: string; key: string }>, operations: { add: (index: number) => void; remove: (opts: { index?: number; key?: string }) => void; move: (opts: { from?: number; fromKey?: string; to: number }) => void }) => React.ReactNode;
+  children: (
+    fields: Array<{ name: string; key: string }>,
+    operations: {
+      add: (index: number) => void;
+      remove: (opts: { index?: number; key?: string }) => void;
+      move: (opts: { from?: number; fromKey?: string; to: number }) => void;
+    },
+  ) => React.ReactNode;
 }
 
-const FormList = <T = any>({ name, initialValues, form, formName, children }: FormListProps<T>) => {
-  const { listFields, ...actions } = useTestRrenderListControl({
+const FormList = <T = any,>({
+  name,
+  initialValues,
+  form,
+  formName,
+  children,
+}: FormListProps<T>) => {
+  const { listFields, ...actions } = useFormListControl({
     name,
     initialValues,
     form,

package/src/hooks/useFormItemControl.ts

@@ -18,11 +18,7 @@ import {
   IS_VIETNAMESE_PHONE_NUMBER_REGEX,
 } from "../constants/validation";
 import { useFormContext } from "../providers/Form";
-import {
-  useFormCleanUp,
-  useFormListeners,
-  useFormStore,
-} from "../stores/formStore";
+import { useFormStore } from "../stores/formStore";
 
 import type { FormInstance } from "../stores/formStore";
 import type {
@@ -98,7 +94,7 @@ export default function useFormItemControl<T = any>({
     }),
   );
 
-  const { setCleanUpStack } = useFormCleanUp(
+  const { setCleanUpStack } = useFormStore(
     useShallow((state) => ({
       setCleanUpStack: state.setCleanUpStack,
     })),
@@ -130,7 +126,7 @@ export default function useFormItemControl<T = any>({
     }),
   );
 
-  const { listener, setListener } = useFormListeners(
+  const { listener, setListener } = useFormStore(
     useShallow((state) => {
       // console.log(
       //   "Get listener from store: ",

package/src/hooks/useFormListControl.ts

@@ -3,7 +3,7 @@ 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";
 
 import type { FormInstance } from "../stores/formStore";
 
@@ -19,7 +19,7 @@ interface UseFormListControlProps {
 interface UseFormListControlReturn {
   listFields: ListField[];
   move: (opts: { from?: number; fromKey?: string; to: number }) => void;
-  add: (index: number) => void;
+  add: (index?: number) => void;
   remove: (opts: { index?: number; key?: string }) => void;
 }
 
@@ -31,7 +31,9 @@ export default function useFormListControl<T = any>({
 }: UseFormListControlProps): UseFormListControlReturn {
   const contextForm = useFormContext();
   const getFormValues = useFormStore((state) => state.getFormValues);
-  const [listFormInitValues, setListFormInitValues] = useState<any[] | undefined>(undefined);
+  const [listFormInitValues, setListFormInitValues] = useState<
+    any[] | undefined
+  >(undefined);
   const { clearCacheData, setCacheData } = useFormStore(
     useShallow((state) => ({
       cacheData: state.cacheData,
@@ -39,7 +41,7 @@ export default function useFormListControl<T = any>({
       setCacheData: state.setCacheData,
     })),
   );
-  const { setCleanUpStack } = useFormCleanUp(
+  const { setCleanUpStack } = useFormStore(
     useShallow((state) => ({
       setCleanUpStack: state.setCleanUpStack,
     })),
@@ -135,13 +137,9 @@ export default function useFormListControl<T = any>({
     );
   };
 
-  const add = (index: number) => {
+  const add = (index?: number) => {
     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 result = [
@@ -154,6 +152,9 @@ export default function useFormListControl<T = any>({
 
         return result;
       }
+      if (index > prev.length) return prev;
+
+      if (index < 0) return prev;
 
       const clonePrev = [...prev];
 
@@ -217,7 +218,15 @@ export default function useFormListControl<T = any>({
     });
   };
 
-  const move = ({ from, fromKey, to }: { from?: number; fromKey?: string; to: number }) => {
+  const move = ({
+    from,
+    fromKey,
+    to,
+  }: {
+    from?: number;
+    fromKey?: string;
+    to: number;
+  }) => {
     setListFields((prev) => {
       console.log("move list item: ", { from, to });
       if (
@@ -286,7 +295,7 @@ export default function useFormListControl<T = any>({
   useEffect(() => {
     console.log("Trigger init", formState?.isInitied, internalInitValue);
     if (formState?.isInitied) {
-        if (Array.isArray(listFormInitValues)) {
+      if (Array.isArray(listFormInitValues)) {
         const result = listFormInitValues?.map((_, i) => {
           const itemName = `${name}.${i}`;
           const key = v4();

package/src/index.ts

@@ -19,6 +19,13 @@ import InputWrapper, { type InputWrapperProps } from "./components/Form/InputWra
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
 
+import { 
+  useFormStore, 
+  type FormInstance, 
+  type ListenerItem, 
+  type CleanUpItem 
+} from "./stores/formStore";
+
 export {
   Form,
   FormItem,
@@ -31,6 +38,7 @@ export {
   useWatch,
   useSubmitDataWatch,
   useFormStateWatch,
+  useFormStore,
   type FormProps,
   type FormItemProps,
   type FormListProps,
@@ -39,6 +47,9 @@ export {
   type FormFieldError,
   type SubmitState,
   type UseFormItemStateWatchReturn,
+  type FormInstance,
+  type ListenerItem,
+  type CleanUpItem,
   SUBMIT_STATE,
 };
 

package/src/providers/Form.tsx

@@ -1,4 +1,4 @@
-import { cloneDeep, get, isEqual, last, set, uniq } from "lodash";
+import { cloneDeep, get, isEqual, isNil, last, set, uniqBy } from "lodash";
 import { useTask } from "minh-custom-hooks-release";
 import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
 import { createContext, useContext, useEffect, useState } from "react";
@@ -6,7 +6,7 @@ import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
 import FormCleanUp from "../components/Form/FormCleanUp";
 import { SUBMIT_STATE } from "../constants/form";
-import { useFormListeners, useFormStore } from "../stores/formStore";
+import { useFormStore } from "../stores/formStore";
 import type {
   PublicFormInstance,
   UseFormItemStateWatchReturn,
@@ -81,7 +81,7 @@ export default function Form<T = any>({
     })),
   );
 
-  const { getListeners } = useFormListeners(
+  const { getListeners } = useFormStore(
     useShallow((state) => {
       return {
         getListeners: state.getListeners,
@@ -174,8 +174,8 @@ export default function Form<T = any>({
 
         const resultValues = cloneDeep(formValues);
         const cleanValues = {} as T;
-        uniq(listeners, (l) => l.name).forEach((l) => {
-          set(cleanValues, l.name, get(resultValues, l.name));
+        uniqBy(listeners, (l: any) => l.name).forEach((l) => {
+          set(cleanValues as any, l.name, get(resultValues, l.name));
         });
 
         const handleIsolateCase = async () => {
@@ -413,14 +413,18 @@ export function useFormContext() {
 export function useForm<T = any>(
   formNameOrFormInstance?: string | PublicFormInstance<T>,
 ) {
-  const targetFormName =
-    typeof formNameOrFormInstance === "object" &&
-    formNameOrFormInstance !== null
+  const formContext = useContext(FormContext);
+  const targetFormName = isNil(formNameOrFormInstance)
+    ? formContext?.formName
+    : typeof formNameOrFormInstance === "object" &&
+        formNameOrFormInstance !== null
       ? (formNameOrFormInstance as PublicFormInstance<T>).formName
       : (formNameOrFormInstance as string | undefined);
 
   const formInstance = useFormStore((state) => {
-    return state.formInstances.find((i) => i.formName === targetFormName);
+    return Object.values(state.formInstances).find(
+      (i) => i.formName === targetFormName,
+    );
   }) as PublicFormInstance<T> | undefined;
 
   return [formInstance];
@@ -507,8 +511,30 @@ export const useFormItemStateWatch = <T = any,>(
   };
 };
 
+export const useWatchFormListeners = <T = any,>(
+  formNameOrFormInstance?: string | PublicFormInstance<T>,
+) => {
+  const [formInstance] = useForm<T>(formNameOrFormInstance as any);
+
+  const listeners = useFormStore(
+    useShallow((state) => {
+      const allListeners = state.listeners;
+      return {
+        listeners: allListeners.filter((l) =>
+          !isNil(formNameOrFormInstance)
+            ? true
+            : l.formName === formInstance?.formName,
+        ),
+      };
+    }),
+  );
+
+  return listeners;
+};
+
 Form.useForm = useForm;
 Form.useWatch = useWatch;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;
 Form.useFormItemStateWatch = useFormItemStateWatch;
+Form.useWatchFormListeners = useWatchFormListeners;

package/src/stores/formStore.ts

@@ -17,7 +17,7 @@ export interface FormInstance {
   setFieldFocus: (name: string) => void;
 }
 
-interface ListenerItem {
+export interface ListenerItem {
   name?: string;
   formName?: string;
   isTouched?: boolean;
@@ -28,9 +28,10 @@ interface ListenerItem {
   onReset?: any;
   onFocus?: any;
   emitFocus?: any;
+  isInitied?: boolean;
 }
 
-interface CleanUpItem {
+export interface CleanUpItem {
   name?: string;
   type?: string;
   key: string;
@@ -43,19 +44,23 @@ interface FormStoreState {
   initialValues: Record<string, any>;
   formStates: Record<string, any>;
   cacheData: Record<string, any>;
-  formInstances: FormInstance[];
+  formInstances: Record<string, FormInstance>;
   submitHistory: Record<string, any[]>;
+  listeners: ListenerItem[];
+  cleanUpStack: CleanUpItem[];
   // methods (loose typed for incremental migration)
   [key: string]: any;
 }
-export const useFormStore = create<FormStoreState>(
-  (storeSet: any, storeGet: any) => ({
-    forms: {},
-    initialValues: {},
-    formStates: {},
-    cacheData: {},
-    formInstances: [],
-    submitHistory: {},
+
+// Combined store containing all form-related state
+// Form Store Slice
+const createFormStoreSlice = (storeSet: any, storeGet: any, api: any) => ({
+  forms: {},
+  initialValues: {},
+  formStates: {},
+  cacheData: {},
+  formInstances: {},
+  submitHistory: {},
     setData(formName, name, value) {
       return storeSet(
         produce<any>((state: any) => {
@@ -353,13 +358,13 @@ export const useFormStore = create<FormStoreState>(
         }),
       );
     },
-  }),
-);
+});
 
-export const useFormListeners = create<any>((storeSet: any, storeGet: any) => ({
+// Listeners Slice
+const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
   listeners: [],
-  getListener(formItemId) {
-    return storeGet().listeners.find((l) => l.formItemId === formItemId);
+  getListener(formItemId: string) {
+    return storeGet().listeners.find((l: any) => l.formItemId === formItemId);
   },
   getListeners() {
     return storeGet().listeners;
@@ -376,7 +381,7 @@ export const useFormListeners = create<any>((storeSet: any, storeGet: any) => ({
     onFocus,
     emitFocus,
     isInitied,
-  }) {
+  }: any) {
     return storeSet(
       produce<any>((state: any) => {
         const storeListeners = state.listeners;
@@ -433,7 +438,7 @@ export const useFormListeners = create<any>((storeSet: any, storeGet: any) => ({
       }),
     );
   },
-  revokeListener(formItemId, onAfterRevoke) {
+  revokeListener(formItemId: string, onAfterRevoke: any) {
     return storeSet(
       produce<any>((state: any) => {
         const storeListeners = state.listeners;
@@ -442,8 +447,6 @@ export const useFormListeners = create<any>((storeSet: any, storeGet: any) => ({
           (l: any) => l.formItemId == formItemId,
         );
 
-        // console.log("Find item for revoke: ", findListenerIndex, formItemId);
-
         if (findListenerIndex > -1) {
           const listenersInfo = cloneDeep(storeListeners[findListenerIndex]);
 
@@ -462,11 +465,12 @@ export const useFormListeners = create<any>((storeSet: any, storeGet: any) => ({
       }),
     );
   },
-}));
+});
 
-export const useFormCleanUp = create<any>((storeSet: any) => ({
+// CleanUp Slice
+const createCleanUpSlice = (storeSet: any, storeGet: any, api: any) => ({
   cleanUpStack: [],
-  setCleanUpStack({ name, type, itemKey, formName }) {
+  setCleanUpStack({ name, type, itemKey, formName }: any) {
     return storeSet(
       produce<any>((state: any) => {
         const oldValues = state.cleanUpStack;
@@ -482,4 +486,15 @@ export const useFormCleanUp = create<any>((storeSet: any) => ({
       }),
     );
   },
+});
+
+// Combined Store
+export const useFormStore = create<FormStoreState>((...a) => ({
+  ...createFormStoreSlice(...a),
+  ...createListenersSlice(...a),
+  ...createCleanUpSlice(...a),
 }));
+
+// Deprecated exports - use useFormStore instead
+export const useFormListeners = useFormStore;
+export const useFormCleanUp = useFormStore;