react-form-manage 1.0.8-beta.22 → 1.0.8-beta.23

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.8-beta.23] - 2026-02-04
+
+### Features
+- Add `hidden` prop to FormItem for conditional visibility control
+- Add `collectHiddenValue` option to control whether hidden form items contribute to form data collection
+- FormItem can now be retrieved from Form instance
+- Enhanced form item state management with visibility tracking
+
 ## [1.0.8-beta.22] - 2026-02-02
 
 ### Changes

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

@@ -11,5 +11,6 @@ export interface FormItemProps {
     getValueFromEvent?: (...args: any[]) => any;
     controlAfterInit?: boolean;
     hidden?: boolean;
+    collectOnHidden?: boolean;
 }
-export default function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName, getValueFromEvent, controlAfterInit, hidden, }: FormItemProps): import("react/jsx-runtime").JSX.Element;
+export default function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName, getValueFromEvent, controlAfterInit, hidden, collectOnHidden, }: FormItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/FormItem.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cloneElement, Fragment, useRef, useState } from "react";
 import { v4 } from "uuid";
 import useFormItemControl from "../../hooks/useFormItemControl";
-function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName = "value", getValueFromEvent, controlAfterInit = false, hidden }) {
+function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName = "value", getValueFromEvent, controlAfterInit = false, hidden, collectOnHidden }) {
   const elRef = useRef(null);
   const [formItemId] = useState(externalFormItemId != null ? externalFormItemId : v4());
   const { value, onChange, errors, state, onFocus, isDirty, submitState, isTouched, isInitied } = useFormItemControl({
@@ -11,7 +11,9 @@ function FormItem({ children, name, formName, initialValue, formItemId: external
     initialValue,
     formItemId,
     rules,
-    elementRef: elRef
+    elementRef: elRef,
+    hidden,
+    collectOnHidden
   });
   return _jsx(Fragment, { children: !hidden && children ? cloneElement(children, {
     name,

package/dist/hooks/useFormItemControl.d.ts

@@ -10,6 +10,8 @@ interface UseFormItemControlProps {
     formItemId?: string;
     rules?: ValidationRule[];
     elementRef?: RefObject<any> | null;
+    hidden?: boolean;
+    collectOnHidden?: boolean;
 }
 export interface UseFormItemControlReturn {
     value: any;
@@ -22,5 +24,5 @@ export interface UseFormItemControlReturn {
     submitState?: SubmitState;
     isInitied?: boolean;
 }
-export default function useFormItemControl<T = any>({ formName, form, name, initialValue, formItemId, rules, elementRef, }: UseFormItemControlProps): UseFormItemControlReturn;
+export default function useFormItemControl<T = any>({ formName, form, name, initialValue, formItemId, rules, elementRef, hidden, collectOnHidden, }: UseFormItemControlProps): UseFormItemControlReturn;
 export {};

package/dist/hooks/useFormItemControl.js

@@ -6,7 +6,7 @@ import { IS_ALPHABET_STRING_AND_NUMBER_REGEX, IS_EMAIL_REGEX, IS_NAME_REGEX, IS_
 import { useFormContext } from "../providers/Form";
 import { useFormStore } from "../stores/formStore";
 const VALID_PREMITIVE_TYPE = ["string", "number", "undefined"];
-function useFormItemControl({ formName, form, name, initialValue, formItemId, rules, elementRef }) {
+function useFormItemControl({ formName, form, name, initialValue, formItemId, rules, elementRef, hidden, collectOnHidden }) {
   const contextForm = useFormContext();
   const {
     value,
@@ -88,8 +88,6 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
   const internalRules = useMemo(() => {
     return rules || [];
   }, [rules]);
-  useEffect(() => {
-  }, [value, listener]);
   const { data: errors, state } = useTaskEffect({
     async task() {
       const listErrors = [];
@@ -304,11 +302,13 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
         emitFocus,
         isTouched: false,
         isDirty: false,
-        isInitied: true,
+        isInitied: false,
         name,
         formName: formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName),
         formItemId,
-        onReset
+        onReset,
+        hidden,
+        collectOnHidden
       });
     }
     return () => {

package/dist/hooks/useFormListControl.js

@@ -194,6 +194,12 @@ function useFormListControl({ name, form, initialValues, formName }) {
         });
         setListFields(result);
         setCacheData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name, listFormInitValues);
+        if (getListener(formItemId)) {
+          setListener({
+            formItemId,
+            isInitied: true
+          });
+        }
         return;
       }
       if (Array.isArray(internalInitValue)) {
@@ -207,6 +213,12 @@ function useFormListControl({ name, form, initialValues, formName }) {
         });
         setListFields(result);
         setListFormInitValues(internalInitValue);
+        if (getListener(formItemId)) {
+          setListener({
+            formItemId,
+            isInitied: true
+          });
+        }
         return;
       }
       if (Array.isArray(initialValues)) {
@@ -223,6 +235,12 @@ function useFormListControl({ name, form, initialValues, formName }) {
         }
         setListFields(result);
         setListFormInitValues(initialValues);
+        if (getListener(formItemId)) {
+          setListener({
+            formItemId,
+            isInitied: true
+          });
+        }
         return;
       }
     }

package/dist/providers/Form.d.ts

@@ -1,8 +1,10 @@
 import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
+import FormItem from "../components/Form/FormItem";
 import type { PublicFormInstance, UseFormItemStateWatchReturn } from "../types/public";
 export type { FormFieldError, SubmitState, UseFormItemStateWatchReturn, ValidationRule, } from "../types/public";
 export declare const FormContext: import("react").Context<any>;
 export interface FormProps<T = any> extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
+    collectHiddenFields?: boolean;
     children: ReactNode;
     formName: string;
     initialValues?: T;
@@ -15,9 +17,10 @@ export interface FormProps<T = any> extends Omit<FormHTMLAttributes<HTMLFormElem
     }) => void | Promise<void>;
     FormElement?: ComponentType<any>;
 }
-declare function Form<T = any>({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, ...props }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Form<T = any>({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, collectHiddenFields: formCollectHiddenFields, ...props }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Form {
     var useForm: typeof import("./Form").useForm;
+    var Item: typeof FormItem;
     var useWatch: typeof import("./Form").useWatch;
     var useSubmitDataWatch: typeof import("./Form").useSubmitDataWatch;
     var useFormStateWatch: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => any;

package/dist/providers/Form.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneDeep, get, isEqual, isNil, isPlainObject, last, set, uniqBy } from "lodash";
+import { cloneDeep, filter, get, isEqual, isNil, isPlainObject, last, set, uniqBy } from "lodash";
 import { useTask } from "minh-custom-hooks-release";
 import { createContext, useContext, useEffect, useState } from "react";
 import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow";
 import FormCleanUp from "../components/Form/FormCleanUp";
+import FormItem from "../components/Form/FormItem";
 import { SUBMIT_STATE } from "../constants/form";
 import { useFormStore } from "../stores/formStore";
 import { getAllNoneObjStringPath } from "../utils/obj.util";
 const FormContext = createContext(null);
-function Form({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, ...props }) {
+function Form({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, collectHiddenFields: formCollectHiddenFields = true, ...props }) {
   const {
     // appInitValue,
     getFormItemValue,
@@ -150,7 +151,17 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
         const formValues = getFormValues(formName);
         const resultValues = cloneDeep(formValues);
         const cleanValues = {};
-        uniqBy(listeners, (l) => l.name).forEach((l) => {
+        uniqBy(filter(listeners, (l) => {
+          if (!l.hidden)
+            return true;
+          if (isNil(props2 == null ? void 0 : props2.collectHiddenFields)) {
+            if (isNil(l.collectOnHidden)) {
+              return formCollectHiddenFields;
+            }
+            return Boolean(l.collectOnHidden);
+          }
+          return props2.collectHiddenFields;
+        }), (l) => l.name).forEach((l) => {
           set(cleanValues, l.name, get(resultValues, l.name));
         });
         const handleIsolateCase = async () => {
@@ -356,6 +367,7 @@ const useFormItemStateWatch = (nameOrFormItemId, formNameOrFormInstance) => {
   };
 };
 Form.useForm = useForm;
+Form.Item = FormItem;
 Form.useWatch = useWatch;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;

package/dist/stores/formStore.d.ts

@@ -1,8 +1,21 @@
 type ListenerFormItemType = "normal" | "array";
-export interface FormInstance {
+export interface SubmitProps<T = any> {
+    externalFinishCallback?: (values: T, allValues?: any) => void | Promise<void>;
+    externalRejectCallback?: (errorFields: any[]) => void | Promise<void>;
+    externalFinallyCallback?: (result: {
+        errorsField: any[];
+        values: T;
+        withUnRegisteredValues: any;
+    }) => void | Promise<void>;
+    callBothFinish?: boolean;
+    callBothReject?: boolean;
+    callBothFinally?: boolean;
+    collectHiddenFields?: boolean;
+}
+export interface FormInstance<T = any> {
     formName: string;
     resetFields: (values?: any) => void;
-    submit: (values?: any) => void;
+    submit: (props?: SubmitProps<T>) => void;
     submitAsync: (values?: any) => Promise<any>;
     setFieldValue: (name: string, value: any, options?: any) => void;
     setFieldValues: (values: Record<string, any>, options?: any) => void;
@@ -28,6 +41,8 @@ export interface ListenerItem {
     emitFocus?: any;
     isInitied?: boolean;
     type?: ListenerFormItemType;
+    hidden?: boolean;
+    collectOnHidden?: boolean;
 }
 export interface CleanUpItem {
     name?: string;

package/dist/stores/formStore.js

@@ -200,7 +200,7 @@ const createListenersSlice = (storeSet, storeGet, api) => ({
   getListeners() {
     return storeGet().listeners;
   },
-  setListener({ formName, name, onChange, onReset, isTouched, isDirty, formItemId, internalErrors, onFocus, emitFocus, isInitied, type, onArrayChange }) {
+  setListener({ formName, name, onChange, onReset, isTouched, isDirty, formItemId, internalErrors, onFocus, emitFocus, isInitied, type, onArrayChange, hidden, collectOnHidden }) {
     return storeSet(produce((state) => {
       const storeListeners = state.listeners;
       const findListenerIndex = state.listeners.findIndex((l) => l.formItemId === formItemId);
@@ -238,6 +238,12 @@ const createListenersSlice = (storeSet, storeGet, api) => ({
         if (!isNil(onArrayChange)) {
           storeListeners[findListenerIndex].onArrayChange = onArrayChange;
         }
+        if (!isNil(hidden)) {
+          storeListeners[findListenerIndex].hidden = hidden;
+        }
+        if (!isNil(collectOnHidden)) {
+          storeListeners[findListenerIndex].collectOnHidden = collectOnHidden;
+        }
         return;
       }
       storeListeners.push({
@@ -251,7 +257,11 @@ const createListenersSlice = (storeSet, storeGet, api) => ({
         onReset,
         isInitied: Boolean(isInitied),
         type: type || "normal",
-        onArrayChange
+        onArrayChange,
+        onFocus,
+        emitFocus,
+        hidden: Boolean(hidden),
+        collectOnHidden
       });
     }));
   },

package/package.json

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

package/src/App.tsx

@@ -7,6 +7,7 @@ import FormList from "./components/Form/FormList";
 import InputWrapper from "./components/Form/InputWrapper";
 import Form, { useForm } from "./providers/Form";
 import TestDialog from "./test/TestDialog";
+import TestListener from "./test/TestListener";
 
 import { Form as AntdForm } from "antd";
 
@@ -173,15 +174,16 @@ const App = () => {
           exit={{ opacity: 0 }}
           transition={{ duration: 1.5 }}
         >
-          <FormItem
+          <Form.Item
             valuePropName="checked"
             getValueFromEvent={(_, checked) => checked}
             name="checkControlledAfterInit"
             controlAfterInit={true}
             initialValue={true}
+            hidden
           >
             <Checkbox />
-          </FormItem>
+          </Form.Item>
         </motion.div>
         <TestFormWatch />
         <Button
@@ -202,6 +204,8 @@ const App = () => {
           Reset
         </Button>
       </Form>
+
+      <TestListener />
     </div>
   );
 };

package/src/components/Form/FormItem.tsx

@@ -15,6 +15,7 @@ export interface FormItemProps {
   getValueFromEvent?: (...args: any[]) => any;
   controlAfterInit?: boolean;
   hidden?: boolean;
+  collectOnHidden?: boolean;
 }
 
 export default function FormItem({
@@ -28,6 +29,7 @@ export default function FormItem({
   getValueFromEvent,
   controlAfterInit = false,
   hidden,
+  collectOnHidden,
 }: FormItemProps) {
   const elRef = useRef<any>(null);
 
@@ -49,6 +51,8 @@ export default function FormItem({
     formItemId,
     rules,
     elementRef: elRef,
+    hidden,
+    collectOnHidden,
   });
   // console.log("re-render", formName, name);
 

package/src/hooks/useFormItemControl.ts

@@ -37,6 +37,8 @@ interface UseFormItemControlProps {
   formItemId?: string;
   rules?: ValidationRule[];
   elementRef?: RefObject<any> | null;
+  hidden?: boolean;
+  collectOnHidden?: boolean;
 }
 
 export interface UseFormItemControlReturn {
@@ -61,6 +63,8 @@ export default function useFormItemControl<T = any>({
   formItemId,
   rules,
   elementRef,
+  hidden,
+  collectOnHidden,
 }: UseFormItemControlProps): UseFormItemControlReturn {
   const contextForm = useFormContext();
   const {
@@ -216,9 +220,9 @@ export default function useFormItemControl<T = any>({
     return rules || [];
   }, [rules]);
 
-  useEffect(() => {
-    console.log("Rules changed: ", { name, listener });
-  }, [value, listener]);
+  // useEffect(() => {
+  //   console.log("Rules changed: ", { name, listener });
+  // }, [value, listener]);
 
   const { data: errors, state } = useTaskEffect({
     async task() {
@@ -569,11 +573,13 @@ export default function useFormItemControl<T = any>({
         emitFocus,
         isTouched: false,
         isDirty: false,
-        isInitied: true,
+        isInitied: false,
         name,
         formName: formName || form?.formName || contextForm?.formName,
         formItemId,
         onReset,
+        hidden,
+        collectOnHidden,
       });
     }
 
@@ -592,6 +598,16 @@ export default function useFormItemControl<T = any>({
     // };
   }, []);
 
+  // useEffect(() => {
+  //   if (listener) {
+  //     setListener({
+  //       formItemId,
+  //       hidden,
+  //       collectOnHidden,
+  //     });
+  //   }
+  // }, [hidden, collectOnHidden]);
+
   useEffect(() => {
     if (listener) {
       setListener({

package/src/hooks/useFormListControl.ts

@@ -337,7 +337,12 @@ export default function useFormListControl<T = any>({
           name,
           listFormInitValues,
         );
-
+        if (getListener(formItemId)) {
+          setListener({
+            formItemId,
+            isInitied: true,
+          });
+        }
         return;
       }
 
@@ -355,7 +360,12 @@ export default function useFormListControl<T = any>({
 
         setListFields(result);
         setListFormInitValues(internalInitValue as any);
-
+        if (getListener(formItemId)) {
+          setListener({
+            formItemId,
+            isInitied: true,
+          });
+        }
         return;
       }
 
@@ -383,7 +393,12 @@ export default function useFormListControl<T = any>({
 
         setListFields(result);
         setListFormInitValues(initialValues as any);
-
+        if (getListener(formItemId)) {
+          setListener({
+            formItemId,
+            isInitied: true,
+          });
+        }
         // console.log("Get form init values: ", internalInitValue, result);
 
         return;

package/src/providers/Form.tsx

@@ -1,5 +1,6 @@
 import {
   cloneDeep,
+  filter,
   get,
   isEqual,
   isNil,
@@ -14,8 +15,9 @@ import { createContext, useContext, useEffect, useState } from "react";
 import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
 import FormCleanUp from "../components/Form/FormCleanUp";
+import FormItem from "../components/Form/FormItem";
 import { SUBMIT_STATE } from "../constants/form";
-import { ListenerItem, useFormStore } from "../stores/formStore";
+import { ListenerItem, SubmitProps, useFormStore } from "../stores/formStore";
 import type {
   PublicFormInstance,
   UseFormItemStateWatchReturn,
@@ -34,6 +36,7 @@ export interface FormProps<T = any> extends Omit<
   FormHTMLAttributes<HTMLFormElement>,
   "onSubmit"
 > {
+  collectHiddenFields?: boolean;
   children: ReactNode;
   formName: string;
   initialValues?: T;
@@ -55,6 +58,7 @@ export default function Form<T = any>({
   onReject,
   onFinally,
   FormElement,
+  collectHiddenFields: formCollectHiddenFields = true,
   ...props
 }: FormProps<T>) {
   const {
@@ -236,16 +240,36 @@ export default function Form<T = any>({
     state: _,
     reset,
   } = useTask({
-    async task(props) {
+    async task(props?: SubmitProps<T>) {
       try {
         flushSync(setFormState({ formName, submitState: "submitting" }));
         const errorFields = getAllFieldErrors();
-        const listeners = getListeners().filter((l) => l.formName === formName);
+        const listeners: ListenerItem[] = getListeners().filter(
+          (l) => l.formName === formName,
+        );
         const formValues = getFormValues(formName);
 
         const resultValues = cloneDeep(formValues);
         const cleanValues = {} as T;
-        uniqBy(listeners, (l: any) => l.name).forEach((l) => {
+        uniqBy(
+          filter(listeners, (l: ListenerItem) => {
+            // console.log("Check collect field hidden: ", {
+            //   name: l.name,
+            //   hidden: l.hidden,
+            //   collectOnHidden: l.collectOnHidden,
+            //   collectHiddenFields,
+            // });
+            if (!l.hidden) return true;
+            if (isNil(props?.collectHiddenFields)) {
+              if (isNil(l.collectOnHidden)) {
+                return formCollectHiddenFields;
+              }
+              return Boolean(l.collectOnHidden);
+            }
+            return props.collectHiddenFields;
+          }),
+          (l) => l.name,
+        ).forEach((l) => {
           set(cleanValues as any, l.name, get(resultValues, l.name));
         });
 
@@ -581,6 +605,7 @@ export const useFormItemStateWatch = <T = any,>(
 };
 
 Form.useForm = useForm;
+Form.Item = FormItem;
 Form.useWatch = useWatch;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;

package/src/stores/formStore.ts

@@ -4,10 +4,25 @@ import { v4 } from "uuid";
 import { create } from "zustand";
 import { getAllNoneObjStringPath } from "../utils/obj.util";
 type ListenerFormItemType = "normal" | "array";
-export interface FormInstance {
+
+export interface SubmitProps<T = any> {
+  externalFinishCallback?: (values: T, allValues?: any) => void | Promise<void>;
+  externalRejectCallback?: (errorFields: any[]) => void | Promise<void>;
+  externalFinallyCallback?: (result: {
+    errorsField: any[];
+    values: T;
+    withUnRegisteredValues: any;
+  }) => void | Promise<void>;
+  callBothFinish?: boolean;
+  callBothReject?: boolean;
+  callBothFinally?: boolean;
+  collectHiddenFields?: boolean;
+}
+
+export interface FormInstance<T = any> {
   formName: string;
   resetFields: (values?: any) => void;
-  submit: (values?: any) => void;
+  submit: (props?: SubmitProps<T>) => void;
   submitAsync: (values?: any) => Promise<any>;
   setFieldValue: (name: string, value: any, options?: any) => void;
   setFieldValues: (values: Record<string, any>, options?: any) => void;
@@ -31,6 +46,8 @@ export interface ListenerItem {
   emitFocus?: any;
   isInitied?: boolean;
   type?: ListenerFormItemType;
+  hidden?: boolean;
+  collectOnHidden?: boolean;
 }
 
 export interface CleanUpItem {
@@ -362,7 +379,7 @@ const createFormStoreSlice = (storeSet: any, storeGet: any, api: any) => ({
 
 // Listeners Slice
 const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
-  listeners: [],
+  listeners: [] as ListenerItem[],
   getListener(formItemId) {
     return storeGet().listeners.find((l) => l.formItemId === formItemId);
   },
@@ -383,6 +400,8 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
     isInitied,
     type,
     onArrayChange,
+    hidden,
+    collectOnHidden,
   }: Partial<ListenerItem> & { formItemId: string }) {
     return storeSet(
       produce<any>((state: any) => {
@@ -428,6 +447,14 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
             storeListeners[findListenerIndex].onArrayChange = onArrayChange;
           }
 
+          if (!isNil(hidden)) {
+            storeListeners[findListenerIndex].hidden = hidden;
+          }
+
+          if (!isNil(collectOnHidden)) {
+            storeListeners[findListenerIndex].collectOnHidden = collectOnHidden;
+          }
+
           return;
         }
         storeListeners.push({
@@ -442,6 +469,10 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
           isInitied: Boolean(isInitied),
           type: type || "normal",
           onArrayChange,
+          onFocus,
+          emitFocus,
+          hidden: Boolean(hidden),
+          collectOnHidden,
         });
       }),
     );