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

package/CHANGELOG.md

@@ -0,0 +1,44 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [1.0.6-beta.1] - 2026-01-22
+
+- Full TypeScript migration: Convert all source files from JS to TS
+- Replace JS entrypoints (main.jsx, Input.jsx) with TypeScript versions
+- Add proper type declarations generated from source
+- Update build to emit both JS and .d.ts files
+- Add @types/node for Node.js type support
+- Remove legacy copy-types scripts
+- Add antd, react, react-dom to devDependencies for local development
+
+## [1.0.1] - 2026-01-21
+
+- Publish patch release v1.0.1
+- Minor packaging and release metadata updates
+
+---
+
+## [1.0.0] - initial publish
+
+- Initial public release `react-form-manage@1.0.0`.
+
+## [1.0.2] - 2026-01-21
+
+- Add distributed TypeScript declaration `dist/index.d.ts` and update `package.json` `types` field.
+
+## [1.0.3] - 2026-01-21
+
+- Provide `dist/index.esm.d.ts` and `dist/index.cjs.d.ts` re-exports so Node-style module resolution finds typings correctly.
+
+## [1.0.4] - 2026-01-21
+
+- Add `build:types` script and `scripts/copy-types.js` to automatically copy `src/types/components.d.ts` into `dist/` during publish builds.
+
+## [1.0.5] - 2026-01-21
+
+- Export `Form` as a named export in addition to default to improve import ergonomics for consumers.
+
+
+
+

package/dist/components/Form/FormCleanUp.js

@@ -0,0 +1,46 @@
+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";
+const FormCleanUp = () => {
+    const { cleanUpStack, clearCleanUpStack } = useFormCleanUp(useShallow((state) => ({
+        cleanUpStack: state.cleanUpStack,
+        clearCleanUpStack: state.clearCleanUpStack,
+    })));
+    const { revokeListener } = useFormListeners(useShallow((state) => ({
+        revokeListener: state.revokeListener,
+    })));
+    const { clearObjKeyItem, clearArrItem } = useFormStore(useShallow((state) => {
+        return {
+            clearObjKeyItem: state.clearObjKeyItem,
+            clearArrItem: state.clearArrItem,
+        };
+    }));
+    useEffect(() => {
+        if (Array.isArray(cleanUpStack) && cleanUpStack?.length) {
+            //   console.log("Trigger clean up: ", cleanUpStack);
+            cleanUpStack.forEach((c) => {
+                if (c.itemKey) {
+                    console.log("Revoke in Clean up: ", c);
+                    revokeListener(c.itemKey, (listener, same) => {
+                        if (!same.length) {
+                            console.log("Trigger after revoke: ", listener, same);
+                            clearObjKeyItem(listener.formName, listener.name);
+                        }
+                    });
+                }
+                else {
+                    if (c.type === "array") {
+                        console.log(c);
+                        clearArrItem(c.formName, c.name);
+                    }
+                    else {
+                    }
+                }
+            });
+            clearCleanUpStack();
+        }
+    }, [cleanUpStack]);
+    return _jsx(_Fragment, {});
+};
+export default FormCleanUp;

package/dist/components/Form/FormItem.js

@@ -0,0 +1,46 @@
+import { cloneElement, useRef, useState } from "react";
+import { v4 } from "uuid";
+import useFormItemControl from "../../hooks/useFormItemControl";
+export default function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName = "value", getValueFromEvent, }) {
+    const elRef = useRef(null);
+    const [formItemId] = useState(externalFormItemId ?? v4());
+    const { value, onChange, errors, state, onFocus, isDirty } = useFormItemControl({
+        formName,
+        name,
+        initialValue,
+        formItemId,
+        rules,
+        elementRef: elRef,
+    });
+    // console.log("re-render", formName, name);
+    // useEffect(() => {
+    //   console.log({ value });
+    // }, [value]);
+    return cloneElement(children, {
+        // ref: inputRef,
+        [valuePropName]: value,
+        onChange: (e) => {
+            let val = e;
+            if (getValueFromEvent && typeof getValueFromEvent === "function") {
+                val = getValueFromEvent(e);
+            }
+            else {
+                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,
+    });
+}

package/dist/components/Form/FormList.js

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

package/dist/components/Form/InputWrapper.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement } from "react";
+const InputWrapper = ({ children, errors = [], ...props }) => {
+    return (_jsxs("div", { children: [cloneElement(children, props), (props.isDirty || props.formState === "submitted") &&
+                errors?.map((r) => (_jsx("div", { children: r?.message }, `${props.name}-${props.formItemId}-${r.ruleName}`)))] }));
+};
+export default InputWrapper;

package/dist/components/Input.d.ts

@@ -1,6 +1,5 @@
+import { type InputHTMLAttributes } from "react";
+declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
+    onChange?: (value: any) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;
-declare function Input({ onChange, ref, ...props }: {
-    [x: string]: any;
-    onChange: any;
-    ref: any;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Input = forwardRef(({ onChange, ...props }, ref) => {
+    return (_jsx("input", { ref: ref, onChange: (e) => {
+            onChange?.(e.target.value);
+        }, ...props }));
+});
+export default Input;

package/dist/constants/validation.js

@@ -0,0 +1,33 @@
+// Rules regex
+export const IS_STRING_NUMBER_REGEX = /^\d+$/;
+export const IS_USERNAME_REGEX = /^[a-zA-Z0-9._]{3,16}$/;
+export const IS_PASSWORD_REGEX = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+export const IS_POSITIVE_STRING_NUMBER_REGEX = /^[1-9]\d*$/;
+export const IS_POSITIVE_INTEGER_STRING_NUMBER_REGEX = /^(?:0|[1-9]\d*)(?:\.\d+)?$/;
+export const IS_VIETNAMESE_PHONE_NUMBER_REGEX = /^(?:\+84|0)[\s\-\.]?(?:3[2-9]|5[6|8|9]|7[06-9]|8[1-5]|9[0-9])[\s\-\.]?\d[\d\s\-\.]{6,8}$/;
+export const IS_EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+export const IS_NAME_REGEX = /^[A-Za-zÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂÂÊÔƠƯăâêôơưÇçÝýỳỵỷỹ\s]{2,50}$/;
+export const IS_NOSPACE_STRING_AND_NUMBER_REGEX = /^[A-Za-zÀ-ỹ0-9]+$/;
+export const IS_STRING_AND_NUMBER_REGEX = /^[A-Za-zÀ-ỹ0-9][A-Za-zÀ-ỹ0-9\s]*$/;
+export const IS_NO_SPACE_ALPHABET_STRING_AND_NUMBER_REGEX = /^[A-Za-z0-9]+$/;
+export const IS_ALPHABET_STRING_AND_NUMBER_REGEX = /^[A-Za-z0-9]+(?:\s[A-Za-z0-9]+)*$/;
+export const IS_NO_SPACE_ALPHABET_STRING_REGEX = /^[A-Za-z]+$/;
+// default message
+export const HANDLER_INVALID_MESSAGE = "Invalid value!";
+export const MIN_INVALID_MESSAGE = "Min value invalid!";
+export const MAX_INVALID_MESSAGE = "Max value invalid!";
+export const MIN_INVALID_LENGTH_MESSAGE = "Max length invalid!";
+export const MAX_INVALID_LENGTH_MESSAGE = "Max length invalid!";
+export const IS_STRING_NUMBER_INVALID_MESSAGE = "Must be number!";
+export const IS_USERNAME_INVALID_MESSAGE = `Username must be containes string, number, '.' or '_'!`;
+export const IS_PASSWORD_INVALID_MESSAGE = "Password must be contains Minimum 8 characters, with uppercase, lowercase, number, special character!";
+export const IS_POSITIVE_STRING_NUMBER_INVALID_MESSAGE = "Must be positive number!";
+export const IS_POSITIVE_INTEGER_STRING_NUMBER_INVALID_MESSAGE = "Must be positive integer number!";
+export const IS_VIETNAMESE_PHONE_NUMBER_INVALID_MESSAGE = "Invalid phone number format!";
+export const IS_EMAIL_INVALID_MESSAGE = "Invalid email format!";
+export const IS_NAME_INVALID_MESSAGE = "Invalid name format!";
+export const IS_NOSPACE_STRING_AND_NUMBER_MESSAGE = "String must only includes string and number without whitespace!";
+export const IS_STRING_AND_NUMBER_MESSAGE = "String must only includes string, number and whitespace!";
+export const IS_NO_SPACE_ALPHABET_STRING_AND_NUMBER_MESSAGE = "String must only includes alphabet characters and numbers!";
+export const IS_ALPHABET_STRING_AND_NUMBER_MESSAGE = "String must only includes alphabet charaters, numbers and whitespace";
+export const IS_NO_SPACE_ALPHABET_STRING_MESSAGE = "String must only includes alphabet";

package/dist/contexts/FormContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export default createContext(undefined);

package/dist/hooks/useFormItemControl.js

@@ -0,0 +1,390 @@
+import { get, isNil } from "lodash";
+import { useTaskEffect } from "minh-custom-hooks-release";
+import { useEffect, useMemo } from "react";
+import { useShallow } from "zustand/react/shallow"; // Import useShallow
+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";
+const VALID_PREMITIVE_TYPE = ["string", "number", "undefined"];
+export default function useFormItemControl({ formName, form, name, initialValue, formItemId, rules, elementRef, }) {
+    const contextForm = useFormContext();
+    const { value, setData, getCacheData, getFormValues } = useFormStore(useShallow((state) => {
+        return {
+            value: get(state.forms, `${formName || form?.formName || contextForm?.formName}.${name}`),
+            setData: state.setData,
+            getCacheData: state.getCacheData,
+            getFormValues: state.getFormValues,
+        };
+    }));
+    const { setCleanUpStack } = useFormCleanUp(useShallow((state) => ({
+        setCleanUpStack: state.setCleanUpStack,
+    })));
+    const { initValue: internalInitValue, setInitData, getInitData, } = useFormStore(useShallow((state) => {
+        // console.log(
+        //   "Shallow get initValue: ",
+        //   formName || form?.formName || contextForm?.formName,
+        //   name,
+        //   get(
+        //     state.initialValues,
+        //     `${formName || form?.formName || contextForm?.formName}.${name}`
+        //   )
+        // );
+        return {
+            initValue: get(state.initialValues, `${formName || form?.formName || contextForm?.formName}.${name}`),
+            setInitData: state.setInitData,
+            getInitData: state.getInitData,
+        };
+    }));
+    const { listener, setListener } = useFormListeners(useShallow((state) => {
+        // console.log(
+        //   "Get listener from store: ",
+        //   state.listeners.find((l) => l.formItemId === formItemId)
+        // );
+        return {
+            listener: state.listeners.find((l) => l.formItemId === formItemId),
+            setListener: state.setListener,
+        };
+    }));
+    const onInitData = (value) => {
+        // console.log(
+        //   "Init:",
+        //   formName || form?.formName || contextForm?.formName,
+        //   name,
+        //   value
+        // );
+        setInitData(formName || form?.formName || contextForm?.formName, name, value);
+    };
+    const onFocus = () => {
+        setListener({
+            formItemId,
+            isTouched: true,
+            isDirty: listener?.isDirty,
+        });
+    };
+    const emitFocus = () => {
+        if (elementRef?.current) {
+            elementRef.current.focus();
+        }
+    };
+    const onChange = (value, options) => {
+        if (options?.notTriggerDirty !== true) {
+            setListener({
+                formItemId,
+                isDirty: true,
+                isTouched: listener?.isTouched,
+            });
+        }
+        setData(formName || form?.formName || contextForm?.formName, name, value);
+    };
+    const onReset = (value) => {
+        console.log("Reset", value, getInitData(formName || form?.formName || contextForm?.formName, name));
+        onChange(isNil(value)
+            ? getInitData(formName || form?.formName || contextForm?.formName, name)
+            : value);
+    };
+    // validate field rules
+    const internalRules = useMemo(() => {
+        return rules || [];
+    }, [rules]);
+    const { data: errors, state } = useTaskEffect({
+        async task() {
+            const listErrors = [];
+            const formValues = getFormValues(formName || form?.formName || contextForm?.formName);
+            const ruleToTask = internalRules?.map((r, index) => async () => {
+                const ruleName = r?.name || index;
+                const fieldValue = value?.toString?.();
+                if (typeof r.handler === "function") {
+                    if (!(await r.handler(value, formValues))) {
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                    }
+                }
+                if (VALID_PREMITIVE_TYPE.includes(typeof value)) {
+                    // REQUIRE
+                    if (r.required && !(fieldValue?.toString()?.trim()?.length > 0)) {
+                        // tempMessage.push("This field is required!");
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                    }
+                    // Min Max
+                    if (!isNil(r.min) || !isNil(r.max)) {
+                        if (isNil(value)) {
+                            listErrors.push({
+                                ruleName,
+                                message: r.message,
+                            });
+                            return;
+                        }
+                        if ((r.min ?? Number.MIN_SAFE_INTEGER) <=
+                            (r.max ?? Number.MAX_SAFE_INTEGER)) {
+                            if (!isNil(r.min)) {
+                                if (!isNaN(Number(fieldValue)) && Number(fieldValue) <= r.min) {
+                                    // tempMessage.push(MIN_INVALID_MESSAGE);
+                                    listErrors.push({
+                                        ruleName,
+                                        message: r.message,
+                                    });
+                                    return;
+                                }
+                            }
+                            if (!isNil(r.max)) {
+                                if (!isNaN(Number(fieldValue)) && Number(fieldValue) >= r.max) {
+                                    // tempMessage.push(MAX_INVALID_MESSAGE);
+                                    listErrors.push({
+                                        ruleName,
+                                        message: r.message,
+                                    });
+                                    return;
+                                }
+                            }
+                        }
+                    }
+                    // MIN LENGTH MAX LENGTH
+                    if (!isNil(r.minLength) || !isNil(r.maxLength)) {
+                        if ((r.minLength ?? Number.MIN_SAFE_INTEGER) <=
+                            (r.maxLength ?? Number.MAX_SAFE_INTEGER)) {
+                            if (!isNil(r.minLength)) {
+                                if (fieldValue?.length <= r.minLength) {
+                                    // tempMessage.push(MIN_INVALID_LENGTH_MESSAGE);
+                                    listErrors.push({
+                                        ruleName,
+                                        message: r.message,
+                                    });
+                                    return;
+                                }
+                            }
+                            if (!isNil(r.maxLength)) {
+                                if (fieldValue?.length >= r.maxLength) {
+                                    // tempMessage.push(MAX_INVALID_LENGTH_MESSAGE);
+                                    listErrors.push({
+                                        ruleName,
+                                        message: r.message,
+                                    });
+                                    return;
+                                }
+                            }
+                        }
+                    }
+                    // Password
+                    if (r.isPassword && !IS_PASSWORD_REGEX.test(fieldValue)) {
+                        // tempMessage.push(IS_PASSWORD_INVALID_MESSAGE);
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                    }
+                    // Username
+                    if (r.isUsername && !IS_USERNAME_REGEX.test(fieldValue)) {
+                        // tempMessage.push(IS_USERNAME_INVALID_MESSAGE);
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                    }
+                    // Is Vietnamese Phone number
+                    if (r.isPhoneNumber &&
+                        !IS_VIETNAMESE_PHONE_NUMBER_REGEX.test(fieldValue)) {
+                        // tempMessage.push(IS_VIETNAMESE_PHONE_NUMBER_INVALID_MESSAGE);
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                    }
+                    // String number
+                    if (r.isStringNumber && !IS_STRING_NUMBER_REGEX.test(fieldValue)) {
+                        // tempMessage.push(IS_STRING_NUMBER_INVALID_MESSAGE);
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                    }
+                    // String positive number
+                    if (r.isPositiveStringNumber &&
+                        !IS_POSITIVE_STRING_NUMBER_REGEX.test(fieldValue)) {
+                        // tempMessage.push(IS_POSITIVE_STRING_NUMBER_INVALID_MESSAGE);
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                    }
+                    // String positive integer number
+                    if (r.isPositiveIntegerStringNumber &&
+                        !IS_POSITIVE_INTEGER_STRING_NUMBER_REGEX.test(fieldValue)) {
+                        // tempMessage.push(
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                        //   IS_POSITIVE_INTEGER_STRING_NUMBER_INVALID_MESSAGE
+                        // );
+                    }
+                    // Email
+                    if (r.isEmail && !IS_EMAIL_REGEX.test(fieldValue)) {
+                        // tempMessage.push(IS_EMAIL_INVALID_MESSAGE);
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                    }
+                    // Vietnamese Name
+                    if (r.isVietnameseName && !IS_NAME_REGEX.test(fieldValue)) {
+                        // tempMessage.push(IS_NAME_INVALID_MESSAGE);
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                    }
+                    // String and number without whitespace
+                    if (r.isNoSpaceStringAndNumber &&
+                        !IS_NOSPACE_STRING_AND_NUMBER_REGEX.test(fieldValue)) {
+                        // tempMessage.push(IS_NOSPACE_STRING_AND_NUMBER_MESSAGE);
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                    }
+                    // String and number with
+                    if (r.isStringAndNumber &&
+                        !IS_STRING_AND_NUMBER_REGEX.test(fieldValue)) {
+                        // tempMessage.push(IS_STRING_AND_NUMBER_MESSAGE);
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                    }
+                    if (r.isNoSpaceOnlyAlphabetStringAndNumber &&
+                        !IS_NO_SPACE_ALPHABET_STRING_AND_NUMBER_REGEX.test(fieldValue)) {
+                        // tempMessage.push(IS_NO_SPACE_ALPHABET_STRING_AND_NUMBER_MESSAGE);
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                    }
+                    if (r.isOnlyAlphabetStringAndNumber &&
+                        !IS_ALPHABET_STRING_AND_NUMBER_REGEX.test(fieldValue)) {
+                        // tempMessage.push(IS_ALPHABET_STRING_AND_NUMBER_MESSAGE);
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                    }
+                    if (r.isNoSpaceAlphabetString &&
+                        !IS_NO_SPACE_ALPHABET_STRING_REGEX.test(fieldValue)) {
+                        // tempMessage.push(IS_NO_SPACE_ALPHABET_STRING_MESSAGE);
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                    }
+                }
+            });
+            // console.log("Trigger validate: ", listErrors);
+            for (const rAsync of ruleToTask) {
+                await rAsync();
+            }
+            setListener({ formItemId, internalErrors: listErrors });
+            return listErrors;
+        },
+        deps: [internalRules, value],
+        onError(err) {
+            console.log(err);
+        },
+    });
+    // useEffect(() => {
+    //   console.log({ name, errors });
+    // }, [errors]);
+    // useEffect(() => {
+    //   console.log({ name, listener });
+    // }, [listener]);
+    useEffect(() => {
+        // console.log({ internalInitValue, value, initialValue });
+        // console.log("Init item value: ", name, value, internalInitValue);
+        // console.log("internalInitValue: ", internalInitValue);
+        if (!value) {
+            if (!internalInitValue) {
+                if (!isNil(initialValue)) {
+                    console.log("On init data", initialValue);
+                    onInitData(initialValue);
+                }
+            }
+            else {
+                onChange(internalInitValue);
+            }
+        }
+    }, [internalInitValue]);
+    useEffect(() => {
+        if (!listener) {
+            setListener({
+                onChange,
+                emitFocus,
+                isTouched: false,
+                isDirty: false,
+                name,
+                formName: formName || form?.formName || contextForm?.formName,
+                formItemId,
+                onReset,
+            });
+        }
+        // return () => {
+        //   console.log("Revoke listener", listener);
+        // };
+    }, []);
+    useEffect(() => {
+        if (listener) {
+            setListener({
+                formItemId,
+                onChange,
+                name,
+                formName: formName || form?.formName || contextForm?.formName,
+                onReset,
+                isTouched: listener?.isTouched,
+                isDirty: listener?.isDirty,
+            });
+        }
+        const cacheData = getCacheData(formName || form?.formName || contextForm?.formName);
+        // console.log("Get cache Data after list change: ", cacheData);
+        if (cacheData) {
+            const getNewDataFromCache = get(cacheData, name);
+            // console.log("Init data when change form ite: ", name, cacheData);
+            if (!getNewDataFromCache) {
+                onChange(initialValue);
+            }
+            else
+                onChange(getNewDataFromCache);
+        }
+    }, [name, formName || form?.formName || contextForm?.formName]);
+    useEffect(() => {
+        return () => {
+            setCleanUpStack({
+                itemKey: formItemId,
+            });
+        };
+    }, []);
+    return {
+        value: value,
+        onChange,
+        state,
+        errors,
+        onFocus,
+        isDirty: listener?.isDirty,
+    };
+}