react-form-manage 1.0.8-beta.9 → 1.1.0-beta.1

package/CHANGELOG.md

@@ -2,22 +2,240 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.1.0-beta.1] - 2026-03-03
+
+### Breaking Changes
+
+- **Form Component Props**: Form component can now accept `form` instance prop instead of only `formName`
+  - New usage: `<Form form={formInstance}>` alongside existing `<Form formName="myForm">`
+  - Form instance can be created with `Form.useForm()` before Form component mounts
+  - Methods are bound to external instance when provided
+- **useForm Return Type**: `useForm()` now returns tuple `[instance, isReady]` instead of `[instance]`
+  - `isReady` flag indicates whether Form component is mounted and ready
+  - Can be used to conditionally enable/disable features based on Form state
+- **useWatch Type**: `name` parameter now accepts `keyof T | (string & {})` for dynamic field names
+
+### New Features
+
+- **Auto-generate FormName**: Form.useForm() automatically generates UUID if no parameter provided
+  - No need to manually manage formName for simple cases
+  - Multiple forms can coexist without name conflicts
+- **Safe Form Methods**: Form instance methods can be called safely before Form mounts
+  - Proxy instance automatically finds real instance when Form mounts
+  - Warnings logged instead of errors when methods called before mount
+- **useFormUtils Hook**: New hook for external form manipulation
+  - `getFormInstance(formName)`: Get form instance from store
+  - `setFieldValue(formName, name, value, options)`: Set field value externally
+  - `setFieldValues(formName, values, options)`: Set multiple values externally
+  - Useful for global control panels, external triggers, cross-component manipulation
+- **Headless Forms**: Form instance can work independently as state manager
+  - Methods work without Form component wrapper
+  - Useful for custom implementations, multi-step forms, form wizards
+- **Test Suite**: Created 6 comprehensive test cases for Form Instance features
+  - TestCase1: Form with Instance Prop
+  - TestCase2: Auto-generate FormName
+  - TestCase3: Safe Form Methods
+  - TestCase4: useForm Status Flag
+  - TestCase5: useFormUtils Hook
+  - TestCase6: Form Without Wrapper
+
+### Technical Details
+
+- Form component uses internal instance or creates new one based on prop type
+- Proxy instance pattern for safe method calls before mount
+- UUID generation using `uuid/v4` for auto-generated form names
+- FormInstance methods rebind on mount to support external instance pattern
+- Type overloads for Form props: `FormPropsWithInstance` and `FormPropsWithoutInstance`
+
+## [1.0.8] - 2026-02-16
+
+### Features
+
+- **Deep Trigger Set Value**: Implement recursive value setting with comprehensive listener triggering
+  - `setFieldValue` with `deepTrigger: true` option for recursive listener notification
+  - Support for plain objects, arrays, FormLists, and nested structures
+  - Proper cleanup for removed fields and array items
+  - Edge case handling: removed object fields, nested FormList items
+- **Enhanced setFieldValues**: Improved batch value setting logic
+  - Automatically detects arrays and uses deep trigger
+  - Traverses object structure and stops at arrays
+  - Primitives trigger onChange, arrays use handleDeepTriggerSet
+- **Utility Functions**: New path collection utilities in obj.util.ts
+  - `getAllPathsIncludingContainers`: Get all paths including intermediate containers
+  - `getAllPathsStopAtArray`: Get paths but stop traversal at arrays
+- **Array Index Notation**: Changed from `[index]` to `.index` notation for consistency
+- **Documentation**: Added comprehensive DEEP_TRIGGER_LOGIC.md with 6 detailed case studies
+- **Test Suite**: Created 10 test cases covering all deep trigger scenarios
+
+### Technical Details
+
+- Deep trigger handles 5 core value types: primitives, plain objects, array listeners (FormList), non-listener arrays, and class instances
+- Hierarchical trigger order: field level → item/index level → property level
+- Recursive cleanup for removed nested structures
+- Options support for controlling dirty state triggering
+
+## [1.0.8-beta.28] - 2026-02-09
+
+### Features
+
+- **Deep Trigger Set Value**: Implement recursive value setting with comprehensive listener triggering
+  - `setFieldValue` with `deepTrigger: true` option for recursive listener notification
+  - Support for plain objects, arrays, FormLists, and nested structures
+  - Proper cleanup for removed fields and array items
+  - Edge case handling: removed object fields, nested FormList items
+- **Enhanced setFieldValues**: Improved batch value setting logic
+  - Automatically detects arrays and uses deep trigger
+  - Traverses object structure and stops at arrays
+  - Primitives trigger onChange, arrays use handleDeepTriggerSet
+- **Utility Functions**: New path collection utilities in obj.util.ts
+  - `getAllPathsIncludingContainers`: Get all paths including intermediate containers
+  - `getAllPathsStopAtArray`: Get paths but stop traversal at arrays
+- **Array Index Notation**: Changed from `[index]` to `.index` notation for consistency
+- **Documentation**: Added comprehensive DEEP_TRIGGER_LOGIC.md with 6 detailed case studies
+- **Test Suite**: Created 10 test cases covering all deep trigger scenarios
+
+### Technical Details
+
+- Deep trigger handles 5 core value types: primitives, plain objects, array listeners (FormList), non-listener arrays, and class instances
+- Hierarchical trigger order: field level → item/index level → property level
+- Recursive cleanup for removed nested structures
+- Options support for controlling dirty state triggering
+
+## [1.0.8-beta.27] - 2026-02-04
+
+### Features
+
+- Add `useWatchNormalize` hook for watching and normalizing form data
+- Support custom normalization functions for automatic value transformation
+- Simplifies data format conversion during form value watching
+
+## [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
+- Enhanced form item state management with visibility tracking
+
+## [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
+
+## [1.0.8-beta.17] - 2026-02-01
+
+### Features
+
+- Add nested path onChange trigger: `setFieldValue` now triggers onChange for child paths when parent path has no listener
+- Support setting array values in FormList with automatic re-render of list items and value updates
+- Enhanced listener types with `type` field (normal/array) and `onArrayChange` callback support
+
+### Improvements
+
+- `useFormListControl` now tracks item values and handles cache properly
+- Improved `useFormItemControl` with cache path validation using `lodash.has`
+
+## [1.0.8-beta.16] - 2026-02-01
+
+### Fixes
+
+- Fix: Guard listener registration to prevent pushing incomplete listeners without name/formName
+- Fix: Guard cleanup execution - only cleanup listeners that actually exist in the store
+- Add formItemId to dependency array for proper listener re-registration in strict mode
+
+## [1.0.8-beta.15] - 2026-02-01
+
+### Features
+
+- Export `useFormStore` and types (`FormInstance`, `ListenerItem`, `CleanUpItem`) to public API
+- Allow advanced users to access and manipulate form state directly
+
+## [1.0.8-beta.13] - 2026-02-01
+
+### Refactoring
+
+- Combine separate Zustand stores (`useFormListeners`, `useFormCleanUp`) into single unified `useFormStore`
+- Implement slice-based store pattern for better code organization and maintainability
+- Update all internal imports to use unified store across hooks and components
+- Maintain backward compatibility with deprecated store aliases
+
+## [1.0.8-beta.12] - 2026-01-27
+
+### Features
+
+- Add slice-based store architecture using Zustand for better scalability
+- Refactor form state management with proper separation of concerns
+
 ## [1.0.8-beta.3] - 2026-01-22
 
 ## [1.0.8-beta.7] - 2026-01-24
+
 - Add control flag for FormItem to support rendering MUI uncontrolled components when initial value is undefined (control on init).
 - Fix: `onReset` did not restore listener state to init.
 - Fix: reset did not return Form submit state to `idle`.
 - Add `hidden` prop to allow hiding components while still assigning a value.
 
 Docs: Update usage notes for `FormItem` control-on-init flag and `hidden` prop.
+
 - Add `UseFormItemStateWatchReturn` type export for `useFormItemStateWatch` hook
 
 - Add isTouched field to FormItem for tracking user interaction state
 
+## [1.0.8-beta.10] - 2026-01-27
+
+- `useForm()` giờ có thể trả về form instance từ provider lân cận nếu không truyền `formName` (không còn bắt buộc truyền tên form khi đã wrap trong `Form`).
+- `FormList.add` khi không truyền `index` sẽ mặc định append vào cuối danh sách.
+- Docs: cập nhật hướng dẫn cho `useForm` và `FormList.add`.
+
 ## [1.0.8-beta.1] - 2026-01-22
 
 - Fix UseFormItemControlReturn errors type to properly export FormFieldError[]
+
 ## [1.0.7-beta.1] - 2026-01-22
 
 - Add `FormFieldError` type export for typed error handling
@@ -98,7 +316,3 @@ Docs: Update usage notes for `FormItem` control-on-init flag and `hidden` prop.
 ## [1.0.5] - 2026-01-21
 
 - Export `Form` as a named export in addition to default to improve import ergonomics for consumers.
-
-
-
-

package/README.md

@@ -2,8 +2,6 @@
 
 Thư viện form nhẹ dành cho React — hỗ trợ form, field, list (array fields), và cơ chế listener để giảm re-render.
 
-Phiên bản này xuất phát từ mã nguồn JS. Typings (.d.ts) được cung cấp trong `src/types/components.d.ts`.
-
 ---
 
 ## Cài đặt
@@ -80,6 +78,8 @@ export default Example;
 
 Bạn có thể lấy instance form để gọi phương thức chương trình như `submit`, `resetFields`, `setFieldValue`…
 
+`useForm` ưu tiên lấy instance từ provider gần nhất nếu không truyền `formName`, giúp bạn không cần truyền tên form khi đã bọc trong `Form`.
+
 Ví dụ sử dụng hook attached trên `Form`:
 
 ```jsx
@@ -87,7 +87,7 @@ import React from "react";
 import Form from "react-form-manage";
 
 function CtrlExample() {
-  const [form] = Form.useForm("myForm"); // hoặc useForm('myForm')
+  const [form] = Form.useForm(); // hoặc Form.useForm('myForm') khi muốn chỉ định form khác
 
   return (
     <div>
@@ -156,6 +156,10 @@ Custom validator (async):
 
 `FormList` là render-prop component cung cấp `listFields` và các action `add`, `remove`, `move`.
 
+Ghi chú:
+
+- `add()` nếu không truyền `index` sẽ tự động append phần tử mới vào cuối danh sách.
+
 Ví dụ:
 
 ```jsx
@@ -192,7 +196,7 @@ Lưu ý: `FormList` quản lý các `key` nội bộ và push các mục cần c
 
 ## Hooks (tóm tắt)
 
-- `useForm(formNameOrFormInstance)` — trả về form instance đã đăng ký.
+- `useForm(formNameOrFormInstance?)` — nếu không truyền thì lấy instance từ `Form` provider gần nhất; nếu truyền `formName` thì chọn form tương ứng.
 - `useWatch(name, formNameOrFormInstance)` — subscribe giá trị field.
 - `useSubmitDataWatch` — watch dữ liệu submit cuối cùng.
 - `useFormStateWatch` — watch state của form (isInitied, submitState…).

package/dist/components/Form/FormCleanUp.js

@@ -1,13 +1,13 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useShallow } from "zustand/react/shallow";
-import { useFormCleanUp, useFormListeners, useFormStore } from "../../stores/formStore";
+import { useFormStore } from "../../stores/formStore";
 const FormCleanUp = () => {
-  const { cleanUpStack, clearCleanUpStack } = useFormCleanUp(useShallow((state) => ({
+  const { cleanUpStack, clearCleanUpStack } = useFormStore(useShallow((state) => ({
     cleanUpStack: state.cleanUpStack,
     clearCleanUpStack: state.clearCleanUpStack
   })));
-  const { revokeListener } = useFormListeners(useShallow((state) => ({
+  const { revokeListener } = useFormStore(useShallow((state) => ({
     revokeListener: state.revokeListener
   })));
   const { clearObjKeyItem, clearArrItem } = useFormStore(useShallow((state) => {

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/components/Form/FormList.d.ts

@@ -8,7 +8,7 @@ export interface FormListProps<T = any> {
         name: string;
         key: string;
     }>, operations: {
-        add: (index: number) => void;
+        add: (index?: number) => void;
         remove: (opts: {
             index?: number;
             key?: string;
@@ -20,5 +20,5 @@ export interface FormListProps<T = any> {
         }) => void;
     }) => React.ReactNode;
 }
-declare const FormList: <T = any>({ name, initialValues, form, formName, children }: FormListProps<T>) => import("react").ReactNode;
+declare const FormList: <T = any>({ name, initialValues, form, formName, children, }: FormListProps<T>) => import("react").ReactNode;
 export default FormList;

package/dist/components/Form/FormList.js

@@ -1,6 +1,6 @@
-import useTestRrenderListControl from "../../hooks/useFormListControl";
+import useFormListControl from "../../hooks/useFormListControl";
 const FormList = ({ name, initialValues, form, formName, children }) => {
-  const { listFields, ...actions } = useTestRrenderListControl({
+  const { listFields, ...actions } = useFormListControl({
     name,
     initialValues,
     form,

package/dist/constants/form.d.ts

@@ -4,4 +4,4 @@ export declare const SUBMIT_STATE: {
     readonly SUBMITTED: "submitted";
     readonly REJECTED: "rejected";
 };
-export type SubmitState = typeof SUBMIT_STATE[keyof typeof SUBMIT_STATE];
+export type SubmitState = (typeof SUBMIT_STATE)[keyof typeof SUBMIT_STATE];

package/dist/hooks/useFormItemControl.d.ts

@@ -1,7 +1,6 @@
 import { type RefObject } from "react";
 import type { FormInstance } from "../stores/formStore";
 import type { FormFieldError, SubmitState, ValidationRule } from "../types/public";
-type AnyObject = Record<string, any>;
 interface UseFormItemControlProps {
     formName?: string;
     form?: FormInstance;
@@ -10,10 +9,16 @@ interface UseFormItemControlProps {
     formItemId?: string;
     rules?: ValidationRule[];
     elementRef?: RefObject<any> | null;
+    hidden?: boolean;
+    collectOnHidden?: boolean;
+}
+export interface OnChangeOptions {
+    notTriggerDirty?: boolean;
+    initiedData?: boolean;
 }
 export interface UseFormItemControlReturn {
     value: any;
-    onChange: (value: any, options?: AnyObject) => void;
+    onChange: (value: any, options?: OnChangeOptions) => void;
     state: any;
     errors: FormFieldError[];
     onFocus: () => void;
@@ -22,5 +27,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,26 +1,40 @@
-import { get, isNil } from "lodash";
+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 { useFormCleanUp, useFormListeners, useFormStore } from "../stores/formStore";
+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, setData, getCacheData, getFormValues, getFormState, isStateInitied, submitState } = useFormStore(useShallow((state2) => {
+  const {
+    value,
+    setData,
+    getCacheData,
+    getFormValues,
+    // getFormState,
+    isStateInitied,
+    submitState,
+    getListener,
+    revokeListener,
+    clearObjKeyItem
+  } = useFormStore(useShallow((state2) => {
     var _a, _b, _c, _d;
     return {
       value: get(state2.forms, `${formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)}.${name}`),
       setData: state2.setData,
       getCacheData: state2.getCacheData,
       getFormValues: state2.getFormValues,
-      getFormState: state2.getFormState,
+      // 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 } = useFormCleanUp(useShallow((state2) => ({
+  const { setCleanUpStack } = useFormStore(useShallow((state2) => ({
     setCleanUpStack: state2.setCleanUpStack
   })));
   const { initValue: internalInitValue, setInitData, getInitData } = useFormStore(useShallow((state2) => {
@@ -30,7 +44,7 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
       getInitData: state2.getInitData
     };
   }));
-  const { listener, setListener } = useFormListeners(useShallow((state2) => {
+  const { listener, setListener } = useFormStore(useShallow((state2) => {
     return {
       listener: state2.listeners.find((l) => l.formItemId === formItemId),
       setListener: state2.setListener
@@ -72,7 +86,8 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
     setListener({
       formItemId,
       isDirty: false,
-      isTouched: false
+      isTouched: false,
+      isInitied: false
     });
     onChange(isNil(value2) ? getInitData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name) : value2, { notTriggerDirty: true, initiedData: true });
   };
@@ -261,7 +276,8 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
       setListener({ formItemId, internalErrors: listErrors });
       return listErrors;
     },
-    deps: [internalRules, value],
+    deps: [internalRules, value, listener == null ? void 0 : listener.isInitied],
+    enabled: Boolean(listener == null ? void 0 : listener.isInitied),
     onError(err) {
     }
   });
@@ -269,33 +285,55 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
     if (isStateInitied) {
       if (isNil(value)) {
         if (isNil(internalInitValue)) {
-          if (!isNil(initialValue)) {
-            onInitData(initialValue);
-          }
+          onInitData(initialValue);
         } else {
           onChange(internalInitValue, {
             notTriggerDirty: true,
             initiedData: true
           });
         }
+      } else {
+        onChange(value, {
+          notTriggerDirty: true,
+          initiedData: true
+        });
       }
       return;
     }
   }, [isStateInitied]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!listener) {
       setListener({
         onChange,
         emitFocus,
         isTouched: false,
         isDirty: false,
+        isInitied: false,
         name,
         formName: formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName),
         formItemId,
-        onReset
+        onReset,
+        hidden,
+        collectOnHidden
       });
     }
+    return () => {
+      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({
@@ -311,21 +349,19 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
     const cacheData = getCacheData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName));
     if (cacheData) {
       const getNewDataFromCache = get(cacheData, name);
-      if (!getNewDataFromCache) {
-        onChange(initialValue);
+      const isIncludeDirectoryInCache = has(cacheData, name);
+      if (!isIncludeDirectoryInCache && isNil(getNewDataFromCache)) {
+        onChange(initialValue, {
+          notTriggerDirty: true,
+          initiedData: true
+        });
       } else
-        onChange(getNewDataFromCache);
+        onChange(getNewDataFromCache, {
+          notTriggerDirty: true,
+          initiedData: true
+        });
     }
   }, [name, formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)]);
-  useEffect(() => {
-    return () => {
-      setCleanUpStack({
-        itemKey: formItemId
-      });
-    };
-  }, []);
-  useEffect(() => {
-  }, [submitState]);
   return {
     value,
     onChange,

package/dist/hooks/useFormListControl.d.ts

@@ -2,6 +2,7 @@ import type { FormInstance } from "../stores/formStore";
 type ListField = {
     name: string;
     key: string;
+    value?: any;
 };
 interface UseFormListControlProps {
     name?: string;
@@ -16,7 +17,7 @@ interface UseFormListControlReturn {
         fromKey?: string;
         to: number;
     }) => void;
-    add: (index: number) => void;
+    add: (index?: number) => void;
     remove: (opts: {
         index?: number;
         key?: string;