react-form-manage 1.0.8-beta.17 → 1.0.8-beta.18

package/CHANGELOG.md

@@ -2,20 +2,67 @@
 
 All notable changes to this project will be documented in this file.
 
+## [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`.
@@ -23,6 +70,7 @@ Docs: Update usage notes for `FormItem` control-on-init flag and `hidden` prop.
 ## [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
@@ -103,7 +151,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

@@ -157,6 +157,7 @@ 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ụ:

package/dist/index.cjs.d.ts

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

package/dist/index.d.ts

@@ -1,11 +1,11 @@
-import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps, type ValidationRule, type FormFieldError, type SubmitState, type UseFormItemStateWatchReturn } from "./providers/Form";
 import { SUBMIT_STATE } from "./constants/form";
+import Form, { useForm, useFormStateWatch, useSubmitDataWatch, useWatch, type FormFieldError, type FormProps, type SubmitState, type UseFormItemStateWatchReturn, type ValidationRule } from "./providers/Form";
 import FormItem, { type FormItemProps } from "./components/Form/FormItem";
 import FormList, { type FormListProps } from "./components/Form/FormList";
-import Input from "./components/Input";
 import InputWrapper, { type InputWrapperProps } from "./components/Form/InputWrapper";
+import Input from "./components/Input";
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
-import { useFormStore, type FormInstance, type ListenerItem, type CleanUpItem } from "./stores/formStore";
-export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, useFormStore, type FormProps, type FormItemProps, type FormListProps, type InputWrapperProps, type ValidationRule, type FormFieldError, type SubmitState, type UseFormItemStateWatchReturn, type FormInstance, type ListenerItem, type CleanUpItem, SUBMIT_STATE, };
+import { useFormStore, type CleanUpItem, type FormInstance, type ListenerItem } from "./stores/formStore";
+export { Form, FormItem, FormList, Input, InputWrapper, SUBMIT_STATE, useForm, useFormItemControl, useFormListControl, useFormStateWatch, useFormStore, useSubmitDataWatch, useWatch, type CleanUpItem, type FormFieldError, type FormInstance, type FormItemProps, type FormListProps, type FormProps, type InputWrapperProps, type ListenerItem, type SubmitState, type UseFormItemStateWatchReturn, type ValidationRule, };
 export default Form;

package/dist/index.esm.d.ts

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

package/dist/index.js

@@ -1,9 +1,9 @@
-import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch } from "./providers/Form";
 import { SUBMIT_STATE } from "./constants/form";
+import Form, { useForm, useFormStateWatch, useSubmitDataWatch, useWatch } from "./providers/Form";
 import FormItem from "./components/Form/FormItem";
 import FormList from "./components/Form/FormList";
-import Input from "./components/Input";
 import InputWrapper from "./components/Form/InputWrapper";
+import Input from "./components/Input";
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
 import { useFormStore } from "./stores/formStore";

package/dist/providers/Form.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneDeep, get, isEqual, isNil, last, set, uniqBy } from "lodash";
+import { cloneDeep, 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";
@@ -64,7 +64,7 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
         listener.onChange(value, options);
       }
     } else {
-      if (typeof value === "object" && !isNil(value)) {
+      if (isPlainObject(value) || Array.isArray(value)) {
         const allStringPath = getAllNoneObjStringPath(value);
         allStringPath.forEach((p) => {
           const findListener = getListeners().find((l) => l.name === `${name}.${p}` && l.formName === formName);
@@ -103,20 +103,7 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
           listener.onChange(get(values, listener.name), options);
         }
       } else {
-        if (typeof get(values, p) === "object" && !isNil(get(values, p))) {
-          const nestedAllStringPath = getAllNoneObjStringPath(get(values, p));
-          nestedAllStringPath.forEach((np) => {
-            {
-              const findListener = getListeners().find((l) => l.name === `${p}.${np}` && l.formName === formName);
-              if (findListener) {
-                findListener.onChange(get(values, `${p}.${np}`), options);
-              } else {
-                setData(formName, `${p}.${np}`, get(values, `${p}.${np}`));
-              }
-            }
-          });
-        } else
-          setData(formName, p, get(values, p));
+        setData(formName, p, get(values, p));
       }
     });
   };

package/dist/types/index.d.ts

@@ -1 +1 @@
-export * from './public';
+export * from "./public";

package/dist/types/public.d.ts

@@ -1,5 +1,5 @@
-import type { GetConstantType } from "./util";
 import type { SUBMIT_STATE } from "../constants/form";
+import type { GetConstantType } from "./util";
 export type FormValues<T = any> = T;
 export interface FormFieldError {
     ruleName: string | number;

package/dist/utils/obj.util.d.ts

@@ -1,2 +1,2 @@
-export declare function getAllNoneObjStringPath(value: any, prevPath?: string): any;
+export declare function getAllNoneObjStringPath(value: any, prevPath?: string): string[];
 export declare function getAllStringPath(value: any, prevPath?: string): any;

package/dist/utils/obj.util.js

@@ -1,14 +1,25 @@
-import { filter, isNil, join } from "lodash";
+import { filter, isNil, isPlainObject, join } from "lodash";
 function getAllNoneObjStringPath(value, prevPath = "") {
-  if (typeof value === "object") {
-    return Object.keys(value).reduce((prev, cur) => {
+  if (value === null || value === void 0 || typeof value !== "object" || typeof value === "function") {
+    return [prevPath];
+  }
+  if (Array.isArray(value)) {
+    return value.reduce((prev, item, index) => {
       return [
         ...prev,
-        ...getAllNoneObjStringPath(value[cur], join(filter([prevPath, cur], (v) => !isNil(v) && v !== ""), "."))
+        ...getAllNoneObjStringPath(item, join(filter([prevPath, String(index)], (v) => !isNil(v) && v !== ""), "."))
       ];
     }, []);
   }
-  return [prevPath];
+  if (!isPlainObject(value)) {
+    return [prevPath];
+  }
+  return Object.keys(value).reduce((prev, cur) => {
+    return [
+      ...prev,
+      ...getAllNoneObjStringPath(value[cur], join(filter([prevPath, cur], (v) => !isNil(v) && v !== ""), "."))
+    ];
+  }, []);
 }
 function getAllStringPath(value, prevPath = "") {
   if (typeof value === "object") {

package/package.json

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

package/src/index.ts

@@ -1,28 +1,30 @@
+import { SUBMIT_STATE } from "./constants/form";
 import Form, {
   useForm,
-  useWatch,
-  useSubmitDataWatch,
   useFormStateWatch,
-  type FormProps,
-  type ValidationRule,
+  useSubmitDataWatch,
+  useWatch,
   type FormFieldError,
+  type FormProps,
   type SubmitState,
   type UseFormItemStateWatchReturn,
+  type ValidationRule,
 } from "./providers/Form";
-import { SUBMIT_STATE } from "./constants/form";
 
 import FormItem, { type FormItemProps } from "./components/Form/FormItem";
 import FormList, { type FormListProps } from "./components/Form/FormList";
+import InputWrapper, {
+  type InputWrapperProps,
+} from "./components/Form/InputWrapper";
 import Input from "./components/Input";
-import InputWrapper, { type InputWrapperProps } from "./components/Form/InputWrapper";
 
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
 import {
   useFormStore,
+  type CleanUpItem,
   type FormInstance,
   type ListenerItem,
-  type CleanUpItem,
 } from "./stores/formStore";
 
 export {
@@ -31,25 +33,25 @@ export {
   FormList,
   Input,
   InputWrapper,
+  SUBMIT_STATE,
+  useForm,
   useFormItemControl,
   useFormListControl,
-  useForm,
-  useWatch,
-  useSubmitDataWatch,
   useFormStateWatch,
   useFormStore,
-  type FormProps,
+  useSubmitDataWatch,
+  useWatch,
+  type CleanUpItem,
+  type FormFieldError,
+  type FormInstance,
   type FormItemProps,
   type FormListProps,
+  type FormProps,
   type InputWrapperProps,
-  type ValidationRule,
-  type FormFieldError,
+  type ListenerItem,
   type SubmitState,
   type UseFormItemStateWatchReturn,
-  type FormInstance,
-  type ListenerItem,
-  type CleanUpItem,
-  SUBMIT_STATE,
+  type ValidationRule,
 };
 
 export default Form;

package/src/providers/Form.tsx

@@ -1,4 +1,13 @@
-import { cloneDeep, get, isEqual, isNil, last, set, uniqBy } from "lodash";
+import {
+  cloneDeep,
+  get,
+  isEqual,
+  isNil,
+  isPlainObject,
+  last,
+  set,
+  uniqBy,
+} from "lodash";
 import { useTask } from "minh-custom-hooks-release";
 import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
 import { createContext, useContext, useEffect, useState } from "react";
@@ -118,7 +127,7 @@ export default function Form<T = any>({
       }
     } else {
       // set data for non-listener field
-      if (typeof value === "object" && !isNil(value)) {
+      if (isPlainObject(value) || Array.isArray(value)) {
         // Nếu là object hoặc array thì set từng path con
         const allStringPath = getAllNoneObjStringPath(value);
 
@@ -152,7 +161,9 @@ export default function Form<T = any>({
             listener.onArrayChange(get(values, listener.name), options);
 
             // Kiểm tra từng path con của array item xem có listener nào không, nếu có thì gọi onChange của listener đó
-            const nestedAllStringPath = getAllNoneObjStringPath(get(values, p));
+            const nestedAllStringPath: string[] = getAllNoneObjStringPath(
+              get(values, p),
+            );
             nestedAllStringPath.forEach((np) => {
               {
                 const findListener = getListeners().find(
@@ -170,22 +181,7 @@ export default function Form<T = any>({
           listener.onChange(get(values, listener.name), options);
         }
       } else {
-        // Kiểm tra nếu là object và có listener con thì gọi onChange của listener con
-        if (typeof get(values, p) === "object" && !isNil(get(values, p))) {
-          const nestedAllStringPath = getAllNoneObjStringPath(get(values, p));
-          nestedAllStringPath.forEach((np) => {
-            {
-              const findListener = getListeners().find(
-                (l) => l.name === `${p}.${np}` && l.formName === formName,
-              );
-              if (findListener) {
-                findListener.onChange(get(values, `${p}.${np}`), options);
-              } else {
-                setData(formName, `${p}.${np}`, get(values, `${p}.${np}`));
-              }
-            }
-          });
-        } else setData(formName, p, get(values, p));
+        setData(formName, p, get(values, p));
       }
     });
   };

package/src/types/index.ts

@@ -1 +1 @@
-export * from './public';
+export * from "./public";

package/src/types/public.ts

@@ -1,5 +1,5 @@
-import type { GetConstantType } from "./util";
 import type { SUBMIT_STATE } from "../constants/form";
+import type { GetConstantType } from "./util";
 
 export type FormValues<T = any> = T;
 

package/src/utils/obj.util.ts

@@ -1,22 +1,53 @@
-import { filter, isNil, join } from "lodash";
+import { filter, isNil, isPlainObject, join } from "lodash";
 
-export function getAllNoneObjStringPath(value: any, prevPath: string = "") {
-  if (typeof value === "object") {
-    return Object.keys(value).reduce((prev, cur) => {
+export function getAllNoneObjStringPath(
+  value: any,
+  prevPath: string = "",
+): string[] {
+  // primitive / function / null / undefined => dừng
+  if (
+    value === null ||
+    value === undefined ||
+    typeof value !== "object" ||
+    typeof value === "function"
+  ) {
+    return [prevPath];
+  }
+
+  // array thì đi sâu
+  if (Array.isArray(value)) {
+    return value.reduce((prev: string[], item, index) => {
       return [
         ...prev,
-
         ...getAllNoneObjStringPath(
-          value[cur],
+          item,
           join(
-            filter([prevPath, cur], (v) => !isNil(v) && v !== ""),
-            "."
-          )
+            filter([prevPath, String(index)], (v) => !isNil(v) && v !== ""),
+            ".",
+          ),
         ),
       ];
     }, []);
   }
-  return [prevPath];
+
+  // class instance (non-plain object) => dừng
+  if (!isPlainObject(value)) {
+    return [prevPath];
+  }
+
+  // plain object => đi sâu
+  return Object.keys(value).reduce((prev: string[], cur) => {
+    return [
+      ...prev,
+      ...getAllNoneObjStringPath(
+        value[cur],
+        join(
+          filter([prevPath, cur], (v) => !isNil(v) && v !== ""),
+          ".",
+        ),
+      ),
+    ];
+  }, []);
 }
 
 export function getAllStringPath(value: any, prevPath: string = "") {
@@ -26,14 +57,14 @@ export function getAllStringPath(value: any, prevPath: string = "") {
         ...prev,
         join(
           filter([prevPath, cur], (v) => !isNil(v) && v !== ""),
-          "."
+          ".",
         ),
         ...getAllStringPath(
           value[cur],
           join(
             filter([prevPath, cur], (v) => !isNil(v) && v !== ""),
-            "."
-          )
+            ".",
+          ),
         ),
       ];
     }, []);