@weser/forms 0.0.7 → 0.0.9

package/dist/defaultFormatErrorMessage.d.ts

@@ -1,2 +1,2 @@
-import { ZodIssue } from 'zod';
-export default function defaultFormatErrorMessage(error: ZodIssue): string;
+import { $ZodIssue } from '@zod/core';
+export default function defaultFormatErrorMessage(error: $ZodIssue): string;

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { ZodIssue } from 'zod';
+import { $ZodIssue } from '@zod/core';
 export type Field<T> = {
     value: T;
     disabled: boolean;
@@ -14,6 +14,8 @@ export type Options<T> = {
     touched?: boolean;
     showValidationOn?: 'submit' | 'blur' | 'change';
     parseValue?: (e: any) => T;
-    formatErrorMessage?: (error: ZodIssue, value: T, name?: string) => string;
-    _onUpdateValue?: (value: T, dirty: boolean) => void;
+    formatErrorMessage?: (error: $ZodIssue, value: T, name?: string) => string;
+    _onInit?: (field: Field<T>) => void;
+    _onUpdate?: (field: Partial<Field<T>>) => void;
+    _storedField?: Field<T>;
 };

package/dist/useField.d.ts

@@ -1,18 +1,17 @@
 import { ChangeEvent } from 'react';
 import { ZodType } from 'zod';
 import { Field, Options } from './types.js';
-export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(schema: ZodType, { name, value, disabled, touched, showValidationOn, parseValue, formatErrorMessage, _onUpdateValue, }?: Options<T>): {
-    required: boolean;
+export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(schema: ZodType, { name, value, disabled, touched, showValidationOn, parseValue, formatErrorMessage, _onInit, _onUpdate, _storedField, }?: Options<T>): {
     valid: boolean;
     update: (data: Partial<Field<T>>) => void;
     reset: () => void;
+    validate: () => import("zod").ZodSafeParseResult<unknown>;
     errorMessage: string | undefined;
     inputProps: {
         onFocus: () => void;
         onBlur: () => void;
         value: T;
         disabled: boolean;
-        required: boolean;
         name: string | undefined;
         'data-valid': boolean;
         onChange: (e: C) => void;
@@ -21,19 +20,10 @@ export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(
         onBlur?: undefined;
         value: T;
         disabled: boolean;
-        required: boolean;
         name: string | undefined;
         'data-valid': boolean;
         onChange: (e: C) => void;
     };
-    initial: {
-        value: T;
-        disabled: boolean;
-        touched: boolean;
-        dirty: boolean;
-        valid: boolean;
-        errorMessage: string | undefined;
-    };
     props: {
         onFocus: () => void;
         onBlur: () => void;
@@ -41,7 +31,6 @@ export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(
         disabled: boolean;
         name: string | undefined;
         valid: boolean;
-        required: boolean;
         errorMessage: string | undefined;
         onChange: (e: C) => void;
     } | {
@@ -51,10 +40,17 @@ export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(
         disabled: boolean;
         name: string | undefined;
         valid: boolean;
-        required: boolean;
         errorMessage: string | undefined;
         onChange: (e: C) => void;
     };
+    _initial: {
+        value: T;
+        disabled: boolean;
+        touched: boolean;
+        dirty: boolean;
+        valid: boolean;
+        errorMessage: string | undefined;
+    };
     value: T;
     disabled: boolean;
     touched: boolean;

package/dist/useField.js

@@ -1,15 +1,14 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import defaultFormatErrorMessage from './defaultFormatErrorMessage.js';
 import defaultParseValue from './defaultParseValue.js';
-export default function useField(schema, { name, value = '', disabled = false, touched = false, showValidationOn = 'submit', parseValue = (defaultParseValue), formatErrorMessage = defaultFormatErrorMessage, _onUpdateValue, } = {}) {
-    const isOptional = schema.isOptional();
-    function validate(value) {
+export default function useField(schema, { name, value = '', disabled = false, touched = false, showValidationOn = 'submit', parseValue = (defaultParseValue), formatErrorMessage = defaultFormatErrorMessage, _onInit, _onUpdate, _storedField, } = {}) {
+    function _validate(value) {
         const { success, error } = schema.safeParse(value);
         if (!success) {
             return formatErrorMessage(error.issues[0], value, name);
         }
     }
-    const message = validate(value);
+    const message = _validate(value);
     const initialField = {
         value,
         disabled,
@@ -18,24 +17,35 @@ export default function useField(schema, { name, value = '', disabled = false, t
         valid: !message,
         errorMessage: message,
     };
-    const [field, setField] = useState(initialField);
+    const [field, setField] = useState(_storedField ?? initialField);
+    useEffect(() => {
+        if (_onInit && !_storedField) {
+            _onInit(field);
+        }
+    }, [_onInit, _storedField]);
     function update(data) {
         if (data.value !== undefined) {
             const dirty = data.value !== initialField.value;
-            const errorMessage = validate(data.value);
-            if (_onUpdateValue) {
-                _onUpdateValue(data.value, dirty);
-            }
-            setField((field) => ({
-                ...field,
+            const errorMessage = _validate(data.value);
+            const _data = {
                 touched: showValidationOn === 'change' ? dirty : field.touched,
                 dirty,
                 ...data,
                 errorMessage,
                 valid: !errorMessage,
+            };
+            if (_onUpdate) {
+                _onUpdate(_data);
+            }
+            setField((field) => ({
+                ...field,
+                ..._data,
             }));
         }
         else {
+            if (_onUpdate) {
+                _onUpdate(data);
+            }
             setField((field) => ({
                 ...field,
                 ...data,
@@ -43,33 +53,37 @@ export default function useField(schema, { name, value = '', disabled = false, t
         }
     }
     function reset() {
+        if (_onUpdate) {
+            _onUpdate(initialField);
+        }
         setField(initialField);
     }
+    function validate() {
+        return schema.safeParse(field.value);
+    }
     function onChange(e) {
         update({ value: parseValue(e) });
     }
-    const required = !isOptional;
     // Only show validation error when is touched
     const valid = !field.touched ? true : !field.errorMessage;
     // Only show errrorMessage and validation styles if the field is touched according to the config
     const errorMessage = field.touched ? field.errorMessage : undefined;
-    const touch = () => update({ touched: false });
+    const touch = () => update({ touched: true });
     const untouch = () => update({ touched: false });
     function getListeners() {
         if (showValidationOn === 'blur') {
             return {
-                onFocus: touch,
-                onBlur: untouch,
+                onFocus: untouch,
+                onBlur: touch,
             };
         }
         return {
-            onFocus: touch,
+            onFocus: untouch,
         };
     }
     const inputProps = {
         value: field.value,
         disabled: field.disabled,
-        required,
         name,
         'data-valid': valid,
         onChange,
@@ -80,20 +94,19 @@ export default function useField(schema, { name, value = '', disabled = false, t
         disabled: field.disabled,
         name,
         valid,
-        required,
         errorMessage,
         onChange,
         ...getListeners(),
     };
     return {
         ...field,
-        required,
         valid,
         update,
         reset,
+        validate,
         errorMessage,
         inputProps,
-        initial: initialField,
         props,
+        _initial: initialField,
     };
 }

package/dist/useFieldArray.d.ts

@@ -0,0 +1 @@
+export default function useFieldArray(): void;

package/dist/useFieldArray.js

@@ -0,0 +1,2 @@
+export default function useFieldArray() {
+}

package/dist/useForm.d.ts

@@ -1,19 +1,19 @@
 import { FormEvent, ChangeEvent } from 'react';
-import { z, ZodObject, ZodError, ZodRawShape, ZodIssue } from 'zod';
-import { Field, Options } from './types.js';
-export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, formatErrorMessage?: (error: ZodIssue, value: any, name: string) => string): {
-    useFormField: <T = string, C = ChangeEvent<HTMLInputElement>>(name: keyof S, options?: Omit<Options<T>, 'formatErrorMessage' | 'name' | '_onUpdateValue'>) => {
-        reset: () => void;
-        required: boolean;
+import { z, ZodObject, ZodError, ZodRawShape } from 'zod';
+import { $ZodIssue } from '@zod/core';
+import { Options } from './types.js';
+export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, formatErrorMessage?: (error: $ZodIssue, value: any, name?: string) => string): {
+    useFormField: <T = string, C = ChangeEvent<HTMLInputElement>>(_name: keyof S, options?: Omit<Options<T>, 'formatErrorMessage' | 'name' | '_onUpdateValue'>) => {
         valid: boolean;
-        update: (data: Partial<Field<T>>) => void;
+        update: (data: Partial<import("./types.js").Field<T>>) => void;
+        reset: () => void;
+        validate: () => z.ZodSafeParseResult<unknown>;
         errorMessage: string | undefined;
         inputProps: {
             onFocus: () => void;
             onBlur: () => void;
             value: T;
             disabled: boolean;
-            required: boolean;
             name: string | undefined;
             'data-valid': boolean;
             onChange: (e: C) => void;
@@ -22,19 +22,10 @@ export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, for
             onBlur?: undefined;
             value: T;
             disabled: boolean;
-            required: boolean;
             name: string | undefined;
             'data-valid': boolean;
             onChange: (e: C) => void;
         };
-        initial: {
-            value: T;
-            disabled: boolean;
-            touched: boolean;
-            dirty: boolean;
-            valid: boolean;
-            errorMessage: string | undefined;
-        };
         props: {
             onFocus: () => void;
             onBlur: () => void;
@@ -42,7 +33,6 @@ export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, for
             disabled: boolean;
             name: string | undefined;
             valid: boolean;
-            required: boolean;
             errorMessage: string | undefined;
             onChange: (e: C) => void;
         } | {
@@ -52,19 +42,23 @@ export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, for
             disabled: boolean;
             name: string | undefined;
             valid: boolean;
-            required: boolean;
             errorMessage: string | undefined;
             onChange: (e: C) => void;
         };
+        _initial: {
+            value: T;
+            disabled: boolean;
+            touched: boolean;
+            dirty: boolean;
+            valid: boolean;
+            errorMessage: string | undefined;
+        };
         value: T;
         disabled: boolean;
         touched: boolean;
         dirty: boolean;
     };
     handleSubmit: (onSubmit: (data: z.infer<typeof schema>) => void, onError?: (error: ZodError) => void) => (e: FormEvent<HTMLFormElement>) => void;
-    formProps: {
-        noValidate: boolean;
-    };
-    isDirty: () => boolean;
+    checkDirty: () => boolean;
     reset: () => void;
 };

package/dist/useForm.js

@@ -1,67 +1,53 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef } from 'react';
 import defaultFormatErrorMessage from './defaultFormatErrorMessage.js';
 import useField from './useField.js';
 function mapFieldsToData(fields) {
     const obj = {};
     for (const name in fields) {
-        obj[name] = fields[name].ref.current.value;
+        obj[name] = fields[name].value;
     }
     return obj;
 }
-// TODO: accept refined schemas, not possible due to https://github.com/colinhacks/zod/issues/2474
 export default function useForm(schema, formatErrorMessage = defaultFormatErrorMessage) {
-    const [fields, setFields] = useState({});
-    function useFormField(name, options = {}) {
-        const shape = schema.shape[name];
-        // @ts-ignore
+    const fields = useRef({});
+    function useFormField(_name, options = {}) {
+        const name = String(_name);
+        const shape = schema.shape[_name];
+        const stored = fields.current[name];
         const field = useField(shape, {
             ...options,
-            name: name,
+            name,
             formatErrorMessage,
-            _onUpdateValue: (value, dirty) => {
-                ref.current = {
-                    value,
-                    dirty,
+            // internals
+            _storedField: stored,
+            _onInit: (data) => {
+                fields.current[name] = {
+                    ...field,
+                    ...data,
                 };
             },
-        });
-        const ref = useRef({
-            value: field.value,
-            dirty: false,
-        });
-        function reset() {
-            ref.current = {
-                value: field.initial.value,
-                dirty: false,
-            };
-            field.reset();
-        }
-        useEffect(() => setFields((fields) => ({
-            ...fields,
-            [name]: {
-                ref,
-                update: field.update,
-                reset,
+            _onUpdate: (data) => {
+                fields.current[name] = {
+                    ...fields.current[name],
+                    ...data,
+                };
             },
-        })), []);
-        return {
-            ...field,
-            reset,
-        };
+        });
+        return field;
     }
     function touchFields() {
-        for (const name in fields) {
-            fields[name].update({ touched: true });
+        for (const name in fields.current) {
+            fields.current[name].update({ touched: true });
         }
     }
     function reset() {
-        for (const name in fields) {
-            fields[name].reset();
+        for (const name in fields.current) {
+            fields.current[name].reset();
         }
     }
-    function isDirty() {
-        for (const name in fields) {
-            if (fields[name].ref.current.dirty) {
+    function checkDirty() {
+        for (const name in fields.current) {
+            if (fields.current[name].dirty) {
                 return true;
             }
         }
@@ -72,7 +58,7 @@ export default function useForm(schema, formatErrorMessage = defaultFormatErrorM
             e.stopPropagation();
             e.preventDefault();
             touchFields();
-            const data = mapFieldsToData(fields);
+            const data = mapFieldsToData(fields.current);
             const parsed = schema.safeParse(data);
             if (parsed.success) {
                 onSubmit(parsed.data);
@@ -84,14 +70,10 @@ export default function useForm(schema, formatErrorMessage = defaultFormatErrorM
             }
         };
     }
-    const formProps = {
-        noValidate: true,
-    };
     return {
         useFormField,
         handleSubmit,
-        formProps,
-        isDirty,
+        checkDirty,
         reset,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weser/forms",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "React hooks for forms with zod schemas",
   "author": "Robin Weser <robin@weser.io>",
   "license": "MIT",
@@ -55,5 +55,8 @@
     "typescript": "^5.4.5",
     "zod": "4.0.0-beta.20250505T195954"
   },
-  "gitHead": "5f42d8868acf40e4d8c417883d6b23b4cfe8ca90"
+  "dependencies": {
+    "@zod/core": "^0.11.6"
+  },
+  "gitHead": "abbfb42cee4e8bdbbd870bd1086ebc65b6074584"
 }