react-form-manage 1.1.0-beta.1 → 1.1.0-beta.3

package/CHANGELOG.md

@@ -2,6 +2,52 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.1.0-beta.3] - 2026-03-03
+
+### Type Fix
+
+- **PublicFormInstance.setFieldValues**: Corrected options parameter type from `SetFieldValueOptions` to `OnChangeOptions`
+  - `setFieldValues` does not support `deepTrigger` option (only available in `setFieldValue`)
+  - Now correctly reflects the actual implementation
+
+### Technical Details
+
+- `SetFieldValueOptions` extends `OnChangeOptions` with additional `deepTrigger?: boolean`
+- `setFieldValue` (singular): Supports `deepTrigger` for nested field updates
+- `setFieldValues` (plural): Batch updates without `deepTrigger` support
+
+## [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

package/dist/test/testFormInstance/TestCase1_FormWithInstance.js

@@ -13,7 +13,7 @@ function TestCase1_FormWithInstance() {
   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) => {
+  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 {

package/dist/test/testFormInstance/TestCase3_SafeFormMethods.js

@@ -8,7 +8,10 @@ function TestCase3_SafeFormMethods() {
   const [formMounted, setFormMounted] = useState(false);
   const [logs, setLogs] = useState([]);
   const addLog = (message) => {
-    setLogs((prev) => [...prev, `[${(/* @__PURE__ */ new Date()).toLocaleTimeString()}] ${message}`]);
+    setLogs((prev) => [
+      ...prev,
+      `[${(/* @__PURE__ */ new Date()).toLocaleTimeString()}] ${message}`
+    ]);
   };
   const handleSetValueBeforeMount = () => {
     addLog("\u{1F534} Calling setFieldValue BEFORE Form mount");

package/dist/test/testFormInstance/TestCase4_UseFormStatusFlag.js

@@ -33,7 +33,12 @@ function TestCase4_UseFormStatusFlag() {
   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: {
+  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,
@@ -42,7 +47,11 @@ function TestCase4_UseFormStatusFlag() {
   }, 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) => {
+  }, 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",

package/dist/test/testFormInstance/TestCase5_UseFormUtils.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Space, Typography, Card, Input, message } from "antd";
+import { Button, Card, Input, message, Space, Typography } from "antd";
 import { useState } from "react";
 import Form from "../../providers/Form";
 const { Title, Paragraph, Text } = Typography;
@@ -58,7 +58,12 @@ function TestCase5_UseFormUtils() {
     message.success(`Form 1 submitted: ${JSON.stringify(values)}`);
   }, children: [_jsx(Form.Item, { name: "username", label: "Username", children: _jsx(Input, { placeholder: "Username" }) }), _jsx(Form.Item, { name: "email", label: "Email", children: _jsx(Input, { type: "email", placeholder: "Email" }) }), _jsx(Button, { type: "primary", htmlType: "submit", children: "Submit Form 1" })] }) }) }), _jsx("div", { style: { flex: 1 }, children: _jsx(Card, { title: "Form 2 (formName='form2')", children: _jsxs(Form, { formName: "form2", initialValues: { username: "", email: "" }, onFinish: (values) => {
     message.success(`Form 2 submitted: ${JSON.stringify(values)}`);
-  }, children: [_jsx(Form.Item, { name: "username", label: "Username", children: _jsx(Input, { placeholder: "Username" }) }), _jsx(Form.Item, { name: "email", label: "Email", children: _jsx(Input, { type: "email", placeholder: "Email" }) }), _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 Control panel starts with target "form1"' }), _jsx("li", { children: `\u2705 Click "Set Single Value" \u2192 Form 1's username field updates to "admin"` }), _jsx("li", { children: `\u2705 Click "Set Multiple Values" \u2192 Form 1's both fields update` }), _jsx("li", { children: '\u2705 Click "Get Form Instance" \u2192 Console logs form instance and current values' }), _jsx("li", { children: '\u2705 Change target to "form2" in input' }), _jsx("li", { children: `\u2705 Click "Set Single Value" \u2192 Form 2's username field updates` }), _jsx("li", { children: '\u2705 Click "Reset Form" \u2192 Target form resets to initialValues' }), _jsx("li", { children: '\u2705 Click "Submit Form" \u2192 Target form submits programmatically' }), _jsx("li", { children: '\u26A0\uFE0F Enter invalid formName \u2192 Error message shows "Form instance not found"' })] })] }), _jsxs("div", { style: { marginTop: 16, padding: 16, background: "#e6f7ff", border: "1px solid #91d5ff" }, children: [_jsx(Title, { level: 5, children: "Use Cases:" }), _jsxs("ul", { style: { marginBottom: 0 }, children: [_jsx("li", { children: "Global control panels \u0111\u1EC3 qu\u1EA3n l\xFD multiple forms" }), _jsx("li", { children: "External triggers (t\u1EEB API response, WebSocket, events...)" }), _jsx("li", { children: "Cross-component form manipulation" }), _jsx("li", { children: "Testing v\xE0 debugging tools" }), _jsx("li", { children: "Admin dashboards v\u1EDBi form management" })] })] })] });
+  }, children: [_jsx(Form.Item, { name: "username", label: "Username", children: _jsx(Input, { placeholder: "Username" }) }), _jsx(Form.Item, { name: "email", label: "Email", children: _jsx(Input, { type: "email", placeholder: "Email" }) }), _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 Control panel starts with target "form1"' }), _jsx("li", { children: `\u2705 Click "Set Single Value" \u2192 Form 1's username field updates to "admin"` }), _jsx("li", { children: `\u2705 Click "Set Multiple Values" \u2192 Form 1's both fields update` }), _jsx("li", { children: '\u2705 Click "Get Form Instance" \u2192 Console logs form instance and current values' }), _jsx("li", { children: '\u2705 Change target to "form2" in input' }), _jsx("li", { children: `\u2705 Click "Set Single Value" \u2192 Form 2's username field updates` }), _jsx("li", { children: '\u2705 Click "Reset Form" \u2192 Target form resets to initialValues' }), _jsx("li", { children: '\u2705 Click "Submit Form" \u2192 Target form submits programmatically' }), _jsx("li", { children: '\u26A0\uFE0F Enter invalid formName \u2192 Error message shows "Form instance not found"' })] })] }), _jsxs("div", { style: {
+    marginTop: 16,
+    padding: 16,
+    background: "#e6f7ff",
+    border: "1px solid #91d5ff"
+  }, children: [_jsx(Title, { level: 5, children: "Use Cases:" }), _jsxs("ul", { style: { marginBottom: 0 }, children: [_jsx("li", { children: "Global control panels \u0111\u1EC3 qu\u1EA3n l\xFD multiple forms" }), _jsx("li", { children: "External triggers (t\u1EEB API response, WebSocket, events...)" }), _jsx("li", { children: "Cross-component form manipulation" }), _jsx("li", { children: "Testing v\xE0 debugging tools" }), _jsx("li", { children: "Admin dashboards v\u1EDBi form management" })] })] })] });
 }
 export {
   TestCase5_UseFormUtils as default

package/dist/test/testFormInstance/TestCase6_FormWithoutWrapper.js

@@ -38,7 +38,17 @@ function TestCase6_FormWithoutWrapper() {
     form.submit();
   };
   const fullName = `${firstName || ""} ${lastName || ""}`.trim() || "(empty)";
-  return _jsxs("div", { style: { padding: 24 }, children: [_jsx(Title, { level: 3, children: "TestCase6: Form Without Wrapper Component" }), _jsxs(Paragraph, { children: [_jsx(Text, { strong: true, children: "Use Case:" }), " S\u1EED d\u1EE5ng form instance nh\u01B0 state manager m\xE0 kh\xF4ng c\u1EA7n Form component"] }), _jsx(Paragraph, { children: _jsx(Text, { type: "secondary", children: "Form instance c\xF3 th\u1EC3 ho\u1EA1t \u0111\u1ED9ng \u0111\u1ED9c l\u1EADp nh\u01B0 m\u1ED9t state manager. H\u1EEFu \xEDch cho custom form implementations, headless forms, ho\u1EB7c khi b\u1EA1n mu\u1ED1n t\u1EF1 build UI m\xE0 kh\xF4ng d\xF9ng Form component wrapper." }) }), _jsxs("div", { style: { display: "flex", gap: 24 }, children: [_jsx(Card, { title: "\u{1F4DD} Manual Inputs (Not Connected to Form)", style: { flex: 1 }, children: _jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [_jsxs("div", { children: [_jsx(Text, { strong: true, children: "First Name:" }), _jsx(Input, { value: manualFirstName, onChange: (e) => setManualFirstName(e.target.value), placeholder: "Enter first name" })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "Last Name:" }), _jsx(Input, { value: manualLastName, onChange: (e) => setManualLastName(e.target.value), placeholder: "Enter last name" })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "Age:" }), _jsx(Input, { type: "number", value: manualAge, onChange: (e) => setManualAge(e.target.value), placeholder: "Enter age" })] }), _jsx(Button, { type: "primary", onClick: handleSetFromManualInputs, block: true, children: "Set Form Values" })] }) }), _jsx(Card, { title: "\u{1F441}\uFE0F Form State (via useWatch)", style: { flex: 1 }, children: _jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [_jsxs("div", { children: [_jsx(Text, { strong: true, children: "First Name: " }), _jsx(Text, { code: true, children: firstName || "(empty)" })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "Last Name: " }), _jsx(Text, { code: true, children: lastName || "(empty)" })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "Age: " }), _jsx(Text, { code: true, children: age != null ? age : "(empty)" })] }), _jsxs("div", { style: { marginTop: 16, padding: 12, background: "#f0f0f0" }, children: [_jsx(Text, { strong: true, children: "Computed Full Name: " }), _jsx(Text, { style: { fontSize: 16 }, children: fullName })] })] }) })] }), _jsxs(Card, { title: "\u{1F3AE} Form Controls", style: { marginTop: 24 }, children: [_jsxs(Space, { wrap: true, children: [_jsx(Button, { onClick: handleSetBatch, type: "primary", children: "Set Batch Values (John Doe, 30)" }), _jsx(Button, { onClick: handleGetValues, children: "Get All Values (Alert)" }), _jsx(Button, { onClick: handleReset, danger: true, children: "Reset Form" }), _jsx(Button, { onClick: handleSubmit, type: "dashed", children: "Submit Form (Will Log Warning)" })] }), _jsxs("div", { style: { marginTop: 16, padding: 12, background: "#fff7e6", border: "1px solid #ffd591" }, children: [_jsx(Text, { strong: true, children: "\u26A0\uFE0F Note: " }), _jsx(Text, { children: "Kh\xF4ng c\xF3 Form component \u0111\u01B0\u1EE3c render. Form instance ho\u1EA1t \u0111\u1ED9ng nh\u01B0 pure state manager. Submit s\u1EBD log warning v\xEC kh\xF4ng c\xF3 onFinish handler." })] })] }), _jsxs("div", { style: { marginTop: 24, padding: 16, background: "#f5f5f5" }, children: [_jsx(Title, { level: 5, children: "Expected Results:" }), _jsxs("ul", { children: [_jsx("li", { children: "\u2705 Type in manual inputs \u2192 Values NOT auto-sync to form state" }), _jsx("li", { children: '\u2705 Click "Set Form Values" \u2192 Form state updates, display panel shows new values' }), _jsx("li", { children: "\u2705 Display panel updates reactively via useWatch" }), _jsx("li", { children: '\u2705 Click "Set Batch Values" \u2192 All fields update at once' }), _jsx("li", { children: '\u2705 Click "Get All Values" \u2192 Alert shows current form values' }), _jsx("li", { children: '\u2705 Click "Reset Form" \u2192 All fields reset (empty)' }), _jsx("li", { children: "\u2705 Computed Full Name updates based on firstName + lastName" }), _jsx("li", { children: '\u26A0\uFE0F Click "Submit Form" \u2192 Console shows warning (no Form component mounted)' })] })] }), _jsxs("div", { style: { marginTop: 16, padding: 16, background: "#e6f7ff", border: "1px solid #91d5ff" }, children: [_jsx(Title, { level: 5, children: "Use Cases:" }), _jsxs("ul", { style: { marginBottom: 0 }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Headless Forms:" }), " Build custom UI m\xE0 kh\xF4ng b\u1ECB constraint b\u1EDFi Form component"] }), _jsxs("li", { children: [_jsx("strong", { children: "State Manager:" }), " S\u1EED d\u1EE5ng nh\u01B0 lightweight state manager v\u1EDBi validation support"] }), _jsxs("li", { children: [_jsx("strong", { children: "Multi-step Forms:" }), " Qu\u1EA3n l\xFD form state across multiple steps/pages"] }), _jsxs("li", { children: [_jsx("strong", { children: "Form Wizards:" }), " Share form instance between different wizard steps"] }), _jsxs("li", { children: [_jsx("strong", { children: "Custom Integrations:" }), " Integrate v\u1EDBi third-party UI libraries"] })] })] })] });
+  return _jsxs("div", { style: { padding: 24 }, children: [_jsx(Title, { level: 3, children: "TestCase6: Form Without Wrapper Component" }), _jsxs(Paragraph, { children: [_jsx(Text, { strong: true, children: "Use Case:" }), " S\u1EED d\u1EE5ng form instance nh\u01B0 state manager m\xE0 kh\xF4ng c\u1EA7n Form component"] }), _jsx(Paragraph, { children: _jsx(Text, { type: "secondary", children: "Form instance c\xF3 th\u1EC3 ho\u1EA1t \u0111\u1ED9ng \u0111\u1ED9c l\u1EADp nh\u01B0 m\u1ED9t state manager. H\u1EEFu \xEDch cho custom form implementations, headless forms, ho\u1EB7c khi b\u1EA1n mu\u1ED1n t\u1EF1 build UI m\xE0 kh\xF4ng d\xF9ng Form component wrapper." }) }), _jsxs("div", { style: { display: "flex", gap: 24 }, children: [_jsx(Card, { title: "\u{1F4DD} Manual Inputs (Not Connected to Form)", style: { flex: 1 }, children: _jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [_jsxs("div", { children: [_jsx(Text, { strong: true, children: "First Name:" }), _jsx(Input, { value: manualFirstName, onChange: (e) => setManualFirstName(e.target.value), placeholder: "Enter first name" })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "Last Name:" }), _jsx(Input, { value: manualLastName, onChange: (e) => setManualLastName(e.target.value), placeholder: "Enter last name" })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "Age:" }), _jsx(Input, { type: "number", value: manualAge, onChange: (e) => setManualAge(e.target.value), placeholder: "Enter age" })] }), _jsx(Button, { type: "primary", onClick: handleSetFromManualInputs, block: true, children: "Set Form Values" })] }) }), _jsx(Card, { title: "\u{1F441}\uFE0F Form State (via useWatch)", style: { flex: 1 }, children: _jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [_jsxs("div", { children: [_jsx(Text, { strong: true, children: "First Name: " }), _jsx(Text, { code: true, children: firstName || "(empty)" })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "Last Name: " }), _jsx(Text, { code: true, children: lastName || "(empty)" })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "Age: " }), _jsx(Text, { code: true, children: age != null ? age : "(empty)" })] }), _jsxs("div", { style: { marginTop: 16, padding: 12, background: "#f0f0f0" }, children: [_jsx(Text, { strong: true, children: "Computed Full Name: " }), _jsx(Text, { style: { fontSize: 16 }, children: fullName })] })] }) })] }), _jsxs(Card, { title: "\u{1F3AE} Form Controls", style: { marginTop: 24 }, children: [_jsxs(Space, { wrap: true, children: [_jsx(Button, { onClick: handleSetBatch, type: "primary", children: "Set Batch Values (John Doe, 30)" }), _jsx(Button, { onClick: handleGetValues, children: "Get All Values (Alert)" }), _jsx(Button, { onClick: handleReset, danger: true, children: "Reset Form" }), _jsx(Button, { onClick: handleSubmit, type: "dashed", children: "Submit Form (Will Log Warning)" })] }), _jsxs("div", { style: {
+    marginTop: 16,
+    padding: 12,
+    background: "#fff7e6",
+    border: "1px solid #ffd591"
+  }, children: [_jsx(Text, { strong: true, children: "\u26A0\uFE0F Note: " }), _jsx(Text, { children: "Kh\xF4ng c\xF3 Form component \u0111\u01B0\u1EE3c render. Form instance ho\u1EA1t \u0111\u1ED9ng nh\u01B0 pure state manager. Submit s\u1EBD log warning v\xEC kh\xF4ng c\xF3 onFinish handler." })] })] }), _jsxs("div", { style: { marginTop: 24, padding: 16, background: "#f5f5f5" }, children: [_jsx(Title, { level: 5, children: "Expected Results:" }), _jsxs("ul", { children: [_jsx("li", { children: "\u2705 Type in manual inputs \u2192 Values NOT auto-sync to form state" }), _jsx("li", { children: '\u2705 Click "Set Form Values" \u2192 Form state updates, display panel shows new values' }), _jsx("li", { children: "\u2705 Display panel updates reactively via useWatch" }), _jsx("li", { children: '\u2705 Click "Set Batch Values" \u2192 All fields update at once' }), _jsx("li", { children: '\u2705 Click "Get All Values" \u2192 Alert shows current form values' }), _jsx("li", { children: '\u2705 Click "Reset Form" \u2192 All fields reset (empty)' }), _jsx("li", { children: "\u2705 Computed Full Name updates based on firstName + lastName" }), _jsx("li", { children: '\u26A0\uFE0F Click "Submit Form" \u2192 Console shows warning (no Form component mounted)' })] })] }), _jsxs("div", { style: {
+    marginTop: 16,
+    padding: 16,
+    background: "#e6f7ff",
+    border: "1px solid #91d5ff"
+  }, children: [_jsx(Title, { level: 5, children: "Use Cases:" }), _jsxs("ul", { style: { marginBottom: 0 }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Headless Forms:" }), " Build custom UI m\xE0 kh\xF4ng b\u1ECB constraint b\u1EDFi Form component"] }), _jsxs("li", { children: [_jsx("strong", { children: "State Manager:" }), " S\u1EED d\u1EE5ng nh\u01B0 lightweight state manager v\u1EDBi validation support"] }), _jsxs("li", { children: [_jsx("strong", { children: "Multi-step Forms:" }), " Qu\u1EA3n l\xFD form state across multiple steps/pages"] }), _jsxs("li", { children: [_jsx("strong", { children: "Form Wizards:" }), " Share form instance between different wizard steps"] }), _jsxs("li", { children: [_jsx("strong", { children: "Custom Integrations:" }), " Integrate v\u1EDBi third-party UI libraries"] })] })] })] });
 }
 export {
   TestCase6_FormWithoutWrapper as default

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

@@ -0,0 +1 @@
+export default function TestCase7_SetValueInEffect(): import("react/jsx-runtime").JSX.Element;

package/dist/test/testFormInstance/TestCase7_SetValueInEffect.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Card, Space, Tag, Typography } from "antd";
+import { useEffect, useState } from "react";
+import Form from "../../providers/Form";
+const { Title, Paragraph, Text } = Typography;
+function FormWithTimeout({ delay = 2e3 }) {
+  const [form] = Form.useForm();
+  const [logs, setLogs] = useState([]);
+  const [timeoutTriggered, setTimeoutTriggered] = useState(false);
+  const addLog = (message) => {
+    const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+    setLogs((prev) => [...prev, `[${timestamp}] ${message}`]);
+  };
+  useEffect(() => {
+    addLog(`\u23F0 setTimeout created with ${delay}ms delay`);
+    const timer = setTimeout(() => {
+      addLog("\u{1F514} Timeout triggered! Calling setFieldValue...");
+      form.setFieldValue("username", "admin_from_timeout");
+      form.setFieldValue("email", "admin@timeout.com");
+      form.setFieldValue("status", "loaded");
+      addLog("\u2705 setFieldValue completed successfully");
+      setTimeoutTriggered(true);
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+      addLog("\u{1F9F9} Timeout cleared (cleanup)");
+    };
+  }, [delay, form]);
+  const handleManualSet = () => {
+    form.setFieldValue("username", "manual_user");
+    form.setFieldValue("email", "manual@example.com");
+    form.setFieldValue("status", "manual");
+    addLog("\u270B Manual setValue called");
+  };
+  const handleReset = () => {
+    form.resetFields();
+    addLog("\u{1F504} Form reset");
+  };
+  return _jsxs("div", { style: { display: "flex", gap: 24 }, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(Card, { title: "\u{1F4DD} Event Logs", extra: _jsx(Tag, { color: timeoutTriggered ? "success" : "processing", children: timeoutTriggered ? "Timeout Triggered" : "Waiting..." }), children: _jsx("div", { style: {
+    height: 400,
+    overflow: "auto",
+    background: "#fafafa",
+    padding: 12,
+    fontFamily: "monospace",
+    fontSize: 12,
+    border: "1px solid #d9d9d9"
+  }, children: logs.length === 0 ? _jsx(Text, { type: "secondary", children: "No logs yet..." }) : logs.map((log, index) => _jsx("div", { style: { marginBottom: 4 }, children: log }, index)) }) }) }), _jsx("div", { style: { flex: 1 }, children: _jsx(Card, { title: "\u{1F4CB} Form", extra: _jsxs(Space, { children: [_jsx(Button, { onClick: handleManualSet, size: "small", children: "Manual Set" }), _jsx(Button, { onClick: handleReset, size: "small", danger: true, children: "Reset" })] }), children: _jsxs(Form, { form, initialValues: { username: "", email: "", status: "pending" }, onFinish: (values) => {
+    addLog(`\u{1F4E4} 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: "email", label: "Email", children: _jsx("input", { type: "email", placeholder: "Email", style: { padding: 8, width: "100%" } }) }), _jsx(Form.Item, { name: "status", label: "Status", children: _jsx("input", { type: "text", placeholder: "Status", style: { padding: 8, width: "100%" } }) }), _jsx(Button, { type: "primary", htmlType: "submit", children: "Submit Form" })] }) }) })] });
+}
+function TestCase7_SetValueInEffect() {
+  const [mounted, setMounted] = useState(true);
+  const [delay, setDelay] = useState(2e3);
+  const [key, setKey] = useState(0);
+  const handleRemount = () => {
+    setMounted(false);
+    setTimeout(() => {
+      setKey((k) => k + 1);
+      setMounted(true);
+    }, 100);
+  };
+  return _jsxs("div", { style: { padding: 24 }, children: [_jsx(Title, { level: 3, children: "TestCase7: Set Value in useEffect with Timeout" }), _jsxs(Paragraph, { children: [_jsx(Text, { strong: true, children: "Test Scenario:" }), " setValue \u0111\u01B0\u1EE3c g\u1ECDi trong useEffect v\u1EDBi setTimeout"] }), _jsx(Paragraph, { children: _jsx(Text, { type: "secondary", children: "Test case n\xE0y verify r\u1EB1ng form instance methods v\u1EABn ho\u1EA1t \u0111\u1ED9ng b\xECnh th\u01B0\u1EDDng khi \u0111\u01B0\u1EE3c g\u1ECDi t\u1EEB async callbacks (setTimeout). Timeout \u0111\u01B0\u1EE3c t\u1EA1o ngay khi component mount, v\xE0 sau khi trigger, setValue ph\u1EA3i ho\u1EA1t \u0111\u1ED9ng ch\xEDnh x\xE1c." }) }), _jsxs(Card, { title: "\u{1F3AE} Control Panel", style: { marginBottom: 24 }, extra: _jsx(Badge, { status: mounted ? "success" : "error", text: mounted ? "Mounted" : "Unmounted" }), children: [_jsxs(Space, { wrap: true, children: [_jsxs("div", { children: [_jsx(Text, { strong: true, children: "Delay (ms): " }), _jsx("input", { type: "number", value: delay, onChange: (e) => setDelay(Number(e.target.value)), style: { padding: 4, width: 100 }, min: 500, max: 1e4, step: 500 })] }), _jsx(Button, { onClick: handleRemount, type: "primary", children: "Remount Component (Reset Test)" }), mounted && _jsx(Button, { onClick: () => setMounted(false), danger: true, children: "Unmount (Test Cleanup)" }), !mounted && _jsx(Button, { onClick: () => setMounted(true), type: "primary", children: "Mount" })] }), _jsx("div", { style: {
+    marginTop: 16,
+    padding: 12,
+    background: "#fff7e6",
+    border: "1px solid #ffd591"
+  }, children: _jsxs(Text, { children: ["\u{1F4A1} ", _jsx("strong", { children: "Tip:" }), " Try unmounting the component before timeout triggers to test cleanup behavior"] }) })] }), mounted && _jsx(FormWithTimeout, { delay }, key), _jsxs("div", { style: { marginTop: 24, padding: 16, background: "#f5f5f5" }, children: [_jsx(Title, { level: 5, children: "Expected Results:" }), _jsxs("ul", { children: [_jsxs("li", { children: ['\u2705 Component mounts \u2192 Logs show "setTimeout created with ', delay, 'ms delay"'] }), _jsxs("li", { children: ["\u2705 After ", delay, 'ms \u2192 Logs show "Timeout triggered!" and "setFieldValue completed successfully"'] }), _jsx("li", { children: '\u2705 Form values update to: username="admin_from_timeout", etc.' }), _jsx("li", { children: '\u2705 Click "Manual Set" \u2192 Values change immediately' }), _jsx("li", { children: '\u2705 Click "Reset" \u2192 Form resets to initialValues' }), _jsx("li", { children: '\u2705 Click "Unmount" before timeout \u2192 Logs show cleanup, no error when timeout would trigger' }), _jsx("li", { children: "\u2705 Change delay and remount \u2192 New timeout with new delay" }), _jsx("li", { children: "\u2705 Submit form after timeout \u2192 Form submission works with updated values" })] })] }), _jsxs("div", { style: {
+    marginTop: 16,
+    padding: 16,
+    background: "#e6f7ff",
+    border: "1px solid #91d5ff"
+  }, children: [_jsx(Title, { level: 5, children: "Use Cases:" }), _jsxs("ul", { style: { marginBottom: 0 }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Async Data Loading:" }), " Load form data from API after component mount"] }), _jsxs("li", { children: [_jsx("strong", { children: "Delayed Initialization:" }), " Initialize form values after some delay"] }), _jsxs("li", { children: [_jsx("strong", { children: "Auto-save:" }), " Save form values periodically using setInterval"] }), _jsxs("li", { children: [_jsx("strong", { children: "Debounced Updates:" }), " Update form values with debounce/throttle"] }), _jsxs("li", { children: [_jsx("strong", { children: "WebSocket Updates:" }), " Update form when receiving real-time data"] })] })] })] });
+}
+export {
+  TestCase7_SetValueInEffect as default
+};

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

@@ -0,0 +1 @@
+export default function TestCase8_TypeSafetyImprovements(): import("react/jsx-runtime").JSX.Element;

package/dist/test/testFormInstance/TestCase8_TypeSafetyImprovements.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Card, Space, Table, Typography } from "antd";
+import { useState } from "react";
+import Form from "../../providers/Form";
+const { Title, Paragraph, Text } = Typography;
+function TestCase8_TypeSafetyImprovements() {
+  const [form] = Form.useForm();
+  const [logs, setLogs] = useState([]);
+  const [fieldErrors, setFieldErrors] = useState([]);
+  const addLog = (message) => {
+    const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+    setLogs((prev) => [...prev, `[${timestamp}] ${message}`]);
+  };
+  const handleSetTypedFields = () => {
+    form.setFieldValue("username", "admin");
+    form.setFieldValue("email", "admin@test.com");
+    form.setFieldValue("age", 25);
+    addLog("\u2705 Set typed fields: username, email, age");
+  };
+  const handleSetDynamicFields = () => {
+    form.setFieldValue("dynamicField1", "value1");
+    form.setFieldValue("dynamicField2", "value2");
+    addLog("\u2705 Set dynamic fields: dynamicField1, dynamicField2");
+  };
+  const handleGetValues = () => {
+    const username = form.getFieldValue("username");
+    const email = form.getFieldValue("email");
+    const age = form.getFieldValue("age");
+    const dynamic = form.getFieldValue("dynamicField1");
+    addLog(`\u{1F4D6} Get values: username=${username}, email=${email}, age=${age}, dynamic=${dynamic}`);
+  };
+  const handleGetFieldErrors = () => {
+    const errors = form.getFieldErrors(["username", "email", "age"]);
+    setFieldErrors(errors);
+    addLog(`\u{1F50D} getFieldErrors returned ${errors.length} results (check table)`);
+  };
+  const handleSubmitAsync = async () => {
+    try {
+      addLog("\u{1F680} Calling submitAsync...");
+      const result = await form.submitAsync();
+      addLog(`\u2705 submitAsync completed. Result type: ${typeof result} (should be undefined)`);
+    } catch (error) {
+      addLog(`\u274C submitAsync error: ${error}`);
+    }
+  };
+  const handleGetMultipleValues = () => {
+    const values = form.getFieldValues(["username", "email", "age"]);
+    addLog(`\u{1F4DA} getFieldValues: ${JSON.stringify(values)}`);
+  };
+  const clearLogs = () => {
+    setLogs([]);
+  };
+  const clearErrors = () => {
+    setFieldErrors([]);
+  };
+  const errorColumns = [
+    {
+      title: "Field Name",
+      dataIndex: "name",
+      key: "name",
+      render: (text) => _jsx(Text, { code: true, children: text })
+    },
+    {
+      title: "Errors Count",
+      dataIndex: "errors",
+      key: "count",
+      render: (errors) => _jsx(Badge, { count: errors.length, showZero: true, color: errors.length > 0 ? "red" : "green" })
+    },
+    {
+      title: "Error Details",
+      dataIndex: "errors",
+      key: "details",
+      render: (errors) => errors.length > 0 ? _jsx("div", { children: errors.map((err, idx) => _jsx("div", { style: { fontSize: 12 }, children: err.message }, idx)) }) : _jsx(Text, { type: "secondary", children: "No errors" })
+    }
+  ];
+  return _jsxs("div", { style: { padding: 24 }, children: [_jsx(Title, { level: 3, children: "TestCase8: Type Safety Improvements" }), _jsxs(Paragraph, { children: [_jsx(Text, { strong: true, children: "Test Focus:" }), " Verify type improvements trong PublicFormInstance"] }), _jsx(Paragraph, { children: _jsxs(Text, { type: "secondary", children: ["Test case n\xE0y validate c\xE1c type changes m\u1EDBi: dynamic field names ", `(keyof T |
+          (string & {}))`, ", getFieldErrors return type, v\xE0 submitAsync Promise", "<", "void", ">", "."] }) }), _jsx(Card, { title: "\u{1F4DD} Type Information", style: { marginBottom: 24 }, children: _jsxs("div", { style: { background: "#f5f5f5", padding: 16, fontFamily: "monospace", fontSize: 12 }, children: [_jsxs("div", { children: [_jsx(Text, { strong: true, children: "Form Type:" }), " ", _jsxs(Text, { code: true, children: ["StrictFormValues = ", `{ username: string; email: string; age: number }`] })] }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Text, { strong: true, children: "New Types:" }) }), _jsxs("ul", { style: { marginLeft: 20, marginTop: 4 }, children: [_jsxs("li", { children: [_jsx(Text, { code: true, children: `name: keyof T | (string & {})` }), " - Supports dynamic fields"] }), _jsx("li", { children: _jsx(Text, { code: true, children: `getFieldErrors: (...) => Array<{ name: string; errors: FormFieldError[] }>` }) }), _jsx("li", { children: _jsx(Text, { code: true, children: `submitAsync: (...) => Promise<void>` }) })] })] }) }), _jsxs("div", { style: { display: "flex", gap: 24 }, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(Card, { title: "\u{1F3AE} Test Controls", children: _jsxs(Space, { direction: "vertical", style: { width: "100%" }, size: "middle", children: [_jsxs("div", { children: [_jsx(Text, { strong: true, children: "1. Typed Field Names:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Button, { onClick: handleSetTypedFields, type: "primary", block: true, children: "Set Typed Fields (username, email, age)" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "2. Dynamic Field Names:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Button, { onClick: handleSetDynamicFields, block: true, children: "Set Dynamic Fields (not in type)" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "3. Get Values:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Button, { onClick: handleGetValues, block: true, children: "Get All Field Values" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "4. Get Field Errors:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Button, { onClick: handleGetFieldErrors, block: true, children: "Get Field Errors (New Type)" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "5. Multiple Values:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsx(Button, { onClick: handleGetMultipleValues, block: true, children: "Get Multiple Values" }) })] }), _jsxs("div", { children: [_jsx(Text, { strong: true, children: "6. Submit Async:" }), _jsx("div", { style: { marginTop: 8 }, children: _jsxs(Button, { onClick: handleSubmitAsync, type: "dashed", block: true, children: ["Test submitAsync (Promise", "<", "void", ">", ")"] }) })] }), _jsxs(Space, { style: { width: "100%", justifyContent: "space-between" }, children: [_jsx(Button, { onClick: clearLogs, size: "small", children: "Clear Logs" }), _jsx(Button, { onClick: clearErrors, size: "small", children: "Clear Errors" })] })] }) }) }), _jsx("div", { style: { flex: 1 }, children: _jsx(Card, { title: "\u{1F4CB} Action Logs", children: _jsx("div", { style: {
+    height: 400,
+    overflow: "auto",
+    background: "#fafafa",
+    padding: 12,
+    fontFamily: "monospace",
+    fontSize: 12,
+    border: "1px solid #d9d9d9"
+  }, children: logs.length === 0 ? _jsx(Text, { type: "secondary", children: "No logs yet..." }) : logs.map((log, index) => _jsx("div", { style: { marginBottom: 4 }, children: log }, index)) }) }) })] }), _jsx(Card, { title: "\u{1F4CB} Form", style: { marginTop: 24 }, children: _jsxs(Form, { form, initialValues: { username: "", email: "", age: 0 }, onFinish: (values) => {
+    addLog(`\u2705 Form submitted: ${JSON.stringify(values)}`);
+  }, children: [_jsx(Form.Item, { name: "username", label: "Username", rules: [{ required: true, message: "Username is required" }], children: _jsx("input", { type: "text", placeholder: "Username", style: { padding: 8, width: "100%" } }) }), _jsx(Form.Item, { name: "email", label: "Email", rules: [
+    { required: true, message: "Email is required" },
+    { isEmail: true, message: "Invalid email format" }
+  ], children: _jsx("input", { type: "email", placeholder: "Email", style: { padding: 8, width: "100%" } }) }), _jsx(Form.Item, { name: "age", label: "Age", rules: [
+    { required: true, message: "Age is required" },
+    { min: 18, message: "Must be at least 18" }
+  ], children: _jsx("input", { type: "number", placeholder: "Age", style: { padding: 8, width: "100%" } }) }), _jsx(Button, { type: "primary", htmlType: "submit", children: "Submit Form" })] }) }), fieldErrors.length > 0 && _jsxs(Card, { title: "\u{1F50D} Field Errors (getFieldErrors Result)", style: { marginTop: 24 }, children: [_jsx(Table, { dataSource: fieldErrors, columns: errorColumns, rowKey: "name", pagination: false, size: "small" }), _jsx("div", { style: { marginTop: 16, padding: 12, background: "#f0f0f0" }, children: _jsxs(Text, { type: "secondary", children: ["\u2705 Return type:", " ", _jsx(Text, { code: true, children: `Array<{ name: string; errors: FormFieldError[] }>` })] }) })] }), _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 Typed Fields" \u2192 Values set for username, email, age' }), _jsx("li", { children: '\u2705 Click "Set Dynamic Fields" \u2192 Dynamic fields work (not in StrictFormValues type)' }), _jsx("li", { children: '\u2705 Click "Get All Field Values" \u2192 Shows all field values including dynamic' }), _jsx("li", { children: '\u2705 Click "Get Field Errors" \u2192 Returns array with name and errors properties' }), _jsxs("li", { children: ['\u2705 Click "Get Multiple Values" \u2192 Returns array of ', `{ name, value }`, " objects"] }), _jsxs("li", { children: ['\u2705 Click "Test submitAsync" \u2192 Returns Promise', "<", "void", ">", " (result is undefined)"] }), _jsx("li", { children: "\u2705 Submit form with empty fields \u2192 Validation errors appear in getFieldErrors" }), _jsx("li", { children: "\u2705 Fill form and submit \u2192 onFinish triggered, no validation errors" })] })] }), _jsxs("div", { style: {
+    marginTop: 16,
+    padding: 16,
+    background: "#e6f7ff",
+    border: "1px solid #91d5ff"
+  }, children: [_jsx(Title, { level: 5, children: "Type Improvements Summary:" }), _jsxs("ul", { style: { marginBottom: 0 }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Dynamic Field Names:" }), " ", _jsx(Text, { code: true, children: `keyof T | (string & {})` }), " cho ph\xE9p s\u1EED d\u1EE5ng \u0111\u1ED9ng field names kh\xF4ng c\xF3 trong type"] }), _jsxs("li", { children: [_jsx("strong", { children: "Proper getFieldErrors Type:" }), " Tr\u1EA3 v\u1EC1 array thay v\xEC Record, ch\xEDnh x\xE1c v\u1EDBi implementation"] }), _jsxs("li", { children: [_jsx("strong", { children: "submitAsync Type:" }), " ", _jsx(Text, { code: true, children: `Promise<void>` }), " thay v\xEC", " ", _jsx(Text, { code: true, children: `Promise<any>` }), " for better type safety"] }), _jsxs("li", { children: [_jsx("strong", { children: "Consistency:" }), " T\u1EA5t c\u1EA3 methods gi\u1EDD support c\xF9ng type pattern cho field names"] })] })] })] });
+}
+export {
+  TestCase8_TypeSafetyImprovements as default
+};

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

@@ -8,5 +8,7 @@
  * - useForm trả về [instance, isReady] tuple
  * - useFormUtils hook mới
  * - Form instance hoạt động độc lập như state manager
+ * - setValue trong useEffect với setTimeout (async behavior)
+ * - Type safety improvements (dynamic field names, getFieldErrors type, submitAsync type)
  */
 export default function FormInstanceTestSuite(): import("react/jsx-runtime").JSX.Element;

package/dist/test/testFormInstance/index.js

@@ -7,6 +7,8 @@ import TestCase3_SafeFormMethods from "./TestCase3_SafeFormMethods";
 import TestCase4_UseFormStatusFlag from "./TestCase4_UseFormStatusFlag";
 import TestCase5_UseFormUtils from "./TestCase5_UseFormUtils";
 import TestCase6_FormWithoutWrapper from "./TestCase6_FormWithoutWrapper";
+import TestCase7_SetValueInEffect from "./TestCase7_SetValueInEffect";
+import TestCase8_TypeSafetyImprovements from "./TestCase8_TypeSafetyImprovements";
 const { Title, Paragraph, Text } = Typography;
 function FormInstanceTestSuite() {
   const [activeTab, setActiveTab] = useState("1");
@@ -40,9 +42,24 @@ function FormInstanceTestSuite() {
       key: "6",
       label: "TestCase6: Form Without Wrapper",
       children: _jsx(TestCase6_FormWithoutWrapper, {})
+    },
+    {
+      key: "7",
+      label: "TestCase7: Set Value in Effect",
+      children: _jsx(TestCase7_SetValueInEffect, {})
+    },
+    {
+      key: "8",
+      label: "TestCase8: Type Safety",
+      children: _jsx(TestCase8_TypeSafetyImprovements, {})
     }
   ];
-  return _jsxs("div", { style: { padding: 24, maxWidth: 1400, margin: "0 auto" }, children: [_jsxs("div", { style: { marginBottom: 32 }, children: [_jsx(Title, { level: 2, children: "\u{1F9EA} Form Instance Test Suite" }), _jsx(Paragraph, { children: _jsx(Text, { children: "Test suite cho breaking changes v\xE0 new features trong version m\u1EDBi. M\u1ED7i test case cover m\u1ED9t aspect c\u1EE5 th\u1EC3 c\u1EE7a Form Instance behavior." }) })] }), _jsxs("div", { style: { marginBottom: 24, padding: 16, background: "#e6f7ff", border: "1px solid #91d5ff" }, children: [_jsx(Title, { level: 4, children: "\u{1F4CB} Breaking Changes & New Features:" }), _jsxs("ul", { style: { marginBottom: 0 }, children: [_jsxs("li", { children: [_jsx(Text, { strong: true, children: 'Form Prop "form":' }), " Form component c\xF3 th\u1EC3 nh\u1EADn ", _jsx(Text, { code: true, children: "form" }), " instance thay v\xEC ", _jsx(Text, { code: true, children: "formName" })] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "Auto-generate FormName:" }), " Form.useForm() t\u1EF1 \u0111\u1ED9ng t\u1EA1o UUID n\u1EBFu kh\xF4ng truy\u1EC1n tham s\u1ED1"] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "Safe Methods:" }), " Form methods c\xF3 th\u1EC3 g\u1ECDi an to\xE0n tr\u01B0\u1EDBc khi Form mount (proxy instance)"] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "useForm Tuple:" }), " useForm() tr\u1EA3 v\u1EC1 ", _jsx(Text, { code: true, children: "[instance, isReady]" }), " thay v\xEC ch\u1EC9 ", _jsx(Text, { code: true, children: "[instance]" })] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "useFormUtils Hook:" }), " Hook m\u1EDBi cho ph\xE9p thao t\xE1c form t\u1EEB b\xEAn ngo\xE0i component"] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "Headless Forms:" }), " Form instance ho\u1EA1t \u0111\u1ED9ng \u0111\u1ED9c l\u1EADp nh\u01B0 state manager"] })] })] }), _jsx(Tabs, { activeKey: activeTab, onChange: setActiveTab, items, size: "large", type: "card" }), _jsxs("div", { style: { marginTop: 32, padding: 16, background: "#f5f5f5" }, children: [_jsx(Title, { level: 5, children: "\u{1F4A1} Testing Tips:" }), _jsxs("ul", { style: { marginBottom: 0 }, children: [_jsx("li", { children: "M\u1EDF Browser Console \u0111\u1EC3 xem detailed logs v\xE0 warnings" }), _jsx("li", { children: "M\u1ED7i test case c\xF3 Expected Results section \u0111\u1EC3 verify behavior" }), _jsx("li", { children: "Test cases c\xF3 th\u1EC3 test \u0111\u1ED9c l\u1EADp, kh\xF4ng \u1EA3nh h\u01B0\u1EDFng l\u1EABn nhau" }), _jsx("li", { children: "Ch\xFA \xFD c\xE1c warning messages khi form methods \u0111\u01B0\u1EE3c g\u1ECDi sai timing" }), _jsx("li", { children: "Use Cases sections gi\u1EA3i th\xEDch khi n\xE0o n\xEAn d\xF9ng feature \u0111\xF3" })] })] })] });
+  return _jsxs("div", { style: { padding: 24, maxWidth: 1400, margin: "0 auto" }, children: [_jsxs("div", { style: { marginBottom: 32 }, children: [_jsx(Title, { level: 2, children: "\u{1F9EA} Form Instance Test Suite" }), _jsx(Paragraph, { children: _jsx(Text, { children: "Test suite cho breaking changes v\xE0 new features trong version m\u1EDBi. M\u1ED7i test case cover m\u1ED9t aspect c\u1EE5 th\u1EC3 c\u1EE7a Form Instance behavior." }) })] }), _jsxs("div", { style: {
+    marginBottom: 24,
+    padding: 16,
+    background: "#e6f7ff",
+    border: "1px solid #91d5ff"
+  }, children: [_jsx(Title, { level: 4, children: "\u{1F4CB} Breaking Changes & New Features:" }), _jsxs("ul", { style: { marginBottom: 0 }, children: [_jsxs("li", { children: [_jsx(Text, { strong: true, children: 'Form Prop "form":' }), " Form component c\xF3 th\u1EC3 nh\u1EADn", " ", _jsx(Text, { code: true, children: "form" }), " instance thay v\xEC ", _jsx(Text, { code: true, children: "formName" })] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "Auto-generate FormName:" }), " Form.useForm() t\u1EF1 \u0111\u1ED9ng t\u1EA1o UUID n\u1EBFu kh\xF4ng truy\u1EC1n tham s\u1ED1"] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "Safe Methods:" }), " Form methods c\xF3 th\u1EC3 g\u1ECDi an to\xE0n tr\u01B0\u1EDBc khi Form mount (proxy instance)"] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "useForm Tuple:" }), " useForm() tr\u1EA3 v\u1EC1", " ", _jsx(Text, { code: true, children: "[instance, isReady]" }), " thay v\xEC ch\u1EC9", " ", _jsx(Text, { code: true, children: "[instance]" })] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "useFormUtils Hook:" }), " Hook m\u1EDBi cho ph\xE9p thao t\xE1c form t\u1EEB b\xEAn ngo\xE0i component"] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "Headless Forms:" }), " Form instance ho\u1EA1t \u0111\u1ED9ng \u0111\u1ED9c l\u1EADp nh\u01B0 state manager"] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "Async Behavior:" }), " Form methods ho\u1EA1t \u0111\u1ED9ng v\u1EDBi async callbacks (setTimeout, Promise, etc.)"] }), _jsxs("li", { children: [_jsx(Text, { strong: true, children: "Type Improvements:" }), " Dynamic field names", " ", _jsx(Text, { code: true, children: `keyof T | (string & {})` }), ", proper getFieldErrors return type, submitAsync ", _jsx(Text, { code: true, children: "Promise<void>" })] })] })] }), _jsx(Tabs, { activeKey: activeTab, onChange: setActiveTab, items, size: "large", type: "card" }), _jsxs("div", { style: { marginTop: 32, padding: 16, background: "#f5f5f5" }, children: [_jsx(Title, { level: 5, children: "\u{1F4A1} Testing Tips:" }), _jsxs("ul", { style: { marginBottom: 0 }, children: [_jsx("li", { children: "M\u1EDF Browser Console \u0111\u1EC3 xem detailed logs v\xE0 warnings" }), _jsx("li", { children: "M\u1ED7i test case c\xF3 Expected Results section \u0111\u1EC3 verify behavior" }), _jsx("li", { children: "Test cases c\xF3 th\u1EC3 test \u0111\u1ED9c l\u1EADp, kh\xF4ng \u1EA3nh h\u01B0\u1EDFng l\u1EABn nhau" }), _jsx("li", { children: "Ch\xFA \xFD c\xE1c warning messages khi form methods \u0111\u01B0\u1EE3c g\u1ECDi sai timing" }), _jsx("li", { children: "Use Cases sections gi\u1EA3i th\xEDch khi n\xE0o n\xEAn d\xF9ng feature \u0111\xF3" })] })] })] });
 }
 export {
   FormInstanceTestSuite as default

package/dist/types/public.d.ts

@@ -1,4 +1,6 @@
 import type { SUBMIT_STATE } from "../constants/form";
+import { OnChangeOptions } from "../hooks/useFormItemControl";
+import { SetFieldValueOptions } from "../providers/Form";
 import type { GetConstantType } from "./util";
 export type FormValues<T = any> = T;
 export interface FormFieldError {
@@ -33,21 +35,24 @@ export interface PublicFormInstance<T = any> {
     formName: string;
     resetFields: (values?: Partial<T>) => void;
     submit: (values?: T) => void;
-    submitAsync: (values?: T) => Promise<any>;
-    setFieldValue: (name: keyof T & string, value: any, options?: any) => void;
-    setFieldValues: (values: Partial<T>, options?: any) => void;
-    getFieldValue: (name: keyof T & string) => any;
-    getFieldValues: (names?: Array<keyof T & string>) => Array<{
+    submitAsync: (values?: T) => Promise<void>;
+    setFieldValue: (name: keyof T | (string & {}), value: any, options?: SetFieldValueOptions) => void;
+    setFieldValues: (values: Partial<T>, options?: OnChangeOptions) => void;
+    getFieldValue: (name: keyof T | (string & {})) => any;
+    getFieldValues: (names?: Array<keyof T | (string & {})>) => Array<{
         name: string;
         value: any;
     }>;
-    getFieldErrors: (names?: Array<keyof T & string>) => Record<string, any>;
-    setFieldFocus: (name: keyof T & string) => void;
+    getFieldErrors: (names?: Array<keyof T | (string & {})>) => Array<{
+        name: string;
+        errors: FormFieldError[];
+    }>;
+    setFieldFocus: (name: keyof T | (string & {})) => void;
 }
 export interface UseFormItemProps<T = any> {
     formName?: string;
     form?: PublicFormInstance<T>;
-    name?: keyof T & string;
+    name?: keyof T | (string & {});
     initialValue?: any;
     formItemId?: string;
     rules?: ValidationRule<any, T>[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-manage",
-  "version": "1.1.0-beta.1",
+  "version": "1.1.0-beta.3",
   "description": "Lightweight React form management with list and listener support.",
   "license": "MIT",
   "type": "module",
@@ -54,4 +54,4 @@
     "typescript": "^5.9.3",
     "vite": "^6.0.1"
   }
-}
+}

package/src/test/testFormInstance/TestCase1_FormWithInstance.tsx

@@ -5,12 +5,12 @@ const { Title, Paragraph, Text } = Typography;
 
 /**
  * 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
@@ -45,15 +45,16 @@ export default function TestCase1_FormWithInstance() {
   return (
     <div style={{ padding: 24 }}>
       <Title level={3}>TestCase1: Form with Instance Prop</Title>
-      
+
       <Paragraph>
-        <Text strong>Breaking Change:</Text> Form component có thể nhận prop <Text code>form</Text> thay vì <Text code>formName</Text>
+        <Text strong>Breaking Change:</Text> Form component có thể nhận prop{" "}
+        <Text code>form</Text> thay vì <Text code>formName</Text>
       </Paragraph>
 
       <Paragraph>
         <Text type="secondary">
-          Form instance được tạo bằng Form.useForm() và truyền vào Form component.
-          Instance này có thể được sử dụng trước khi Form mount.
+          Form instance được tạo bằng Form.useForm() và truyền vào Form
+          component. Instance này có thể được sử dụng trước khi Form mount.
         </Text>
       </Paragraph>
 
@@ -100,7 +101,10 @@ export default function TestCase1_FormWithInstance() {
       <div style={{ marginTop: 24, padding: 16, background: "#f5f5f5" }}>
         <Title level={5}>Expected Results:</Title>
         <ul>
-          <li>✅ Click "Set Values Before Mount" → Values được set và log ra console</li>
+          <li>
+            ✅ Click "Set Values Before Mount" → Values được set và log ra
+            console
+          </li>
           <li>✅ Click "Get Current Values" → Values hiện tại được log ra</li>
           <li>✅ Form render với values đã set</li>
           <li>✅ Click "Reset Form" → Form reset về initialValues</li>