react-form-manage 1.0.8 → 1.1.0-beta.2

package/CHANGELOG.md

@@ -2,6 +2,83 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.1.0-beta.2] - 2026-03-03
+
+### Type Improvements
+
+- **PublicFormInstance Type Safety**: Enhanced type definitions for better developer experience
+  - `name` parameters: Changed from `keyof T & string` to `keyof T | (string & {})` for dynamic field name support
+  - Applied to: `setFieldValue`, `getFieldValue`, `setFieldFocus`, `getFieldValues`, `getFieldErrors`
+  - `getFieldErrors` return type: Changed from `Record<string, any>` to `Array<{ name: string; errors: FormFieldError[] }>` to match actual implementation
+  - `submitAsync` return type: Changed from `Promise<any>` to `Promise<void>` for better type safety
+- **UseFormItemProps**: Updated `name` property type to `keyof T | (string & {})` for consistency
+
+### New Test Cases
+
+- **TestCase7: Set Value in useEffect with Timeout**: Test async behavior with setTimeout
+  - Verify setValue works correctly when called from async callbacks
+  - Test cleanup behavior when component unmounts before timeout
+  - Configurable delay with remount functionality
+  - Real-time event logging
+- **TestCase8: Type Safety Improvements**: Comprehensive type validation test
+  - Test typed vs dynamic field names
+  - Validate getFieldErrors return type structure
+  - Test submitAsync Promise<void> return type
+  - Table display for field errors
+  - Comprehensive validation scenarios
+
+### Technical Details
+
+- All form instance methods now consistently support dynamic field names
+- Type definitions match actual runtime behavior
+- Enhanced IntelliSense and autocomplete for form methods
+- 8 comprehensive test cases covering all Form Instance features
+
+## [1.1.0-beta.1] - 2026-03-03
+
+### Breaking Changes
+
+- **Form Component Props**: Form component can now accept `form` instance prop instead of only `formName`
+  - New usage: `<Form form={formInstance}>` alongside existing `<Form formName="myForm">`
+  - Form instance can be created with `Form.useForm()` before Form component mounts
+  - Methods are bound to external instance when provided
+- **useForm Return Type**: `useForm()` now returns tuple `[instance, isReady]` instead of `[instance]`
+  - `isReady` flag indicates whether Form component is mounted and ready
+  - Can be used to conditionally enable/disable features based on Form state
+- **useWatch Type**: `name` parameter now accepts `keyof T | (string & {})` for dynamic field names
+
+### New Features
+
+- **Auto-generate FormName**: Form.useForm() automatically generates UUID if no parameter provided
+  - No need to manually manage formName for simple cases
+  - Multiple forms can coexist without name conflicts
+- **Safe Form Methods**: Form instance methods can be called safely before Form mounts
+  - Proxy instance automatically finds real instance when Form mounts
+  - Warnings logged instead of errors when methods called before mount
+- **useFormUtils Hook**: New hook for external form manipulation
+  - `getFormInstance(formName)`: Get form instance from store
+  - `setFieldValue(formName, name, value, options)`: Set field value externally
+  - `setFieldValues(formName, values, options)`: Set multiple values externally
+  - Useful for global control panels, external triggers, cross-component manipulation
+- **Headless Forms**: Form instance can work independently as state manager
+  - Methods work without Form component wrapper
+  - Useful for custom implementations, multi-step forms, form wizards
+- **Test Suite**: Created 6 comprehensive test cases for Form Instance features
+  - TestCase1: Form with Instance Prop
+  - TestCase2: Auto-generate FormName
+  - TestCase3: Safe Form Methods
+  - TestCase4: useForm Status Flag
+  - TestCase5: useFormUtils Hook
+  - TestCase6: Form Without Wrapper
+
+### Technical Details
+
+- Form component uses internal instance or creates new one based on prop type
+- Proxy instance pattern for safe method calls before mount
+- UUID generation using `uuid/v4` for auto-generated form names
+- FormInstance methods rebind on mount to support external instance pattern
+- Type overloads for Form props: `FormPropsWithInstance` and `FormPropsWithoutInstance`
+
 ## [1.0.8] - 2026-02-16
 
 ### Features

package/dist/providers/Form.d.ts

@@ -1,8 +1,8 @@
-import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
+import type { ComponentType, FormHTMLAttributes, ReactElement, 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;
@@ -10,7 +10,6 @@ export interface SetFieldValueOptions extends OnChangeOptions {
 export interface FormProps<T = any> extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
     collectHiddenFields?: boolean;
     children: ReactNode;
-    formName: string;
     initialValues?: T;
     onFinish?: (values: T, allValues?: any) => void | Promise<void>;
     onReject?: (errorFields: any[]) => void | Promise<void>;
@@ -21,20 +20,19 @@ 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, 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;
+export interface FormPropsWithInstance<T = any> {
+    form: PublicFormInstance<T>;
+}
+export interface FormPropsWithoutInstance {
+    formName: string;
+}
+interface FormDeclearation {
+    <T = any>(props: FormProps<T> & FormPropsWithInstance<T>): ReactElement;
+    <T = any>(props: FormProps<T> & FormPropsWithoutInstance): ReactElement;
 }
-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 useForm<T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>): readonly [PublicFormInstance<T>, boolean];
+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;
@@ -47,3 +45,20 @@ 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 useFormUtils: () => {
+    getFormInstance: (formNameOrFormInstance?: string | PublicFormInstance) => any;
+    setFieldValue: (formNameOrFormInstance: string | PublicFormInstance, name: string, value: any, options?: SetFieldValueOptions) => void;
+    setFieldValues: (formNameOrFormInstance: string | PublicFormInstance, values: any, options?: SetFieldValueOptions) => void;
+};
+interface FormExposeType extends FormDeclearation {
+    useForm: typeof useForm;
+    Item: typeof FormItem;
+    useWatch: typeof useWatch;
+    useWatchNormalized: typeof useWatchNormalized;
+    useSubmitDataWatch: typeof useSubmitDataWatch;
+    useFormStateWatch: typeof useFormStateWatch;
+    useFormItemStateWatch: typeof useFormItemStateWatch;
+    useFormUtils: typeof useFormUtils;
+}
+declare const Form: FormExposeType;
+export default Form;

package/dist/providers/Form.js

@@ -3,13 +3,18 @@ import { cloneDeep, filter, get, isArray, isEqual, isNil, isPlainObject, last, s
 import { useTask } from "minh-custom-hooks-release";
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { flushSync } from "react-dom";
+import { v4 } from "uuid";
 import { useShallow } from "zustand/react/shallow";
 import FormItem from "../components/Form/FormItem";
 import { SUBMIT_STATE } from "../constants/form";
 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, collectHiddenFields: formCollectHiddenFields = true, ...props }) {
+const InternalForm = function Form({ children, formName: externalFormName, form: externalFormInstance, initialValues, onFinish, onReject, onFinally, FormElement, collectHiddenFields: formCollectHiddenFields = true, ...props }) {
+  const formName = useMemo(() => {
+    var _a;
+    return (_a = externalFormInstance == null ? void 0 : externalFormInstance.formName) != null ? _a : externalFormName;
+  }, [externalFormInstance, externalFormName]);
   const {
     // appInitValue,
     getFormItemValue,
@@ -386,18 +391,20 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
       isInitied: true,
       submitState: "idle"
     });
-    setFormInstance({
-      formName,
-      resetFields,
-      submit: runSubmit,
-      submitAsync: runSubmitAsync,
-      setFieldValue,
-      setFieldValues,
-      getFieldValue,
-      getFieldValues,
-      setFieldFocus,
-      getFieldErrors
-    });
+    const formInstance = externalFormInstance != null ? externalFormInstance : {};
+    if (externalFormInstance) {
+      externalFormInstance.setFieldValue = setFieldValue;
+      externalFormInstance.setFieldValues = setFieldValues;
+      externalFormInstance.getFieldValue = getFieldValue;
+      externalFormInstance.getFieldValues = getFieldValues;
+      externalFormInstance.setFieldFocus = setFieldFocus;
+      externalFormInstance.getFieldErrors = getFieldErrors;
+      externalFormInstance.submit = runSubmit;
+      externalFormInstance.submitAsync = runSubmitAsync;
+      externalFormInstance.resetFields = resetFields;
+      externalFormInstance.formName = formName;
+    }
+    setFormInstance(formInstance);
     return () => {
       revokeFormInstance({ formName });
       clearFormInitialValues(formName);
@@ -416,7 +423,7 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
     e.stopPropagation();
     runSubmit(void 0);
   }, ...props, children }) });
-}
+};
 function useFormContext() {
   const c = useContext(FormContext);
   if (!c)
@@ -425,11 +432,85 @@ function useFormContext() {
 }
 function useForm(formNameOrFormInstance) {
   const formContext = useContext(FormContext);
-  const targetFormName = isNil(formNameOrFormInstance) ? formContext == null ? void 0 : formContext.formName : typeof formNameOrFormInstance === "object" && formNameOrFormInstance !== null ? formNameOrFormInstance.formName : formNameOrFormInstance;
+  const [targetFormName] = useState(() => {
+    return isNil(formNameOrFormInstance) ? formContext == null ? void 0 : formContext.formName : typeof formNameOrFormInstance === "object" && formNameOrFormInstance !== null ? formNameOrFormInstance.formName : formNameOrFormInstance;
+  });
+  const [initFormName] = useState(() => targetFormName != null ? targetFormName : v4());
   const formInstance = useFormStore((state) => {
-    return state.formInstances.find((i) => i.formName === targetFormName);
+    return state.formInstances.find((i) => i.formName === initFormName);
+  });
+  const getFormInstance = useFormStore((state) => {
+    return state.getFormInstance;
   });
-  return [formInstance];
+  return [
+    formInstance != null ? formInstance : {
+      formName: initFormName,
+      setFieldValue(name, value, options) {
+        const formInstanceFind = getFormInstance(initFormName);
+        if (formInstanceFind) {
+          formInstanceFind.setFieldValue(name, value, options);
+          return;
+        }
+      },
+      setFieldValues(values, options) {
+        const formInstanceFind = getFormInstance(initFormName);
+        if (formInstanceFind) {
+          formInstanceFind.setFieldValues(values, options);
+          return;
+        }
+      },
+      getFieldValue(name) {
+        const formInstanceFind = getFormInstance(initFormName);
+        if (formInstanceFind) {
+          return formInstanceFind.getFieldValue(name);
+        }
+        return void 0;
+      },
+      getFieldValues(names) {
+        const formInstanceFind = getFormInstance(initFormName);
+        if (formInstanceFind) {
+          return formInstanceFind.getFieldValues(names);
+        }
+        return names.map((name) => ({ name, value: void 0 }));
+      },
+      setFieldFocus(name) {
+        const formInstanceFind = getFormInstance(initFormName);
+        if (formInstanceFind) {
+          formInstanceFind.setFieldFocus(name);
+          return;
+        }
+      },
+      getFieldErrors(names) {
+        const formInstanceFind = getFormInstance(initFormName);
+        if (formInstanceFind) {
+          return formInstanceFind.getFieldErrors(names);
+        }
+        return names.map((name) => ({ name, errors: [] }));
+      },
+      submit() {
+        const formInstanceFind = getFormInstance(initFormName);
+        if (formInstanceFind) {
+          formInstanceFind.submit();
+          return;
+        }
+      },
+      submitAsync() {
+        const formInstanceFind = getFormInstance(initFormName);
+        if (formInstanceFind) {
+          return formInstanceFind.submitAsync();
+        }
+        return Promise.resolve();
+      },
+      resetFields(resetOptions) {
+        const formInstanceFind = getFormInstance(initFormName);
+        if (formInstanceFind) {
+          formInstanceFind.resetFields(resetOptions);
+          return;
+        }
+      }
+    },
+    Boolean(formInstance)
+  ];
 }
 function useWatch(name, formNameOrFormInstance) {
   const [formInstance] = useForm(formNameOrFormInstance);
@@ -482,20 +563,56 @@ const useFormItemStateWatch = (nameOrFormItemId, formNameOrFormInstance) => {
     errors: (listener == null ? void 0 : listener.internalErrors) || []
   };
 };
-Form.useForm = useForm;
-Form.Item = FormItem;
-Form.useWatch = useWatch;
-Form.useWatchNormalized = useWatchNormalized;
-Form.useSubmitDataWatch = useSubmitDataWatch;
-Form.useFormStateWatch = useFormStateWatch;
-Form.useFormItemStateWatch = useFormItemStateWatch;
+const useFormUtils = () => {
+  const { getFormInstance } = useFormStore(useShallow((state) => ({
+    getFormInstance: state.getFormInstance
+  })));
+  const handleGetFormInstace = (formNameOrFormInstance) => {
+    const targetFormName = isNil(formNameOrFormInstance) ? void 0 : typeof formNameOrFormInstance === "object" && formNameOrFormInstance !== null ? formNameOrFormInstance.formName : formNameOrFormInstance;
+    if (!targetFormName) {
+      throw new Error("Form name is required to get form instance");
+    }
+    const formInstance = getFormInstance(targetFormName);
+    return formInstance;
+  };
+  const setFieldValue = (formNameOrFormInstance, name, value, options) => {
+    const formInstance = handleGetFormInstace(formNameOrFormInstance);
+    if (!formInstance) {
+      return;
+    }
+    formInstance.setFieldValue(name, value, options);
+  };
+  const setFieldValues = (formNameOrFormInstance, values, options) => {
+    const formInstance = handleGetFormInstace(formNameOrFormInstance);
+    if (!formInstance) {
+      return;
+    }
+    formInstance.setFieldValues(values, options);
+  };
+  return {
+    getFormInstance: handleGetFormInstace,
+    setFieldValue,
+    setFieldValues
+  };
+};
+const Form2 = InternalForm;
+Form2.useForm = useForm;
+Form2.Item = FormItem;
+Form2.useWatch = useWatch;
+Form2.useWatchNormalized = useWatchNormalized;
+Form2.useSubmitDataWatch = useSubmitDataWatch;
+Form2.useFormStateWatch = useFormStateWatch;
+Form2.useFormItemStateWatch = useFormItemStateWatch;
+Form2.useFormUtils = useFormUtils;
+var stdin_default = Form2;
 export {
   FormContext,
-  Form as default,
+  stdin_default as default,
   useForm,
   useFormContext,
   useFormItemStateWatch,
   useFormStateWatch,
+  useFormUtils,
   useSubmitDataWatch,
   useWatch,
   useWatchNormalized

package/dist/stores/formStore.js

@@ -130,6 +130,9 @@ const createFormStoreSlice = (storeSet, storeGet, api) => ({
       set(oldValues, `${formName}.${name}`, value);
     }));
   },
+  getFormInstance(formName) {
+    return storeGet().formInstances.find((f) => f.formName === formName);
+  },
   setFormInstance({ formName, resetFields, submit, submitAsync, setFieldValue, setFieldValues, getFieldValue, getFieldValues, getFieldErrors, setFieldFocus }) {
     return storeSet(produce((state) => {
       const storeListeners = state.formInstances;

package/dist/test/testFormInstance/TestCase1_FormWithInstance.d.ts

@@ -0,0 +1,14 @@
+/**
+ * TestCase1: Form with Instance Prop
+ *
+ * Mô tả:
+ * - Test breaking change: Form component nhận prop "form" thay vì chỉ có "formName"
+ * - Form instance được tạo trước bằng Form.useForm()
+ * - Các methods được bind vào instance trước khi Form mount
+ *
+ * Expected Behavior:
+ * - Có thể gọi form.setFieldValue() trước khi Form render
+ * - Form sử dụng formName từ instance
+ * - Instance được persist và rebind methods khi Form mount
+ */
+export default function TestCase1_FormWithInstance(): import("react/jsx-runtime").JSX.Element;

package/dist/test/testFormInstance/TestCase1_FormWithInstance.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Space, Typography } from "antd";
+import Form from "../../providers/Form";
+const { Title, Paragraph, Text } = Typography;
+function TestCase1_FormWithInstance() {
+  const [form] = Form.useForm();
+  const handleSetValueBeforeMount = () => {
+    form.setFieldValue("username", "admin");
+    form.setFieldValue("email", "admin@example.com");
+  };
+  const handleGetValues = () => {
+  };
+  const handleReset = () => {
+    form.resetFields();
+  };
+  return _jsxs("div", { style: { padding: 24 }, children: [_jsx(Title, { level: 3, children: "TestCase1: Form with Instance Prop" }), _jsxs(Paragraph, { children: [_jsx(Text, { strong: true, children: "Breaking Change:" }), " Form component c\xF3 th\u1EC3 nh\u1EADn prop", " ", _jsx(Text, { code: true, children: "form" }), " thay v\xEC ", _jsx(Text, { code: true, children: "formName" })] }), _jsx(Paragraph, { children: _jsx(Text, { type: "secondary", children: "Form instance \u0111\u01B0\u1EE3c t\u1EA1o b\u1EB1ng Form.useForm() v\xE0 truy\u1EC1n v\xE0o Form component. Instance n\xE0y c\xF3 th\u1EC3 \u0111\u01B0\u1EE3c s\u1EED d\u1EE5ng tr\u01B0\u1EDBc khi Form mount." }) }), _jsxs(Space, { style: { marginBottom: 24 }, children: [_jsx(Button, { onClick: handleSetValueBeforeMount, type: "primary", children: "Set Values Before Mount" }), _jsx(Button, { onClick: handleGetValues, children: "Get Current Values (Check Console)" }), _jsx(Button, { onClick: handleReset, danger: true, children: "Reset Form" })] }), _jsxs(Form, { form, initialValues: { username: "", email: "" }, onFinish: (values) => {
+  }, children: [_jsx(Form.Item, { name: "username", label: "Username", children: _jsx("input", { type: "text", placeholder: "Username", style: { padding: 8, width: 300 } }) }), _jsx(Form.Item, { name: "email", label: "Email", children: _jsx("input", { type: "email", placeholder: "Email", style: { padding: 8, width: 300 } }) }), _jsx(Button, { type: "primary", htmlType: "submit", children: "Submit" })] }), _jsxs("div", { style: { marginTop: 24, padding: 16, background: "#f5f5f5" }, children: [_jsx(Title, { level: 5, children: "Expected Results:" }), _jsxs("ul", { children: [_jsx("li", { children: '\u2705 Click "Set Values Before Mount" \u2192 Values \u0111\u01B0\u1EE3c set v\xE0 log ra console' }), _jsx("li", { children: '\u2705 Click "Get Current Values" \u2192 Values hi\u1EC7n t\u1EA1i \u0111\u01B0\u1EE3c log ra' }), _jsx("li", { children: "\u2705 Form render v\u1EDBi values \u0111\xE3 set" }), _jsx("li", { children: '\u2705 Click "Reset Form" \u2192 Form reset v\u1EC1 initialValues' }), _jsx("li", { children: "\u2705 Submit form \u2192 Console log submitted values" })] })] })] });
+}
+export {
+  TestCase1_FormWithInstance as default
+};

package/dist/test/testFormInstance/TestCase2_AutoGenerateFormName.d.ts

@@ -0,0 +1,14 @@
+/**
+ * TestCase2: Auto-generate FormName
+ *
+ * Mô tả:
+ * - Test feature: Form.useForm() tự động generate UUID nếu không truyền tham số
+ * - Mỗi lần gọi Form.useForm() sẽ tạo ra một formName unique
+ * - Form component có thể hoạt động mà không cần truyền formName prop
+ *
+ * Expected Behavior:
+ * - Form hoạt động bình thường với auto-generated formName
+ * - FormName là UUID duy nhất
+ * - Multiple forms có thể coexist với auto-generated names
+ */
+export default function TestCase2_AutoGenerateFormName(): import("react/jsx-runtime").JSX.Element;

package/dist/test/testFormInstance/TestCase2_AutoGenerateFormName.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Space, Typography } from "antd";
+import { useState } from "react";
+import Form from "../../providers/Form";
+const { Title, Paragraph, Text } = Typography;
+function TestCase2_AutoGenerateFormName() {
+  const [form1] = Form.useForm();
+  const [form2] = Form.useForm();
+  const [showForm1, setShowForm1] = useState(true);
+  const [showForm2, setShowForm2] = useState(true);
+  const handleLogFormNames = () => {
+  };
+  const handleSetValues = () => {
+    form1.setFieldValue("name", "John Doe");
+    form2.setFieldValue("email", "john@example.com");
+  };
+  return _jsxs("div", { style: { padding: 24 }, children: [_jsx(Title, { level: 3, children: "TestCase2: Auto-generate FormName" }), _jsxs(Paragraph, { children: [_jsx(Text, { strong: true, children: "New Feature:" }), " Form.useForm() t\u1EF1 \u0111\u1ED9ng t\u1EA1o UUID l\xE0m formName n\u1EBFu kh\xF4ng c\xF3 tham s\u1ED1"] }), _jsx(Paragraph, { children: _jsx(Text, { type: "secondary", children: "M\u1ED7i form instance c\xF3 m\u1ED9t UUID duy nh\u1EA5t, kh\xF4ng c\u1EA7n ph\u1EA3i manually qu\u1EA3n l\xFD formName. Multiple forms c\xF3 th\u1EC3 coexist m\xE0 kh\xF4ng lo b\u1ECB conflict." }) }), _jsxs(Space, { style: { marginBottom: 24 }, children: [_jsx(Button, { onClick: handleLogFormNames, type: "primary", children: "Log Form Names (Check Console)" }), _jsx(Button, { onClick: handleSetValues, children: "Set Values for Both Forms" }), _jsxs(Button, { onClick: () => setShowForm1(!showForm1), children: ["Toggle Form 1 ", showForm1 ? "Hide" : "Show"] }), _jsxs(Button, { onClick: () => setShowForm2(!showForm2), children: ["Toggle Form 2 ", showForm2 ? "Hide" : "Show"] })] }), _jsxs("div", { style: { display: "flex", gap: 24 }, children: [showForm1 && _jsxs("div", { style: { flex: 1, border: "1px solid #d9d9d9", padding: 16 }, children: [_jsx(Title, { level: 5, children: "Form 1 (Auto-generated Name)" }), _jsxs(Text, { type: "secondary", children: ["FormName: ", form1.formName] }), _jsxs(Form, { form: form1, initialValues: { name: "" }, onFinish: (values) => {
+  }, children: [_jsx(Form.Item, { name: "name", label: "Name", children: _jsx("input", { type: "text", placeholder: "Your name", style: { padding: 8, width: "100%" } }) }), _jsx(Button, { type: "primary", htmlType: "submit", children: "Submit Form 1" })] })] }), showForm2 && _jsxs("div", { style: { flex: 1, border: "1px solid #d9d9d9", padding: 16 }, children: [_jsx(Title, { level: 5, children: "Form 2 (Auto-generated Name)" }), _jsxs(Text, { type: "secondary", children: ["FormName: ", form2.formName] }), _jsxs(Form, { form: form2, initialValues: { email: "" }, onFinish: (values) => {
+  }, children: [_jsx(Form.Item, { name: "email", label: "Email", children: _jsx("input", { type: "email", placeholder: "Your email", style: { padding: 8, width: "100%" } }) }), _jsx(Button, { type: "primary", htmlType: "submit", children: "Submit Form 2" })] })] })] }), _jsxs("div", { style: { marginTop: 24, padding: 16, background: "#f5f5f5" }, children: [_jsx(Title, { level: 5, children: "Expected Results:" }), _jsxs("ul", { children: [_jsx("li", { children: '\u2705 Click "Log Form Names" \u2192 Console show 2 different UUIDs' }), _jsx("li", { children: '\u2705 Click "Set Values for Both Forms" \u2192 Both forms update correctly' }), _jsx("li", { children: "\u2705 Toggle forms \u2192 Forms can unmount/remount without losing instance" }), _jsx("li", { children: "\u2705 FormName displays unique UUIDs under each form title" }), _jsx("li", { children: "\u2705 Both forms work independently without conflicts" }), _jsx("li", { children: "\u2705 Submit each form \u2192 Console logs correct values" })] })] })] });
+}
+export {
+  TestCase2_AutoGenerateFormName as default
+};

package/dist/test/testFormInstance/TestCase3_SafeFormMethods.d.ts

@@ -0,0 +1,14 @@
+/**
+ * TestCase3: Safe Form Methods
+ *
+ * Mô tả:
+ * - Test feature: Form instance methods có thể gọi an toàn trước khi Form mount
+ * - Proxy instance tự động tìm real instance khi Form mount
+ * - Warning được log nếu method được gọi khi Form chưa mount
+ *
+ * Expected Behavior:
+ * - Gọi methods trước khi mount → Log warning
+ * - Sau khi mount → Methods hoạt động bình thường
+ * - Unmount form → Methods lại log warning
+ */
+export default function TestCase3_SafeFormMethods(): import("react/jsx-runtime").JSX.Element;

package/dist/test/testFormInstance/TestCase3_SafeFormMethods.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Space, Typography } from "antd";
+import { useState } from "react";
+import Form from "../../providers/Form";
+const { Title, Paragraph, Text } = Typography;
+function TestCase3_SafeFormMethods() {
+  const [form] = Form.useForm();
+  const [formMounted, setFormMounted] = useState(false);
+  const [logs, setLogs] = useState([]);
+  const addLog = (message) => {
+    setLogs((prev) => [
+      ...prev,
+      `[${(/* @__PURE__ */ new Date()).toLocaleTimeString()}] ${message}`
+    ]);
+  };
+  const handleSetValueBeforeMount = () => {
+    addLog("\u{1F534} Calling setFieldValue BEFORE Form mount");
+    form.setFieldValue("username", "admin");
+    addLog("Check console for warning");
+  };
+  const handleSetValueAfterMount = () => {
+    addLog("\u{1F7E2} Calling setFieldValue AFTER Form mount");
+    form.setFieldValue("username", "user123");
+    form.setFieldValue("password", "secret");
+    addLog("Values should be set successfully");
+  };
+  const handleGetValue = () => {
+    const username = form.getFieldValue("username");
+    const password = form.getFieldValue("password");
+    addLog(`Get values: username=${username}, password=${password}`);
+  };
+  const handleSubmit = () => {
+    addLog("\u{1F535} Calling form.submit()");
+    form.submit();
+  };
+  const handleMountForm = () => {
+    setFormMounted(true);
+    addLog("\u2705 Form mounted");
+  };
+  const handleUnmountForm = () => {
+    setFormMounted(false);
+    addLog("\u274C Form unmounted");
+  };
+  const clearLogs = () => {
+    setLogs([]);
+  };
+  return _jsxs("div", { style: { padding: 24 }, children: [_jsx(Title, { level: 3, children: "TestCase3: Safe Form Methods" }), _jsxs(Paragraph, { children: [_jsx(Text, { strong: true, children: "New Feature:" }), " Form methods c\xF3 th\u1EC3 \u0111\u01B0\u1EE3c g\u1ECDi an to\xE0n b\u1EA5t c\u1EE9 l\xFAc n\xE0o"] }), _jsx(Paragraph, { children: _jsx(Text, { type: "secondary", children: "Proxy instance t\u1EF1 \u0111\u1ED9ng proxy c\xE1c method calls. N\u1EBFu Form ch\u01B0a mount, s\u1EBD log warning thay v\xEC throw error. Khi Form mount, methods ho\u1EA1t \u0111\u1ED9ng b\xECnh th\u01B0\u1EDDng." }) }), _jsxs(Space, { style: { marginBottom: 16 }, wrap: true, children: [_jsxs(Button, { onClick: handleSetValueBeforeMount, danger: !formMounted, children: ["Set Value ", !formMounted && "(Form Not Mounted)"] }), _jsx(Button, { onClick: handleSetValueAfterMount, type: "primary", disabled: !formMounted, children: "Set Value After Mount" }), _jsx(Button, { onClick: handleGetValue, children: "Get Values" }), _jsx(Button, { onClick: handleSubmit, type: "dashed", children: "Submit Form" })] }), _jsxs(Space, { style: { marginBottom: 24 }, children: [!formMounted ? _jsx(Button, { onClick: handleMountForm, type: "primary", children: "Mount Form" }) : _jsx(Button, { onClick: handleUnmountForm, danger: true, children: "Unmount Form" }), _jsx(Button, { onClick: clearLogs, children: "Clear Logs" })] }), _jsxs("div", { style: { display: "flex", gap: 24 }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx(Title, { level: 5, children: "Action Logs:" }), _jsx("div", { style: {
+    border: "1px solid #d9d9d9",
+    padding: 16,
+    height: 300,
+    overflow: "auto",
+    background: "#fafafa",
+    fontFamily: "monospace",
+    fontSize: 12
+  }, children: logs.length === 0 ? _jsx(Text, { type: "secondary", children: "No logs yet..." }) : logs.map((log, index) => _jsx("div", { style: { marginBottom: 4 }, children: log }, index)) })] }), _jsxs("div", { style: { flex: 1 }, children: [_jsxs(Title, { level: 5, children: ["Form (Status: ", formMounted ? "Mounted" : "Unmounted", "):"] }), formMounted ? _jsx("div", { style: { border: "1px solid #52c41a", padding: 16 }, children: _jsxs(Form, { form, initialValues: { username: "", password: "" }, onFinish: (values) => {
+    addLog(`\u2705 Form submitted: ${JSON.stringify(values)}`);
+  }, children: [_jsx(Form.Item, { name: "username", label: "Username", children: _jsx("input", { type: "text", placeholder: "Username", style: { padding: 8, width: "100%" } }) }), _jsx(Form.Item, { name: "password", label: "Password", children: _jsx("input", { type: "password", placeholder: "Password", style: { padding: 8, width: "100%" } }) }), _jsx(Button, { type: "primary", htmlType: "submit", children: "Submit" })] }) }) : _jsx("div", { style: {
+    border: "1px dashed #d9d9d9",
+    padding: 16,
+    height: 200,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "#fafafa"
+  }, children: _jsx(Text, { type: "secondary", children: "Form is not mounted" }) })] })] }), _jsxs("div", { style: { marginTop: 24, padding: 16, background: "#f5f5f5" }, children: [_jsx(Title, { level: 5, children: "Expected Results:" }), _jsxs("ul", { children: [_jsx("li", { children: '\u2705 Click "Set Value (Form Not Mounted)" \u2192 Console shows warning' }), _jsx("li", { children: '\u2705 Click "Mount Form" \u2192 Form appears' }), _jsx("li", { children: '\u2705 Click "Set Value After Mount" \u2192 Form values update without warning' }), _jsx("li", { children: '\u2705 Click "Get Values" \u2192 Shows current values in logs' }), _jsx("li", { children: '\u2705 Click "Unmount Form" \u2192 Form disappears' }), _jsx("li", { children: '\u2705 Click "Set Value (Form Not Mounted)" again \u2192 Warning appears again' }), _jsx("li", { children: "\u26A0\uFE0F Check browser console for detailed warnings" })] })] })] });
+}
+export {
+  TestCase3_SafeFormMethods as default
+};

package/dist/test/testFormInstance/TestCase4_UseFormStatusFlag.d.ts

@@ -0,0 +1,15 @@
+/**
+ * TestCase4: useForm Returns Status Flag
+ *
+ * Mô tả:
+ * - Test breaking change: useForm() trả về tuple [instance, isReady]
+ * - isReady = true khi Form đã mount và bind methods
+ * - isReady = false khi Form chưa mount hoặc đã unmount
+ *
+ * Expected Behavior:
+ * - Trước khi mount: isReady = false
+ * - Sau khi mount: isReady = true
+ * - Sau khi unmount: isReady = false
+ * - Có thể dùng isReady để conditionally render UI hoặc enable/disable buttons
+ */
+export default function TestCase4_UseFormStatusFlag(): import("react/jsx-runtime").JSX.Element;

package/dist/test/testFormInstance/TestCase4_UseFormStatusFlag.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Space, Tag, Typography } from "antd";
+import { useEffect, useState } from "react";
+import Form from "../../providers/Form";
+const { Title, Paragraph, Text } = Typography;
+function TestCase4_UseFormStatusFlag() {
+  const [form, isFormReady] = Form.useForm();
+  const [formMounted, setFormMounted] = useState(false);
+  const [statusHistory, setStatusHistory] = useState([]);
+  useEffect(() => {
+    setStatusHistory((prev) => [
+      ...prev,
+      {
+        time: (/* @__PURE__ */ new Date()).toLocaleTimeString(),
+        status: isFormReady,
+        event: isFormReady ? "Form Ready" : "Form Not Ready"
+      }
+    ]);
+  }, [isFormReady]);
+  const handleMountForm = () => {
+    setFormMounted(true);
+  };
+  const handleUnmountForm = () => {
+    setFormMounted(false);
+  };
+  const handleSetValue = () => {
+    if (isFormReady) {
+      form.setFieldValue("email", "test@example.com");
+      form.setFieldValue("message", "Hello from ready form!");
+    } else {
+    }
+  };
+  const clearHistory = () => {
+    setStatusHistory([]);
+  };
+  return _jsxs("div", { style: { padding: 24 }, children: [_jsx(Title, { level: 3, children: "TestCase4: useForm Returns Status Flag" }), _jsxs(Paragraph, { children: [_jsx(Text, { strong: true, children: "Breaking Change:" }), " useForm() b\xE2y gi\u1EDD tr\u1EA3 v\u1EC1 tuple [instance, isReady]"] }), _jsx(Paragraph, { children: _jsx(Text, { type: "secondary", children: "isReady flag cho bi\u1EBFt Form \u0111\xE3 mount v\xE0 s\u1EB5n s\xE0ng nh\u1EADn calls hay ch\u01B0a. C\xF3 th\u1EC3 d\xF9ng \u0111\u1EC3 conditionally enable/disable features d\u1EF1a tr\xEAn Form state." }) }), _jsx("div", { style: {
+    marginBottom: 24,
+    padding: 16,
+    background: "#fafafa",
+    border: "1px solid #d9d9d9"
+  }, children: _jsxs(Space, { size: "large", children: [_jsxs("div", { children: [_jsx(Text, { strong: true, children: "Form Ready Status: " }), _jsx(Badge, { status: isFormReady ? "success" : "error", text: _jsx(Text, { strong: true, style: { color: isFormReady ? "#52c41a" : "#ff4d4f" }, children: isFormReady ? "READY" : "NOT READY" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "Form Mounted: " }), _jsx(Tag, { color: formMounted ? "green" : "red", children: formMounted ? "YES" : "NO" })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "FormName: " }), _jsx(Text, { code: true, children: form.formName })] })] }) }), _jsxs(Space, { style: { marginBottom: 24 }, wrap: true, children: [!formMounted ? _jsx(Button, { onClick: handleMountForm, type: "primary", size: "large", children: "Mount Form" }) : _jsx(Button, { onClick: handleUnmountForm, danger: true, size: "large", children: "Unmount Form" }), _jsxs(Button, { onClick: handleSetValue, disabled: !isFormReady, type: isFormReady ? "primary" : "default", children: ["Set Values ", !isFormReady && "(Disabled - Form Not Ready)"] }), _jsx(Button, { onClick: clearHistory, children: "Clear History" })] }), _jsxs("div", { style: { display: "flex", gap: 24 }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx(Title, { level: 5, children: "Status Change History:" }), _jsx("div", { style: {
+    border: "1px solid #d9d9d9",
+    padding: 16,
+    height: 300,
+    overflow: "auto",
+    background: "#ffffff"
+  }, children: statusHistory.length === 0 ? _jsx(Text, { type: "secondary", children: "No status changes yet..." }) : _jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [_jsx("thead", { children: _jsxs("tr", { style: { borderBottom: "2px solid #d9d9d9" }, children: [_jsx("th", { style: { padding: 8, textAlign: "left" }, children: "Time" }), _jsx("th", { style: { padding: 8, textAlign: "left" }, children: "Status" }), _jsx("th", { style: { padding: 8, textAlign: "left" }, children: "Event" })] }) }), _jsx("tbody", { children: statusHistory.map((entry, index) => _jsxs("tr", { style: {
+    borderBottom: "1px solid #f0f0f0",
+    background: index % 2 === 0 ? "#fafafa" : "#ffffff"
+  }, children: [_jsx("td", { style: {
+    padding: 8,
+    fontFamily: "monospace",
+    fontSize: 12
+  }, children: entry.time }), _jsx("td", { style: { padding: 8 }, children: _jsx(Tag, { color: entry.status ? "green" : "red", children: entry.status ? "TRUE" : "FALSE" }) }), _jsx("td", { style: { padding: 8 }, children: entry.event })] }, index)) })] }) })] }), _jsxs("div", { style: { flex: 1 }, children: [_jsx(Title, { level: 5, children: "Form Panel:" }), formMounted ? _jsx("div", { style: { border: "2px solid #52c41a", padding: 16 }, children: _jsxs(Form, { form, initialValues: { email: "", message: "" }, onFinish: (values) => {
+    alert(`Submitted: ${JSON.stringify(values, null, 2)}`);
+  }, children: [_jsx(Form.Item, { name: "email", label: "Email", children: _jsx("input", { type: "email", placeholder: "Enter email", style: { padding: 8, width: "100%" } }) }), _jsx(Form.Item, { name: "message", label: "Message", children: _jsx("textarea", { placeholder: "Enter message", rows: 4, style: { padding: 8, width: "100%" } }) }), _jsx(Button, { type: "primary", htmlType: "submit", children: "Submit" })] }) }) : _jsx("div", { style: {
+    border: "2px dashed #d9d9d9",
+    padding: 16,
+    height: 300,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "#fafafa"
+  }, children: _jsxs("div", { style: { textAlign: "center" }, children: [_jsx(Text, { type: "secondary", style: { fontSize: 16 }, children: "Form is not mounted" }), _jsx("br", {}), _jsx(Button, { type: "primary", onClick: handleMountForm, style: { marginTop: 16 }, children: "Mount Form" })] }) })] })] }), _jsxs("div", { style: { marginTop: 24, padding: 16, background: "#f5f5f5" }, children: [_jsx(Title, { level: 5, children: "Expected Results:" }), _jsxs("ul", { children: [_jsx("li", { children: "\u2705 Initial state: isReady = false (logged in history)" }), _jsx("li", { children: '\u2705 Click "Mount Form" \u2192 isReady changes to true (logged in history)' }), _jsx("li", { children: '\u2705 "Set Values" button becomes enabled when isReady = true' }), _jsx("li", { children: '\u2705 Click "Set Values" \u2192 Form values update successfully' }), _jsx("li", { children: '\u2705 Click "Unmount Form" \u2192 isReady changes back to false (logged in history)' }), _jsx("li", { children: '\u2705 "Set Values" button becomes disabled again' }), _jsx("li", { children: "\u2705 Status badge and tag update in real-time" })] })] })] });
+}
+export {
+  TestCase4_UseFormStatusFlag as default
+};