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

package/CHANGELOG.md

@@ -2,9 +2,27 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.8-beta.25] - 2026-02-04
+
+### Changes
+
+- Remove cleanup stack execution for clearing form items and array values
+
+## [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
@@ -13,26 +31,31 @@ All notable changes to this project will be documented in this file.
 ## [1.0.8-beta.22] - 2026-02-02
 
 ### Changes
+
 - Refactor: Adjust useFormItemControl and main.tsx for better performance
 
 ## [1.0.8-beta.21] - 2026-02-02
 
 ### Fixes
+
 - Patch: Minor adjustments in useFormItemControl
 
 ## [1.0.8-beta.20] - 2026-02-02
 
 ### Features
+
 - Trigger `initied` flag for onChange in `useFormItemControl` to properly mark form items as initialized
 
 ## [1.0.8-beta.19] - 2026-02-02
 
 ### Features
+
 - Trigger `initied` flag for onChange in `useFormItemControl` to properly mark form items as initialized
 
 ## [1.0.8-beta.18] - 2026-02-01
 
 ### Features
+
 - Avoid deep traversal into class instances/functions in path collection
 - `getAllNoneObjStringPath` now skips non-plain objects and functions, only traverses arrays and plain objects
 - Improves performance and prevents accidental property access on class instances

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;
@@ -12,5 +12,10 @@ export interface FormItemProps {
     controlAfterInit?: boolean;
     hidden?: boolean;
     collectOnHidden?: boolean;
-}
-export default function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName, getValueFromEvent, controlAfterInit, hidden, collectOnHidden, }: FormItemProps): import("react/jsx-runtime").JSX.Element;
+};
+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,23 +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, collectOnHidden }) {
-  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,
-    hidden,
-    collectOnHidden
+    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];
@@ -41,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.js

@@ -1,6 +1,6 @@
 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";
@@ -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) => ({
@@ -295,7 +301,7 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
       return;
     }
   }, [isStateInitied]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!listener) {
       setListener({
         onChange,
@@ -312,14 +318,22 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
       });
     }
     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

@@ -9,17 +9,16 @@ function useFormListControl({ name, form, initialValues, formName }) {
   const contextForm = useFormContext();
   const getFormValues = useFormStore((state) => state.getFormValues);
   const [listFormInitValues, setListFormInitValues] = useState(void 0);
-  const { clearCacheData, setCacheData, setListener, getListener } = useFormStore(useShallow((state) => ({
+  const { clearCacheData, setCacheData, setListener, getListener, clearArrItems } = useFormStore(useShallow((state) => ({
     // Cache
     cacheData: state.cacheData,
     clearCacheData: state.clearCacheData,
     setCacheData: state.setCacheData,
     // Listener
     setListener: state.setListener,
-    getListener: state.getListener
-  })));
-  const { setCleanUpStack } = useFormStore(useShallow((state) => ({
-    setCleanUpStack: state.setCleanUpStack
+    getListener: state.getListener,
+    // Clear Arr Items
+    clearArrItems: state.clearArrItems
   })));
   const { initValue: internalInitValue, formState } = useFormStore(useShallow((state) => {
     return {
@@ -55,15 +54,14 @@ function useFormListControl({ name, form, initialValues, formName }) {
     const getNewValueCache = mapCurWithKey.filter(Boolean).map((c) => c.value);
     const startRemoveIndex = formDataBeforeChange.length - getNewValueCache.length;
     if (startRemoveIndex > 0) {
-      Array.from(Array(startRemoveIndex)).map((_, index) => {
-        return getNewValueCache.length + index;
-      }).forEach((index) => {
-        setCleanUpStack({
+      const clearItems = Array.from(Array(startRemoveIndex)).map((_, index) => {
+        const clearIndex = getNewValueCache.length + index;
+        return {
           formName: formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName),
-          name: `${name}.${index}`,
-          type: "array"
-        });
+          name: `${name}.${clearIndex}`
+        };
       });
+      clearArrItems(clearItems);
     }
     setCacheData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name, getNewValueCache);
   };

package/dist/providers/Form.js

@@ -1,10 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 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";
@@ -300,9 +299,9 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
       clearFormState(formName);
     };
   }, []);
-  return _jsxs(FormContext.Provider, { value: {
+  return _jsx(FormContext.Provider, { value: {
     formName
-  }, children: [FormElement ? _jsx(FormElement, { onSubmit: (e) => {
+  }, children: FormElement ? _jsx(FormElement, { onSubmit: (e) => {
     e.preventDefault();
     e.stopPropagation();
     runSubmit(void 0);
@@ -310,7 +309,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);

package/dist/stores/formStore.js

@@ -72,6 +72,19 @@ const createFormStoreSlice = (storeSet, storeGet, api) => ({
       }
     }));
   },
+  clearArrItems(clearItems) {
+    return storeSet(produce((state) => {
+      const oldValues = state.forms;
+      clearItems.forEach(({ formName, name }) => {
+        const arrPath = name.split(".").slice(0, -1).join(".");
+        const elPath = Number(name.split(".").slice(-1).join(""));
+        const getArrItem = get(oldValues, `${formName}.${arrPath}`);
+        if (isNumber(elPath)) {
+          getArrItem.splice(elPath, 1);
+        }
+      });
+    }));
+  },
   setFormState({ formName, isInitied, submitState }) {
     return storeSet(produce((state) => {
       const oldValues = state.formStates;

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.23",
+  "version": "1.0.8-beta.26",
   "description": "Lightweight React form management with list and listener support.",
   "license": "MIT",
   "type": "module",

package/src/App.tsx

@@ -1,13 +1,9 @@
-import { Checkbox } from "@mui/material";
-import { Button, Input } from "antd";
+import { Input } from "antd";
 import { motion } from "framer-motion";
-import { useEffect } from "react";
-import FormItem from "./components/Form/FormItem";
-import FormList from "./components/Form/FormList";
-import InputWrapper from "./components/Form/InputWrapper";
-import Form, { useForm } from "./providers/Form";
-import TestDialog from "./test/TestDialog";
+import Form from "./providers/Form";
+import CommonTest from "./test/CommonTest";
 import TestListener from "./test/TestListener";
+import TestWrapperFormItem from "./test/TestWrapperFormItem";
 
 import { Form as AntdForm } from "antd";
 
@@ -18,17 +14,6 @@ function TestFormWatch() {
 }
 
 const App = () => {
-  const [form] = useForm("form1");
-
-  const watchCheckBox = Form.useWatch("checkControlledAfterInit", "form1");
-
-  useEffect(() => {
-    if (form) {
-      // setTimeout(() => {
-      //   form.setFieldValue("TestData", "HelloWorld");
-      // }, 500);
-    }
-  }, [form]);
   return (
     <div>
       <AntdForm>
@@ -45,167 +30,13 @@ const App = () => {
       </AntdForm>
 
       {/* Hidden Test */}
-      <Form
-        initialValues={{
-          TestData: "",
-          numericCode: "",
-          // arr: [{ el: "Item 1" }, { el: "Item 2" }],
-        }}
-        onFinish={(values) => {
-          console.log(values);
-        }}
-        formName={"form1"}
-        // hidden
-      >
-        <FormItem
-          name={"username"}
-          rules={[
-            {
-              required: true,
-              message: "Test",
-            },
-          ]}
-          initialValue={"283746"}
-          // hidden
-        >
-          <InputWrapper>
-            <Input />
-          </InputWrapper>
-        </FormItem>
-
-        {/* Numberic test */}
-        <FormItem
-          name={"numericCode"}
-          rules={[
-            { required: true, message: "Vui lòng nhập mã" },
-            {
-              pattern: /^\d+$/,
-              message: "Chỉ cho phép chuỗi số",
-            },
-          ]}
-        >
-          <InputWrapper>
-            <Input placeholder="Mã chỉ gồm số" style={{ width: 200 }} />
-          </InputWrapper>
-        </FormItem>
-
-        {/* Motion Test */}
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 1 }}
-        >
-          <FormItem name="motionTest" controlAfterInit initialValue={"1234134"}>
-            <InputWrapper>
-              <Input placeholder="Motion Test" style={{ width: 200 }} />
-            </InputWrapper>
-          </FormItem>
-        </motion.div>
-        <FormList
-          initialValues={[
-            {
-              el: "sdfsdf",
-              d: { child: "Test Child" },
-            },
-          ]}
-          name="arr"
-        >
-          {(fields, { add, remove, move }) => (
-            <div>
-              {fields.map((field, index) => (
-                <div key={field.key} style={{ marginBottom: 8 }}>
-                  <FormItem name={`${field.name}.el`} initialValue={"Chém gió"}>
-                    <InputWrapper>
-                      <Input placeholder="Item value" style={{ width: 200 }} />
-                    </InputWrapper>
-                  </FormItem>
-                  <FormItem
-                    name={`${field.name}.d.child`}
-                    initialValue={"Con của item"}
-                  >
-                    <InputWrapper>
-                      <Input placeholder="Item value" style={{ width: 200 }} />
-                    </InputWrapper>
-                  </FormItem>
-                  <Button
-                    onClick={() => remove({ index })}
-                    style={{ marginLeft: 8 }}
-                  >
-                    Remove
-                  </Button>
-                  {index > 0 && (
-                    <Button
-                      onClick={() => move({ from: index, to: index - 1 })}
-                      style={{ marginLeft: 8 }}
-                    >
-                      Move Up
-                    </Button>
-                  )}
-                  {index < fields.length - 1 && (
-                    <Button
-                      onClick={() => move({ from: index, to: index + 1 })}
-                      style={{ marginLeft: 8 }}
-                    >
-                      Move Down
-                    </Button>
-                  )}
-                </div>
-              ))}
-              <Button onClick={() => add(fields.length)}>Add Item</Button>
-            </div>
-          )}
-        </FormList>
-        <TestDialog />
-        <Button
-          onClick={() => {
-            form?.setFieldValue("arr", [
-              { el: "Set Item 1" },
-              { el: "Set Item 2" },
-              { el: "Set Item 3" },
-            ]);
-          }}
-        >
-          Test set array list value
-        </Button>
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 1.5 }}
-        >
-          <Form.Item
-            valuePropName="checked"
-            getValueFromEvent={(_, checked) => checked}
-            name="checkControlledAfterInit"
-            controlAfterInit={true}
-            initialValue={true}
-            hidden
-          >
-            <Checkbox />
-          </Form.Item>
-        </motion.div>
-        <TestFormWatch />
-        <Button
-          onClick={() => {
-            const current = form?.getFieldValue("checkControlledAfterInit");
-            console.log("Toggle controlled after init: ", current);
-            form?.setFieldValue("checkControlledAfterInit", !current);
-          }}
-        >
-          Toggle
-        </Button>
-        <Button htmlType="submit">Submit</Button>
-        <Button
-          onClick={() => {
-            form?.resetFields?.();
-          }}
-        >
-          Reset
-        </Button>
-      </Form>
+      <CommonTest />
+      {/* <Form formName="TestDialog" >
+       <TestDialog />
+     </Form> */}
 
       <TestListener />
+      <TestWrapperFormItem />
     </div>
   );
 };

package/src/components/Form/FormCleanUp.tsx

@@ -38,7 +38,7 @@ const FormCleanUp = () => {
           });
         } else {
           if (c.type === "array") {
-            console.log(c);
+            // console.log(c);
             clearArrItem(c.formName, c.name);
           } else {
           }

package/src/components/Form/FormItem.tsx

@@ -1,10 +1,11 @@
-import type { ReactElement } from "react";
-import { cloneElement, Fragment, useRef, useState } from "react";
+import { isNil } from "lodash";
+import type { ComponentProps, FC, ReactElement } from "react";
+import { cloneElement, Fragment, useEffect, useRef, useState } from "react";
 import { v4 } from "uuid";
 import useFormItemControl from "../../hooks/useFormItemControl";
 import type { ValidationRule } from "../../types/public";
 
-export interface FormItemProps {
+export type BaseFormItemProps = {
   children: ReactElement<any>;
   name: string;
   formName?: string;
@@ -16,10 +17,129 @@ export interface FormItemProps {
   controlAfterInit?: boolean;
   hidden?: boolean;
   collectOnHidden?: boolean;
+};
+
+export type FormItemProps<TCustomWrapper extends FC<any> | undefined> =
+  BaseFormItemProps &
+    (
+      | {
+          Component?: undefined;
+        }
+      | ({
+          Component: TCustomWrapper;
+        } & Omit<ComponentProps<TCustomWrapper>, keyof BaseFormItemProps>)
+    );
+
+function BaseFormItem({
+  children,
+
+  name,
+  elementRef: elRef,
+
+  valuePropName,
+  getValueFromEvent,
+  onChange,
+  value,
+  isDirty,
+  errors,
+  onFocus,
+  state,
+  submitState,
+  isTouched,
+}: any) {
+  useEffect(() => {
+    console.log("Base Form Item: ", { name, value });
+  }, [value]);
+  return cloneElement(children, {
+    name,
+    ref: elRef,
+    [valuePropName]: value,
+    onChange: (...args: any[]) => {
+      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: isDirty,
+    // errors: errors,
+    // formState,
+
+    errors,
+    onFocus,
+    validateState: state,
+    submitState,
+    isTouched: isTouched,
+  } as any);
 }
 
-export default function FormItem({
+function FormItemWithWrapper<TComponent extends FC<any>>({
   children,
+
+  name,
+  elementRef: elRef,
+
+  valuePropName,
+  getValueFromEvent,
+  onChange,
+  value,
+  isDirty,
+  errors,
+  onFocus,
+  state,
+  submitState,
+  isTouched,
+  Component,
+  ...props
+}: any) {
+  return (
+    <Component {...props}>
+      {cloneElement(children, {
+        name,
+        ref: elRef,
+        [valuePropName]: value,
+        onChange: (...args: any[]) => {
+          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: isDirty,
+        // errors: errors,
+        // formState,
+
+        errors,
+        onFocus,
+        validateState: state,
+        submitState,
+        isTouched: isTouched,
+      } as any)}
+    </Component>
+  );
+}
+
+export default function FormItem<TCustomWrapper extends FC<any> | undefined>({
+  children,
+  Component,
   name,
   formName,
   initialValue,
@@ -30,10 +150,12 @@ export default function FormItem({
   controlAfterInit = false,
   hidden,
   collectOnHidden,
-}: FormItemProps) {
+  ...props
+}: FormItemProps<TCustomWrapper>) {
+  const [formItemId] = useState(externalFormItemId ?? v4());
+
   const elRef = useRef<any>(null);
 
-  const [formItemId] = useState(externalFormItemId ?? v4());
   const {
     value,
     onChange,
@@ -54,60 +176,52 @@ export default function FormItem({
     hidden,
     collectOnHidden,
   });
-  // console.log("re-render", formName, name);
-
-  // useEffect(() => {
-  //   console.log({ value });
-  // }, [value]);
 
-  // useEffect(() => {
-  //   console.log("isInitied changed: ", {
-  //     isInitied,
-  //     name,
-  //     value,
-  //     controlAfterInit,
-  //   });
-  // }, [isInitied]);
   return (
     <Fragment
-      key={`control-after-init-${Boolean(controlAfterInit && isInitied) ? "1" : "0"}-${formItemId}`}
+      key={`control-after-init-${Boolean(controlAfterInit && isInitied) ? "1" : "0"}-${externalFormItemId}`}
     >
-      {!hidden && children
-        ? cloneElement(children, {
-            name,
-            // ref: inputRef,
-            [valuePropName]: value,
-            onChange: (...args: any[]) => {
-              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: isDirty,
-            // errors: errors,
-            // formState,
-
-            errors,
-            onFocus,
-            validateState: state,
-            ref: elRef,
-            submitState,
-            isTouched: isTouched,
-          } as any)
-        : null}
+      {!hidden && children ? (
+        isNil(Component) ? (
+          <BaseFormItem
+            elementRef={elRef}
+            name={name}
+            valuePropName={valuePropName}
+            getValueFromEvent={getValueFromEvent}
+            value={value}
+            onChange={onChange}
+            errors={errors}
+            state={state}
+            onFocus={onFocus}
+            isDirty={isDirty}
+            submitState={submitState}
+            isTouched={isTouched}
+            formItemId={formItemId}
+          >
+            {children}
+          </BaseFormItem>
+        ) : (
+          <FormItemWithWrapper
+            elementRef={elRef}
+            name={name}
+            valuePropName={valuePropName}
+            getValueFromEvent={getValueFromEvent}
+            value={value}
+            onChange={onChange}
+            errors={errors}
+            state={state}
+            onFocus={onFocus}
+            isDirty={isDirty}
+            submitState={submitState}
+            isTouched={isTouched}
+            formItemId={formItemId}
+            Component={Component}
+            {...props}
+          >
+            {children}
+          </FormItemWithWrapper>
+        )
+      ) : null}
     </Fragment>
   );
 }

package/src/hooks/useFormItemControl.ts

@@ -1,6 +1,6 @@
 import { get, has, isNil } from "lodash";
 import { useTaskEffect } from "minh-custom-hooks-release";
-import { useEffect, useMemo, type RefObject } from "react";
+import { useEffect, useLayoutEffect, useMemo, type RefObject } from "react";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
 import {
   IS_ALPHABET_STRING_AND_NUMBER_REGEX,
@@ -75,6 +75,9 @@ export default function useFormItemControl<T = any>({
     // getFormState,
     isStateInitied,
     submitState,
+    getListener,
+    revokeListener,
+    clearObjKeyItem,
   } = useFormStore(
     useShallow((state) => {
       return {
@@ -94,6 +97,9 @@ export default function useFormItemControl<T = any>({
           state.formStates?.[
             formName || form?.formName || contextForm?.formName
           ]?.submitState,
+        getListener: state.getListener,
+        revokeListener: state.revokeListener,
+        clearObjKeyItem: state.clearObjKeyItem,
       };
     }),
   );
@@ -566,7 +572,8 @@ export default function useFormItemControl<T = any>({
     }
   }, [isStateInitied]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
+    console.log("Component mount: ", name, formItemId, listener);
     if (!listener) {
       setListener({
         onChange,
@@ -584,12 +591,12 @@ export default function useFormItemControl<T = any>({
     }
 
     return () => {
-      if (listener) {
-        setCleanUpStack({
-          name: listener.name,
-          itemKey: listener.formItemId,
-        });
-      }
+      revokeListener(formItemId, (listener, same) => {
+        if (!same.length) {
+          console.log("Trigger after revoke: ", listener, same);
+          clearObjKeyItem(listener.formName, listener.name);
+        }
+      });
     };
 
     // return () => {
@@ -598,15 +605,15 @@ export default function useFormItemControl<T = any>({
     // };
   }, []);
 
-  // useEffect(() => {
-  //   if (listener) {
-  //     setListener({
-  //       formItemId,
-  //       hidden,
-  //       collectOnHidden,
-  //     });
-  //   }
-  // }, [hidden, collectOnHidden]);
+  useEffect(() => {
+    if (listener) {
+      setListener({
+        formItemId,
+        hidden,
+        collectOnHidden,
+      });
+    }
+  }, [hidden, collectOnHidden]);
 
   useEffect(() => {
     if (listener) {

package/src/hooks/useFormListControl.ts

@@ -35,24 +35,28 @@ export default function useFormListControl<T = any>({
   const [listFormInitValues, setListFormInitValues] = useState<
     any[] | undefined
   >(undefined);
-  const { clearCacheData, setCacheData, setListener, getListener } =
-    useFormStore(
-      useShallow((state) => ({
-        // Cache
-        cacheData: state.cacheData,
-        clearCacheData: state.clearCacheData,
-        setCacheData: state.setCacheData,
-
-        // Listener
-        setListener: state.setListener,
-        getListener: state.getListener,
-      })),
-    );
-  const { setCleanUpStack } = useFormStore(
+  const {
+    clearCacheData,
+    setCacheData,
+    setListener,
+    getListener,
+    clearArrItems,
+  } = useFormStore(
     useShallow((state) => ({
-      setCleanUpStack: state.setCleanUpStack,
+      // Cache
+      cacheData: state.cacheData,
+      clearCacheData: state.clearCacheData,
+      setCacheData: state.setCacheData,
+
+      // Listener
+      setListener: state.setListener,
+      getListener: state.getListener,
+
+      // Clear Arr Items
+      clearArrItems: state.clearArrItems,
     })),
   );
+
   const { initValue: internalInitValue, formState } = useFormStore(
     useShallow((state) => {
       // console.log(
@@ -129,22 +133,15 @@ export default function useFormListControl<T = any>({
 
     // Nếu số phần tử trước khi thay đổi mảng lớn hơn thì đẩy các phần tử còn lại vào clean up stack để clear
     if (startRemoveIndex > 0) {
-      Array.from(Array(startRemoveIndex))
-        .map((_, index) => {
-          return getNewValueCache.length + index;
-        })
-        .forEach((index) => {
-          // console.log("Data for cleanup arr element: ", {
-          //   formName: formName || form?.formName || contextForm?.formName,
-          //   name: `${name}.${index}`,
-          //   type: "array",
-          // });
-          setCleanUpStack({
-            formName: formName || form?.formName || contextForm?.formName,
-            name: `${name}.${index}`,
-            type: "array",
-          });
-        });
+      const clearItems = Array.from(Array(startRemoveIndex)).map((_, index) => {
+        const clearIndex = getNewValueCache.length + index;
+
+        return {
+          formName: formName || form?.formName || contextForm?.formName,
+          name: `${name}.${clearIndex}`,
+        };
+      });
+      clearArrItems(clearItems);
     }
 
     console.log("Set cache data for form list: ", {

package/src/providers/Form.tsx

@@ -14,7 +14,6 @@ import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
 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, SubmitProps, useFormStore } from "../stores/formStore";
@@ -492,7 +491,6 @@ export default function Form<T = any>({
           {children}
         </form>
       )}
-      <FormCleanUp />
     </FormContext.Provider>
   );
 }

package/src/stores/formStore.ts

@@ -185,6 +185,30 @@ const createFormStoreSlice = (storeSet: any, storeGet: any, api: any) => ({
     );
   },
 
+  clearArrItems(clearItems: { formName: string; name: string }[]) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.forms;
+
+        console.log("Clear item array values: ", clearItems);
+
+        clearItems.forEach(({ formName, name }) => {
+          const arrPath = name.split(".").slice(0, -1).join(".");
+
+          const elPath = Number(name.split(".").slice(-1).join(""));
+
+          const getArrItem = get(oldValues, `${formName}.${arrPath}`);
+
+          if (isNumber(elPath)) {
+            getArrItem.splice(elPath, 1);
+          }
+        });
+
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }),
+    );
+  },
+
   setFormState({ formName, isInitied, submitState }) {
     return storeSet(
       produce<any>((state: any) => {

package/src/test/CommonTest.tsx

@@ -0,0 +1,177 @@
+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";
+
+type Props = {};
+
+function CommonTest({}: Props) {
+  const [form] = Form.useForm("form1");
+
+  const watchCheckBox = Form.useWatch("checkControlledAfterInit", "form1");
+
+  return (
+    <Form
+      initialValues={{
+        TestData: "",
+        numericCode: "",
+        // arr: [{ el: "Item 1" }, { el: "Item 2" }],
+      }}
+      onFinish={(values) => {
+        console.log(values);
+      }}
+      formName={"form1"}
+      // hidden
+    >
+      <FormItem
+        name={"username"}
+        rules={[
+          {
+            required: true,
+            message: "Test",
+          },
+        ]}
+        initialValue={"283746"}
+        // hidden
+      >
+        <InputWrapper>
+          <Input />
+        </InputWrapper>
+      </FormItem>
+
+      {/* Numberic test */}
+      <FormItem
+        name={"numericCode"}
+        rules={[
+          { required: true, message: "Vui lòng nhập mã" },
+          {
+            pattern: /^\d+$/,
+            message: "Chỉ cho phép chuỗi số",
+          },
+        ]}
+      >
+        <InputWrapper>
+          <Input placeholder="Mã chỉ gồm số" style={{ width: 200 }} />
+        </InputWrapper>
+      </FormItem>
+
+      {/* Motion Test */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 1 }}
+      >
+        <FormItem name="motionTest" controlAfterInit initialValue={"1234134"}>
+          <InputWrapper>
+            <Input placeholder="Motion Test" style={{ width: 200 }} />
+          </InputWrapper>
+        </FormItem>
+      </motion.div>
+      <FormList
+        initialValues={[
+          {
+            el: "sdfsdf",
+            d: { child: "Test Child" },
+          },
+        ]}
+        name="arr"
+      >
+        {(fields, { add, remove, move }) => (
+          <div>
+            {fields.map((field, index) => (
+              <div key={field.key} style={{ marginBottom: 8 }}>
+                <FormItem name={`${field.name}.el`} initialValue={"Chém gió"}>
+                  <InputWrapper>
+                    <Input placeholder="Item value" style={{ width: 200 }} />
+                  </InputWrapper>
+                </FormItem>
+                <FormItem
+                  name={`${field.name}.d.child`}
+                  initialValue={"Con của item"}
+                >
+                  <InputWrapper>
+                    <Input placeholder="Item value" style={{ width: 200 }} />
+                  </InputWrapper>
+                </FormItem>
+                <Button
+                  onClick={() => remove({ index })}
+                  style={{ marginLeft: 8 }}
+                >
+                  Remove
+                </Button>
+                {index > 0 && (
+                  <Button
+                    onClick={() => move({ from: index, to: index - 1 })}
+                    style={{ marginLeft: 8 }}
+                  >
+                    Move Up
+                  </Button>
+                )}
+                {index < fields.length - 1 && (
+                  <Button
+                    onClick={() => move({ from: index, to: index + 1 })}
+                    style={{ marginLeft: 8 }}
+                  >
+                    Move Down
+                  </Button>
+                )}
+              </div>
+            ))}
+            <Button onClick={() => add(fields.length)}>Add Item</Button>
+          </div>
+        )}
+      </FormList>
+      <Button
+        onClick={() => {
+          form?.setFieldValue("arr", [
+            { el: "Set Item 1" },
+            { el: "Set Item 2" },
+            { el: "Set Item 3" },
+          ]);
+        }}
+      >
+        Test set array list value
+      </Button>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 1.5 }}
+      >
+        <Form.Item
+          valuePropName="checked"
+          getValueFromEvent={(_, checked) => checked}
+          name="checkControlledAfterInit"
+          controlAfterInit={true}
+          initialValue={true}
+          hidden
+        >
+          <Checkbox />
+        </Form.Item>
+      </motion.div>
+      {/* <TestFormWatch /> */}
+      <Button
+        onClick={() => {
+          const current = form?.getFieldValue("checkControlledAfterInit");
+          console.log("Toggle controlled after init: ", current);
+          form?.setFieldValue("checkControlledAfterInit", !current);
+        }}
+      >
+        Toggle
+      </Button>
+      <Button htmlType="submit">Submit</Button>
+      <Button
+        onClick={() => {
+          form?.resetFields?.();
+        }}
+      >
+        Reset
+      </Button>
+    </Form>
+  );
+}
+
+export default CommonTest;

package/src/test/TestWrapperFormItem.tsx

@@ -0,0 +1,34 @@
+import { Button, Col, Input, Row } from "antd";
+import { useToggle } from "minh-custom-hooks-release";
+import Form from "../providers/Form";
+
+type Props = {};
+
+function TestWrapperFormItem({}: Props) {
+  const { state, toggle } = useToggle(false);
+  return (
+    <Form
+      onFinish={(values, all) => {
+        console.log(values, all);
+      }}
+      formName="testWrapper"
+    >
+      <Row>
+        <Form.Item
+          hidden={!state}
+          name="test"
+          collectOnHidden={false}
+          initialValue={"test"}
+          Component={Col}
+          xs={12}
+        >
+          <Input />
+        </Form.Item>
+      </Row>
+      <Button htmlType="submit">Submit</Button>
+      <Button onClick={toggle}>{state ? "Off" : "On"}</Button>
+    </Form>
+  );
+}
+
+export default TestWrapperFormItem;