react-form-manage 1.1.0-beta.4 → 1.1.0-beta.6

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.1.0-beta.6] - 2026-03-18
+
+### Reset Improvements
+
+- **Reset submit history**: `resetFields(values?, { resetSubmitData?: boolean })` now defaults `resetSubmitData` to `true` and clears previous submit data when resetting.
+- **Store cleanup**: Added `clearSubmitHistory` to ensure submit history is cleared when resetting/clearing the form.
+
+### Type Improvements
+
+## [1.1.0-beta.5] - 2026-03-09
+
+### Type Improvements
+
+- **Enhanced Submit Methods**: Updated `submit` and `submitAsync` method signatures
+  - Changed from `submit(values?: T)` to `submit(props?: SubmitProps<T>)`
+  - Changed from `submitAsync(values?: T)` to `submitAsync(props?: SubmitProps<T>)`
+  - Now supports external callback functions for better submit flow control
+
+### New Features
+
+- **SubmitProps Interface**: New interface for submit method parameters
+  - `externalFinishCallback`: Called when form validation succeeds with form values
+  - `externalRejectCallback`: Called when form validation fails with error fields
+  - `externalFinallyCallback`: Called after submit completes with complete result info
+  - All callbacks support both synchronous and asynchronous execution
+
+### Technical Details
+
+- `SubmitProps<T>` interface exported from formStore
+- Allows programmatic submit with custom callbacks without requiring Form component props
+- Better separation of concerns between form state and submit handlers
+- Enables more flexible submit workflows (e.g., submit via form instance methods)
+
 ## [1.1.0-beta.4] - 2026-03-04
 
 ### Performance & Code Quality

package/dist/providers/Form.js

@@ -27,7 +27,8 @@ const InternalForm = function Form({ children, formName: externalFormName, form:
     setSubmitHistory,
     clearFormValues,
     clearFormInitialValues,
-    clearFormState
+    clearFormState,
+    clearSubmitHistory
   } = useFormStore(useShallow((state) => ({
     // appInitValue: state.initialValues,
     setInitData: state.setInitData,
@@ -40,7 +41,8 @@ const InternalForm = function Form({ children, formName: externalFormName, form:
     getFormItemValue: state.getFormItemValue,
     clearFormValues: state.clearFormValues,
     clearFormInitialValues: state.clearFormInitialValues,
-    clearFormState: state.clearFormState
+    clearFormState: state.clearFormState,
+    clearSubmitHistory: state.clearSubmitHistory
     // Test, nhớ xóa sau khi xong
     // formStates: state.formStates?.[formName],
   })));
@@ -339,7 +341,7 @@ const InternalForm = function Form({ children, formName: externalFormName, form:
       }
     }
   });
-  const resetFields = (resetOptions) => {
+  const resetFields = (resetValues, resetOptions = { resetSubmitData: true }) => {
     reset();
     flushSync(setFormState({
       formName,
@@ -347,25 +349,25 @@ const InternalForm = function Form({ children, formName: externalFormName, form:
       submitState: SUBMIT_STATE.IDLE
     }));
     const totalListenerFields = getListeners();
-    if (Array.isArray(resetOptions)) {
+    if (Array.isArray(resetValues)) {
       totalListenerFields.forEach((l) => {
-        const findListenerByName = resetOptions.find((o) => o.name === l.name);
+        const findListenerByName = resetValues.find((o) => o.name === l.name);
         if (findListenerByName) {
           l.onReset(findListenerByName == null ? void 0 : findListenerByName.value);
         }
       });
-      totalListenerFields.filter((l) => resetOptions.find((o) => o.name !== l.name)).forEach((l) => {
+      totalListenerFields.filter((l) => resetValues.find((o) => o.name !== l.name)).forEach((l) => {
         var _a;
         (_a = l == null ? void 0 : l.onReset) == null ? void 0 : _a.call(l);
       });
-    } else if (typeof resetOptions === "object") {
-      const allStringPath = getAllNoneObjStringPath(resetOptions);
+    } else if (typeof resetValues === "object") {
+      const allStringPath = getAllNoneObjStringPath(resetValues);
       allStringPath.forEach((p) => {
         const listener = totalListenerFields.find((l) => l.name === p && l.formName === formName);
         if (listener) {
-          listener.onChange(get(resetOptions, listener.name));
+          listener.onChange(get(resetValues, listener.name));
         } else {
-          setData(formName, p, get(resetOptions, p));
+          setData(formName, p, get(resetValues, p));
         }
       });
     } else {
@@ -374,6 +376,9 @@ const InternalForm = function Form({ children, formName: externalFormName, form:
         (_a = l == null ? void 0 : l.onReset) == null ? void 0 : _a.call(l);
       });
     }
+    if (resetOptions == null ? void 0 : resetOptions.resetSubmitData) {
+      setSubmitHistory(formName, {});
+    }
     setFormState({
       formName,
       isInitied: true
@@ -410,6 +415,7 @@ const InternalForm = function Form({ children, formName: externalFormName, form:
       clearFormInitialValues(formName);
       clearFormValues(formName);
       clearFormState(formName);
+      clearSubmitHistory(formName);
     };
   }, []);
   return _jsx(FormContext.Provider, { value: {

package/dist/stores/formStore.js

@@ -206,6 +206,12 @@ const createFormStoreSlice = (storeSet, storeGet, api) => ({
         set(state.submitHistory, formName, [submitData]);
       }
     }));
+  },
+  clearSubmitHistory(formName) {
+    return storeSet(produce((state) => {
+      const oldValues = state.submitHistory;
+      unset(oldValues, formName);
+    }));
   }
 });
 const createListenersSlice = (storeSet, storeGet, api) => ({

package/dist/test/TestMuiReRender/TestModalReRenderUI.d.ts

@@ -0,0 +1,3 @@
+type Props = {};
+declare function TestModalReRenderUI({}: Props): import("react/jsx-runtime").JSX.Element;
+export default TestModalReRenderUI;

package/dist/test/TestMuiReRender/TestModalReRenderUI.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent } from "@mui/material";
+import { Button } from "antd";
+import { useToggle } from "minh-custom-hooks-release";
+import TestMuiReRenderForm from "./TestMuiReRenderForm";
+function TestModalReRenderUI({}) {
+  const { state, on, off } = useToggle();
+  return _jsxs("div", { children: [_jsx(Button, { onClick: on, children: "Open Modal" }), _jsx(Dialog, { open: state, onClose: off, children: _jsx(DialogContent, { children: _jsx(TestMuiReRenderForm, {}) }) })] });
+}
+var stdin_default = TestModalReRenderUI;
+export {
+  stdin_default as default
+};

package/dist/test/TestMuiReRender/TestMuiReRenderForm.d.ts

@@ -0,0 +1,3 @@
+type Props = {};
+declare function TestMuiReRenderForm({}: Props): import("react/jsx-runtime").JSX.Element;
+export default TestMuiReRenderForm;

package/dist/test/TestMuiReRender/TestMuiReRenderForm.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextField } from "@mui/material";
+import { useEffect } from "react";
+import Form from "../../providers/Form";
+function TestMuiReRenderForm({}) {
+  const [form, isMounted] = Form.useForm("testMuiReRender");
+  const name = Form.useWatch("name", form);
+  useEffect(() => {
+    if (isMounted) {
+      form.setFieldValue("name", "John Doe");
+    }
+  }, [isMounted]);
+  useEffect(() => {
+    if (name) {
+      setTimeout(() => {
+        form.setFieldValue("name2", "Hello " + name);
+      }, 1e3);
+    }
+  }, [name]);
+  return _jsxs(Form, { formName: "testMuiReRender", children: [_jsx(Form.Item, { controlAfterInit: true, initialValue: "", name: "name", children: _jsx(TextField, { label: "Name", disabled: true }) }), _jsx(Form.Item, { controlAfterInit: true, initialValue: "", name: "name2", children: _jsx(TextField, { label: "Greeting", disabled: true }) })] });
+}
+var stdin_default = TestMuiReRenderForm;
+export {
+  stdin_default as default
+};

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

@@ -0,0 +1,3 @@
+type Props = {};
+declare function TestMuiReRender({}: Props): import("react/jsx-runtime").JSX.Element;
+export default TestMuiReRender;

package/dist/test/TestMuiReRender/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import TestModalReRenderUI from "./TestModalReRenderUI";
+function TestMuiReRender({}) {
+  return _jsx(TestModalReRenderUI, {});
+}
+var stdin_default = TestMuiReRender;
+export {
+  stdin_default as default
+};

package/dist/types/public.d.ts

@@ -1,6 +1,7 @@
 import type { SUBMIT_STATE } from "../constants/form";
 import { OnChangeOptions } from "../hooks/useFormItemControl";
 import { SetFieldValueOptions } from "../providers/Form";
+import { SubmitProps } from "../stores/formStore";
 import type { GetConstantType } from "./util";
 export type FormValues<T = any> = T;
 export interface FormFieldError {
@@ -33,9 +34,11 @@ export interface ValidationRule<T = any, TValues = any> {
 }
 export interface PublicFormInstance<T = any> {
     formName: string;
-    resetFields: (values?: Partial<T>) => void;
-    submit: (values?: T) => void;
-    submitAsync: (values?: T) => Promise<void>;
+    resetFields: (values?: Partial<T>, options?: {
+        resetSubmitData?: boolean;
+    }) => void;
+    submit: (props?: SubmitProps<T>) => void;
+    submitAsync: (props?: SubmitProps<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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-manage",
-  "version": "1.1.0-beta.4",
+  "version": "1.1.0-beta.6",
   "description": "Lightweight React form management with list and listener support.",
   "license": "MIT",
   "type": "module",

package/src/App.tsx

@@ -1,7 +1,7 @@
 import Form from "./providers/Form";
 
 import { Form as AntdForm } from "antd";
-import SelfTestGetForm from "./test/SelfTestGetForm";
+import TestMuiReRender from "./test/TestMuiReRender";
 
 function TestFormWatch() {
   const watchValue = Form.useWatch("numericCode");
@@ -48,7 +48,9 @@ const App = () => {
 
       {/* <FormInstanceTestSuite /> */}
 
-      <SelfTestGetForm />
+      {/* <SelfTestGetForm /> */}
+
+      <TestMuiReRender />
     </div>
   );
 };

package/src/providers/Form.tsx

@@ -107,6 +107,7 @@ const InternalForm: FormDeclearation = function Form<T = any>({
     clearFormValues,
     clearFormInitialValues,
     clearFormState,
+    clearSubmitHistory,
   } = useFormStore(
     useShallow((state) => ({
       // appInitValue: state.initialValues,
@@ -121,7 +122,7 @@ const InternalForm: FormDeclearation = function Form<T = any>({
       clearFormValues: state.clearFormValues,
       clearFormInitialValues: state.clearFormInitialValues,
       clearFormState: state.clearFormState,
-
+      clearSubmitHistory: state.clearSubmitHistory,
       // Test, nhớ xóa sau khi xong
       // formStates: state.formStates?.[formName],
     })),
@@ -699,7 +700,10 @@ const InternalForm: FormDeclearation = function Form<T = any>({
     },
   });
 
-  const resetFields = (resetOptions) => {
+  const resetFields = (
+    resetValues: any,
+    resetOptions = { resetSubmitData: true },
+  ) => {
     reset();
     flushSync(
       setFormState({
@@ -709,9 +713,9 @@ const InternalForm: FormDeclearation = function Form<T = any>({
       }),
     );
     const totalListenerFields = getListeners();
-    if (Array.isArray(resetOptions)) {
+    if (Array.isArray(resetValues)) {
       totalListenerFields.forEach((l) => {
-        const findListenerByName = resetOptions.find((o) => o.name === l.name);
+        const findListenerByName = resetValues.find((o) => o.name === l.name);
 
         if (findListenerByName) {
           l.onReset(findListenerByName?.value);
@@ -719,20 +723,20 @@ const InternalForm: FormDeclearation = function Form<T = any>({
       });
 
       totalListenerFields
-        .filter((l) => resetOptions.find((o) => o.name !== l.name))
+        .filter((l) => resetValues.find((o) => o.name !== l.name))
         .forEach((l) => {
           l?.onReset?.();
         });
-    } else if (typeof resetOptions === "object") {
-      const allStringPath = getAllNoneObjStringPath(resetOptions);
+    } else if (typeof resetValues === "object") {
+      const allStringPath = getAllNoneObjStringPath(resetValues);
       allStringPath.forEach((p) => {
         const listener = totalListenerFields.find(
           (l) => l.name === p && l.formName === formName,
         );
         if (listener) {
-          listener.onChange(get(resetOptions, listener.name));
+          listener.onChange(get(resetValues, listener.name));
         } else {
-          setData(formName, p, get(resetOptions, p));
+          setData(formName, p, get(resetValues, p));
         }
       });
     } else {
@@ -741,6 +745,10 @@ const InternalForm: FormDeclearation = function Form<T = any>({
       });
     }
 
+    if (resetOptions?.resetSubmitData) {
+      setSubmitHistory(formName, {} as T);
+    }
+
     setFormState({
       formName,
       isInitied: true,
@@ -761,6 +769,7 @@ const InternalForm: FormDeclearation = function Form<T = any>({
         setInitData(formName, p, get(initialValues, p));
       });
     }
+
     setFormState({
       formName,
       isInitied: true,
@@ -788,6 +797,7 @@ const InternalForm: FormDeclearation = function Form<T = any>({
       clearFormInitialValues(formName);
       clearFormValues(formName);
       clearFormState(formName);
+      clearSubmitHistory(formName);
     };
   }, []);
 

package/src/stores/formStore.ts

@@ -401,6 +401,14 @@ const createFormStoreSlice = (storeSet: any, storeGet: any, api: any) => ({
       }),
     );
   },
+  clearSubmitHistory(formName) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.submitHistory;
+        unset(oldValues, formName);
+      }),
+    );
+  },
 });
 
 // Listeners Slice

package/src/test/TestMuiReRender/TestModalReRenderUI.tsx

@@ -0,0 +1,22 @@
+import { Dialog, DialogContent } from "@mui/material";
+import { Button } from "antd";
+import { useToggle } from "minh-custom-hooks-release";
+import TestMuiReRenderForm from "./TestMuiReRenderForm";
+
+type Props = {};
+
+function TestModalReRenderUI({}: Props) {
+  const { state, on, off } = useToggle();
+  return (
+    <div>
+      <Button onClick={on}>Open Modal</Button>
+      <Dialog open={state} onClose={off}>
+        <DialogContent>
+          <TestMuiReRenderForm />
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+export default TestModalReRenderUI;

package/src/test/TestMuiReRender/TestMuiReRenderForm.tsx

@@ -0,0 +1,37 @@
+import { TextField } from "@mui/material";
+import { useEffect } from "react";
+import Form from "../../providers/Form";
+
+type Props = {};
+
+function TestMuiReRenderForm({}: Props) {
+  const [form, isMounted] = Form.useForm("testMuiReRender");
+  const name = Form.useWatch("name", form);
+
+  useEffect(() => {
+    if (isMounted) {
+      form.setFieldValue("name", "John Doe");
+    }
+  }, [isMounted]);
+
+  useEffect(() => {
+    if (name) {
+      setTimeout(() => {
+        form.setFieldValue("name2", "Hello " + name);
+      }, 1000);
+    }
+  }, [name]);
+  return (
+    <Form formName="testMuiReRender">
+      <Form.Item controlAfterInit initialValue={""} name="name">
+        <TextField label="Name" disabled />
+      </Form.Item>
+
+      <Form.Item controlAfterInit initialValue={""} name="name2">
+        <TextField label="Greeting" disabled />
+      </Form.Item>
+    </Form>
+  );
+}
+
+export default TestMuiReRenderForm;

package/src/test/TestMuiReRender/index.tsx

@@ -0,0 +1,9 @@
+import TestModalReRenderUI from "./TestModalReRenderUI";
+
+type Props = {};
+
+function TestMuiReRender({}: Props) {
+  return <TestModalReRenderUI />;
+}
+
+export default TestMuiReRender;

package/src/types/public.ts

@@ -1,6 +1,7 @@
 import type { SUBMIT_STATE } from "../constants/form";
 import { OnChangeOptions } from "../hooks/useFormItemControl";
 import { SetFieldValueOptions } from "../providers/Form";
+import { SubmitProps } from "../stores/formStore";
 import type { GetConstantType } from "./util";
 
 export type FormValues<T = any> = T;
@@ -37,9 +38,12 @@ export interface ValidationRule<T = any, TValues = any> {
 
 export interface PublicFormInstance<T = any> {
   formName: string;
-  resetFields: (values?: Partial<T>) => void;
-  submit: (values?: T) => void;
-  submitAsync: (values?: T) => Promise<void>;
+  resetFields: (
+    values?: Partial<T>,
+    options?: { resetSubmitData?: boolean },
+  ) => void;
+  submit: (props?: SubmitProps<T>) => void;
+  submitAsync: (props?: SubmitProps<T>) => Promise<void>;
   setFieldValue: (
     name: keyof T | (string & {}),
     value: any,

package/dist/index.cjs.d.ts

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

package/dist/index.esm.d.ts

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