react-form-manage 1.0.6-beta.1 → 1.0.6-beta.2

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.6-beta.2] - 2026-01-22
+
+- Fix TypeScript prop types for all components
+- Add FormProps interface with proper optional fields
+- Add FormItemProps, FormListProps, InputWrapperProps interfaces
+- Export type interfaces from package
+- Fix type error where Form component required all props
+
 ## [1.0.6-beta.1] - 2026-01-22
 
 - Full TypeScript migration: Convert all source files from JS to TS

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

@@ -1,18 +1,12 @@
-export default function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName, getValueFromEvent, }: {
-    children: any;
-    name: any;
-    formName: any;
-    initialValue: any;
-    formItemId: any;
-    rules: any;
+import type { ReactElement } from "react";
+export interface FormItemProps {
+    children: ReactElement;
+    name: string;
+    formName?: string;
+    initialValue?: any;
+    formItemId?: string;
+    rules?: any[];
     valuePropName?: string;
-    getValueFromEvent: any;
-}): import("react").DetailedReactHTMLElement<{
-    [valuePropName]: any;
-    onChange: (e: any) => void;
-    isDirty: boolean;
-    errors: any;
-    onFocus: () => void;
-    validateState: any;
-    ref: import("react").RefObject<any>;
-}, HTMLElement>;
+    getValueFromEvent?: (event: any) => any;
+}
+export default function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName, getValueFromEvent, }: FormItemProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -1,8 +1,24 @@
-declare const FormList: ({ name, initialValues, form, formName, children }: {
-    name: any;
-    initialValues: any;
-    form: any;
-    formName: any;
-    children: any;
-}) => any;
+import type { FormInstance } from "../../stores/formStore";
+export interface FormListProps<T = any> {
+    name: string;
+    initialValues?: T[];
+    form?: FormInstance;
+    formName?: string;
+    children: (fields: Array<{
+        name: string;
+        key: string;
+    }>, operations: {
+        add: (index: number) => void;
+        remove: (opts: {
+            index?: number;
+            key?: string;
+        }) => void;
+        move: (opts: {
+            from?: number;
+            fromKey?: string;
+            to: number;
+        }) => void;
+    }) => React.ReactNode;
+}
+declare const FormList: <T = any>({ name, initialValues, form, formName, children }: FormListProps<T>) => import("react").ReactNode;
 export default FormList;

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

@@ -1,6 +1,11 @@
-declare const InputWrapper: ({ children, errors, ...props }: {
-    [x: string]: any;
-    children: any;
-    errors?: any[];
-}) => import("react/jsx-runtime").JSX.Element;
+import type { ReactElement } from "react";
+export interface InputWrapperProps {
+    children: ReactElement;
+    errors?: Array<{
+        ruleName: string;
+        message: string;
+    }>;
+    [key: string]: any;
+}
+declare const InputWrapper: ({ children, errors, ...props }: InputWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export default InputWrapper;

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch } from "./providers/Form";
-import FormItem from "./components/Form/FormItem";
-import FormList from "./components/Form/FormList";
+import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps } 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 from "./components/Form/InputWrapper";
+import InputWrapper, { type InputWrapperProps } from "./components/Form/InputWrapper";
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
-export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, };
+export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps, type FormItemProps, type FormListProps, type InputWrapperProps, };
 export default Form;

package/dist/providers/Form.d.ts

@@ -1,15 +1,20 @@
+import type { ReactNode, ComponentType, FormHTMLAttributes } from "react";
 import type { PublicFormInstance } from "../types/public";
 export declare const FormContext: import("react").Context<any>;
-declare function Form({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, ...props }: {
-    [x: string]: any;
-    children: any;
-    formName: any;
-    initialValues: any;
-    onFinish: any;
-    onReject: any;
-    onFinally: any;
-    FormElement: any;
-}): import("react/jsx-runtime").JSX.Element;
+export interface FormProps<T = any> extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+    children: ReactNode;
+    formName: string;
+    initialValues?: T;
+    onFinish?: (values: T, allValues?: any) => void | Promise<void>;
+    onReject?: (errorFields: any[]) => void | Promise<void>;
+    onFinally?: (result: {
+        errorsField: any[];
+        values: T;
+        withUnRegisteredValues: any;
+    }) => void | Promise<void>;
+    FormElement?: ComponentType<any>;
+}
+declare function Form<T = any>({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, ...props }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Form {
     var useForm: typeof import("./Form").useForm;
     var useWatch: typeof import("./Form").useWatch;

package/package.json

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

package/src/components/Form/FormItem.tsx

@@ -1,7 +1,19 @@
 import { cloneElement, useRef, useState } from "react";
+import type { ReactElement } from "react";
 import { v4 } from "uuid";
 import useFormItemControl from "../../hooks/useFormItemControl";
 
+export interface FormItemProps {
+  children: ReactElement;
+  name: string;
+  formName?: string;
+  initialValue?: any;
+  formItemId?: string;
+  rules?: any[];
+  valuePropName?: string;
+  getValueFromEvent?: (event: any) => any;
+}
+
 export default function FormItem({
   children,
   name,
@@ -11,7 +23,7 @@ export default function FormItem({
   rules,
   valuePropName = "value",
   getValueFromEvent,
-}) {
+}: FormItemProps) {
   const elRef = useRef<any>(null);
 
   const [formItemId] = useState(externalFormItemId ?? v4());
@@ -56,5 +68,5 @@ export default function FormItem({
     onFocus,
     validateState: state,
     ref: elRef,
-  });
+  } as any);
 }

package/src/components/Form/FormList.tsx

@@ -1,6 +1,15 @@
 import useTestRrenderListControl from "../../hooks/useFormListControl";
+import type { FormInstance } from "../../stores/formStore";
 
-const FormList = ({ name, initialValues, form, formName, children }) => {
+export interface FormListProps<T = any> {
+  name: string;
+  initialValues?: T[];
+  form?: FormInstance;
+  formName?: string;
+  children: (fields: Array<{ name: string; key: string }>, operations: { add: (index: number) => void; remove: (opts: { index?: number; key?: string }) => void; move: (opts: { from?: number; fromKey?: string; to: number }) => void }) => React.ReactNode;
+}
+
+const FormList = <T = any>({ name, initialValues, form, formName, children }: FormListProps<T>) => {
   const { listFields, ...actions } = useTestRrenderListControl({
     name,
     initialValues,

package/src/components/Form/InputWrapper.tsx

@@ -1,6 +1,13 @@
 import { cloneElement } from "react";
+import type { ReactElement } from "react";
 
-const InputWrapper = ({ children, errors = [], ...props }) => {
+export interface InputWrapperProps {
+  children: ReactElement;
+  errors?: Array<{ ruleName: string; message: string }>;
+  [key: string]: any;
+}
+
+const InputWrapper = ({ children, errors = [], ...props }: InputWrapperProps) => {
   return (
     <div>
       {cloneElement(children, props)}

package/src/index.ts

@@ -3,12 +3,13 @@ import Form, {
   useWatch,
   useSubmitDataWatch,
   useFormStateWatch,
+  type FormProps,
 } from "./providers/Form";
 
-import FormItem from "./components/Form/FormItem";
-import FormList from "./components/Form/FormList";
+import FormItem, { type FormItemProps } from "./components/Form/FormItem";
+import FormList, { type FormListProps } from "./components/Form/FormList";
 import Input from "./components/Input";
-import InputWrapper from "./components/Form/InputWrapper";
+import InputWrapper, { type InputWrapperProps } from "./components/Form/InputWrapper";
 
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
@@ -25,6 +26,10 @@ export {
   useWatch,
   useSubmitDataWatch,
   useFormStateWatch,
+  type FormProps,
+  type FormItemProps,
+  type FormListProps,
+  type InputWrapperProps,
 };
 
 export default Form;

package/src/providers/Form.tsx

@@ -1,6 +1,7 @@
 import { cloneDeep, get, isEqual, last, set, uniq } from "lodash";
 import { useTask } from "minh-custom-hooks-release";
 import { createContext, useContext, useEffect, useState } from "react";
+import type { ReactNode, ComponentType, FormHTMLAttributes } from "react";
 import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
 import FormCleanUp from "../components/Form/FormCleanUp";
@@ -10,7 +11,17 @@ import { getAllNoneObjStringPath } from "../utils/obj.util";
 
 export const FormContext = createContext(null);
 
-export default function Form({
+export interface FormProps<T = any> extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+  children: ReactNode;
+  formName: string;
+  initialValues?: T;
+  onFinish?: (values: T, allValues?: any) => void | Promise<void>;
+  onReject?: (errorFields: any[]) => void | Promise<void>;
+  onFinally?: (result: { errorsField: any[]; values: T; withUnRegisteredValues: any }) => void | Promise<void>;
+  FormElement?: ComponentType<any>;
+}
+
+export default function Form<T = any>({
   children,
   formName,
   initialValues,
@@ -19,7 +30,7 @@ export default function Form({
   onFinally,
   FormElement,
   ...props
-}) {
+}: FormProps<T>) {
   const {
     getFormItemValue,
     setInitData,
@@ -143,7 +154,7 @@ export default function Form({
         const formValues = getFormValues(formName);
 
         const resultValues = cloneDeep(formValues);
-        const cleanValues = {};
+        const cleanValues = {} as T;
         uniq(listeners, (l) => l.name).forEach((l) => {
           set(cleanValues, l.name, get(resultValues, l.name));
         });