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

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.8-beta.24] - 2026-02-04
+
+### Fixes
+- Fix cleanup item execution for proper FormItem unmounting
+
+### Features
+- Add `Component` prop to FormItem for wrapping input with custom elements
+- Support custom wrapper components in FormItem
+
+## [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

@@ -1,6 +1,6 @@
-import type { ReactElement } from "react";
+import type { ComponentProps, FC, ReactElement } from "react";
 import type { ValidationRule } from "../../types/public";
-export interface FormItemProps {
+export type BaseFormItemProps = {
     children: ReactElement<any>;
     name: string;
     formName?: string;
@@ -11,5 +11,11 @@ export interface FormItemProps {
     getValueFromEvent?: (...args: any[]) => any;
     controlAfterInit?: boolean;
     hidden?: boolean;
-}
-export default function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName, getValueFromEvent, controlAfterInit, hidden, }: FormItemProps): import("react/jsx-runtime").JSX.Element;
+    collectOnHidden?: boolean;
+};
+export type FormItemProps<TCustomWrapper extends FC<any> | undefined> = BaseFormItemProps & ({
+    Component?: undefined;
+} | ({
+    Component: TCustomWrapper;
+} & Omit<ComponentProps<TCustomWrapper>, keyof BaseFormItemProps>));
+export default function FormItem<TCustomWrapper extends FC<any> | undefined>({ children, Component, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName, getValueFromEvent, controlAfterInit, hidden, collectOnHidden, ...props }: FormItemProps<TCustomWrapper>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/FormItem.js

@@ -1,21 +1,45 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, Fragment, useRef, useState } from "react";
+import { isNil } from "lodash";
+import { cloneElement, Fragment, useEffect, 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 }) {
-  const elRef = useRef(null);
-  const [formItemId] = useState(externalFormItemId != null ? externalFormItemId : v4());
-  const { value, onChange, errors, state, onFocus, isDirty, submitState, isTouched, isInitied } = useFormItemControl({
-    formName,
+function BaseFormItem({ children, name, elementRef: elRef, valuePropName, getValueFromEvent, onChange, value, isDirty, errors, onFocus, state, submitState, isTouched }) {
+  useEffect(() => {
+  }, [value]);
+  return cloneElement(children, {
     name,
-    initialValue,
-    formItemId,
-    rules,
-    elementRef: elRef
+    ref: elRef,
+    [valuePropName]: value,
+    onChange: (...args) => {
+      let val = args[0];
+      if (getValueFromEvent && typeof getValueFromEvent === "function") {
+        val = getValueFromEvent(...args);
+      } else {
+        const e = args[0];
+        if (e && e.target) {
+          val = e.target.value;
+        }
+      }
+      onChange(val);
+    },
+    // onFocus: () => {
+    //   setIsTouched(true);
+    // },
+    // isTouched: isTouched,
+    isDirty,
+    // errors: errors,
+    // formState,
+    errors,
+    onFocus,
+    validateState: state,
+    submitState,
+    isTouched
   });
-  return _jsx(Fragment, { children: !hidden && children ? cloneElement(children, {
+}
+function FormItemWithWrapper({ children, name, elementRef: elRef, valuePropName, getValueFromEvent, onChange, value, isDirty, errors, onFocus, state, submitState, isTouched, Component, ...props }) {
+  return _jsx(Component, { ...props, children: cloneElement(children, {
     name,
-    // ref: inputRef,
+    ref: elRef,
     [valuePropName]: value,
     onChange: (...args) => {
       let val = args[0];
@@ -39,10 +63,24 @@ function FormItem({ children, name, formName, initialValue, formItemId: external
     errors,
     onFocus,
     validateState: state,
-    ref: elRef,
     submitState,
     isTouched
-  }) : null }, `control-after-init-${Boolean(controlAfterInit && isInitied) ? "1" : "0"}-${formItemId}`);
+  }) });
+}
+function FormItem({ children, Component, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName = "value", getValueFromEvent, controlAfterInit = false, hidden, collectOnHidden, ...props }) {
+  const [formItemId] = useState(externalFormItemId != null ? externalFormItemId : v4());
+  const elRef = useRef(null);
+  const { value, onChange, errors, state, onFocus, isDirty, submitState, isTouched, isInitied } = useFormItemControl({
+    formName,
+    name,
+    initialValue,
+    formItemId,
+    rules,
+    elementRef: elRef,
+    hidden,
+    collectOnHidden
+  });
+  return _jsx(Fragment, { children: !hidden && children ? isNil(Component) ? _jsx(BaseFormItem, { elementRef: elRef, name, valuePropName, getValueFromEvent, value, onChange, errors, state, onFocus, isDirty, submitState, isTouched, formItemId, children }) : _jsx(FormItemWithWrapper, { elementRef: elRef, name, valuePropName, getValueFromEvent, value, onChange, errors, state, onFocus, isDirty, submitState, isTouched, formItemId, Component, ...props, children }) : null }, `control-after-init-${Boolean(controlAfterInit && isInitied) ? "1" : "0"}-${externalFormItemId}`);
 }
 export {
   FormItem as default

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

@@ -1,12 +1,12 @@
 import { get, has, isNil } from "lodash";
 import { useTaskEffect } from "minh-custom-hooks-release";
-import { useEffect, useMemo } from "react";
+import { useEffect, useLayoutEffect, useMemo } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { IS_ALPHABET_STRING_AND_NUMBER_REGEX, IS_EMAIL_REGEX, IS_NAME_REGEX, IS_NO_SPACE_ALPHABET_STRING_AND_NUMBER_REGEX, IS_NO_SPACE_ALPHABET_STRING_REGEX, IS_NOSPACE_STRING_AND_NUMBER_REGEX, IS_PASSWORD_REGEX, IS_POSITIVE_INTEGER_STRING_NUMBER_REGEX, IS_POSITIVE_STRING_NUMBER_REGEX, IS_STRING_AND_NUMBER_REGEX, IS_STRING_NUMBER_REGEX, IS_USERNAME_REGEX, IS_VIETNAMESE_PHONE_NUMBER_REGEX } from "../constants/validation";
 import { useFormContext } from "../providers/Form";
 import { 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,
@@ -15,7 +15,10 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
     getFormValues,
     // getFormState,
     isStateInitied,
-    submitState
+    submitState,
+    getListener,
+    revokeListener,
+    clearObjKeyItem
   } = useFormStore(useShallow((state2) => {
     var _a, _b, _c, _d;
     return {
@@ -25,7 +28,10 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
       getFormValues: state2.getFormValues,
       // getFormState: state.getFormState,
       isStateInitied: (_b = (_a = state2.formStates) == null ? void 0 : _a[formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)]) == null ? void 0 : _b.isInitied,
-      submitState: (_d = (_c = state2.formStates) == null ? void 0 : _c[formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)]) == null ? void 0 : _d.submitState
+      submitState: (_d = (_c = state2.formStates) == null ? void 0 : _c[formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)]) == null ? void 0 : _d.submitState,
+      getListener: state2.getListener,
+      revokeListener: state2.revokeListener,
+      clearObjKeyItem: state2.clearObjKeyItem
     };
   }));
   const { setCleanUpStack } = useFormStore(useShallow((state2) => ({
@@ -88,8 +94,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 = [];
@@ -297,29 +301,39 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
       return;
     }
   }, [isStateInitied]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!listener) {
       setListener({
         onChange,
         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 () => {
-      if (listener) {
-        setCleanUpStack({
-          name: listener.name,
-          itemKey: listener.formItemId
-        });
-      }
+      revokeListener(formItemId, (listener2, same) => {
+        if (!same.length) {
+          clearObjKeyItem(listener2.formName, listener2.name);
+        }
+      });
     };
   }, []);
+  useEffect(() => {
+    if (listener) {
+      setListener({
+        formItemId,
+        hidden,
+        collectOnHidden
+      });
+    }
+  }, [hidden, collectOnHidden]);
   useEffect(() => {
     if (listener) {
       setListener({

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 () => {
@@ -291,7 +302,7 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
   }, []);
   return _jsxs(FormContext.Provider, { value: {
     formName
-  }, children: [FormElement ? _jsx(FormElement, { onSubmit: (e) => {
+  }, children: [_jsx(FormCleanUp, {}), FormElement ? _jsx(FormElement, { onSubmit: (e) => {
     e.preventDefault();
     e.stopPropagation();
     runSubmit(void 0);
@@ -299,7 +310,7 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
     e.preventDefault();
     e.stopPropagation();
     runSubmit(void 0);
-  }, ...props, children }), _jsx(FormCleanUp, {})] });
+  }, ...props, children })] });
 }
 function useFormContext() {
   const c = useContext(FormContext);
@@ -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/dist/test/CommonTest.d.ts

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

package/dist/test/CommonTest.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Checkbox, Input } from "antd";
+import { motion } from "framer-motion";
+import FormItem from "../components/Form/FormItem";
+import FormList from "../components/Form/FormList";
+import InputWrapper from "../components/Form/InputWrapper";
+import Form from "../providers/Form";
+function CommonTest({}) {
+  const [form] = Form.useForm("form1");
+  const watchCheckBox = Form.useWatch("checkControlledAfterInit", "form1");
+  return _jsxs(Form, { initialValues: {
+    TestData: "",
+    numericCode: ""
+    // arr: [{ el: "Item 1" }, { el: "Item 2" }],
+  }, onFinish: (values) => {
+  }, formName: "form1", children: [_jsx(FormItem, { name: "username", rules: [
+    {
+      required: true,
+      message: "Test"
+    }
+  ], initialValue: "283746", children: _jsx(InputWrapper, { children: _jsx(Input, {}) }) }), _jsx(FormItem, { name: "numericCode", rules: [
+    { required: true, message: "Vui l\xF2ng nh\u1EADp m\xE3" },
+    {
+      pattern: /^\d+$/,
+      message: "Ch\u1EC9 cho ph\xE9p chu\u1ED7i s\u1ED1"
+    }
+  ], children: _jsx(InputWrapper, { children: _jsx(Input, { placeholder: "M\xE3 ch\u1EC9 g\u1ED3m s\u1ED1", style: { width: 200 } }) }) }), _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 1 }, children: _jsx(FormItem, { name: "motionTest", controlAfterInit: true, initialValue: "1234134", children: _jsx(InputWrapper, { children: _jsx(Input, { placeholder: "Motion Test", style: { width: 200 } }) }) }) }), _jsx(FormList, { initialValues: [
+    {
+      el: "sdfsdf",
+      d: { child: "Test Child" }
+    }
+  ], name: "arr", children: (fields, { add, remove, move }) => _jsxs("div", { children: [fields.map((field, index) => _jsxs("div", { style: { marginBottom: 8 }, children: [_jsx(FormItem, { name: `${field.name}.el`, initialValue: "Ch\xE9m gi\xF3", children: _jsx(InputWrapper, { children: _jsx(Input, { placeholder: "Item value", style: { width: 200 } }) }) }), _jsx(FormItem, { name: `${field.name}.d.child`, initialValue: "Con c\u1EE7a item", children: _jsx(InputWrapper, { children: _jsx(Input, { placeholder: "Item value", style: { width: 200 } }) }) }), _jsx(Button, { onClick: () => remove({ index }), style: { marginLeft: 8 }, children: "Remove" }), index > 0 && _jsx(Button, { onClick: () => move({ from: index, to: index - 1 }), style: { marginLeft: 8 }, children: "Move Up" }), index < fields.length - 1 && _jsx(Button, { onClick: () => move({ from: index, to: index + 1 }), style: { marginLeft: 8 }, children: "Move Down" })] }, field.key)), _jsx(Button, { onClick: () => add(fields.length), children: "Add Item" })] }) }), _jsx(Button, { onClick: () => {
+    form == null ? void 0 : form.setFieldValue("arr", [
+      { el: "Set Item 1" },
+      { el: "Set Item 2" },
+      { el: "Set Item 3" }
+    ]);
+  }, children: "Test set array list value" }), _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 1.5 }, children: _jsx(Form.Item, { valuePropName: "checked", getValueFromEvent: (_, checked) => checked, name: "checkControlledAfterInit", controlAfterInit: true, initialValue: true, hidden: true, children: _jsx(Checkbox, {}) }) }), _jsx(Button, { onClick: () => {
+    const current = form == null ? void 0 : form.getFieldValue("checkControlledAfterInit");
+    form == null ? void 0 : form.setFieldValue("checkControlledAfterInit", !current);
+  }, children: "Toggle" }), _jsx(Button, { htmlType: "submit", children: "Submit" }), _jsx(Button, { onClick: () => {
+    var _a;
+    (_a = form == null ? void 0 : form.resetFields) == null ? void 0 : _a.call(form);
+  }, children: "Reset" })] });
+}
+var stdin_default = CommonTest;
+export {
+  stdin_default as default
+};

package/dist/test/TestWrapperFormItem.d.ts

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

package/dist/test/TestWrapperFormItem.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Col, Input, Row } from "antd";
+import { useToggle } from "minh-custom-hooks-release";
+import Form from "../providers/Form";
+function TestWrapperFormItem({}) {
+  const { state, toggle } = useToggle(false);
+  return _jsxs(Form, { onFinish: (values, all) => {
+  }, formName: "testWrapper", children: [_jsx(Row, { children: _jsx(Form.Item, { hidden: !state, name: "test", collectOnHidden: false, initialValue: "test", Component: Col, xs: 12, children: _jsx(Input, {}) }) }), _jsx(Button, { htmlType: "submit", children: "Submit" }), _jsx(Button, { onClick: toggle, children: state ? "Off" : "On" })] });
+}
+var stdin_default = TestWrapperFormItem;
+export {
+  stdin_default as default
+};

package/package.json

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