@weser/forms 0.0.17 → 0.0.18

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { default as useForm } from './useForm.js';
+export { default as useForm, type FieldsMap } from './useForm.js';
 export { default as useField } from './useField.js';
 export type { Field } from './types.js';

package/dist/types.d.ts

@@ -7,13 +7,14 @@ export type Field<T> = {
     valid: boolean;
     errorMessage?: string;
 };
-export type Options<T> = {
+export type Options<T, C> = {
     name?: string;
     value?: T;
     disabled?: boolean;
     touched?: boolean;
     showValidationOn?: 'submit' | 'blur' | 'change';
-    parseValue?: (e: any) => T;
+    parseEvent?: (e: C) => T;
+    formatValue?: (value: T) => any;
     formatErrorMessage?: (error: $ZodIssue, value: T, name?: string) => string;
     _onInit?: (field: Field<T>) => void;
     _onUpdate?: (field: Partial<Field<T>>) => void;

package/dist/useField.d.ts

@@ -2,7 +2,7 @@ import { ChangeEvent } from 'react';
 import { ZodType } from 'zod';
 import { $ZodIssue } from 'zod/v4/core';
 import { Field, Options } from './types.js';
-export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(schema: ZodType, { name, value, disabled, touched, showValidationOn, parseValue, formatErrorMessage, _onInit, _onUpdate, _storedField, }?: Options<T>): {
+export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(schema: ZodType, { name, value, disabled, touched, showValidationOn, parseEvent, formatValue, formatErrorMessage, _onInit, _onUpdate, _storedField, }?: Options<T, C>): {
     valid: boolean;
     update: (data: Partial<Field<T>>) => void;
     reset: () => void;
@@ -11,7 +11,7 @@ export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(
     inputProps: {
         onFocus: () => void;
         onBlur: () => void;
-        value: T;
+        value: any;
         disabled: boolean;
         name: string | undefined;
         'data-valid': boolean;
@@ -19,7 +19,7 @@ export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(
     } | {
         onFocus: () => void;
         onBlur?: undefined;
-        value: T;
+        value: any;
         disabled: boolean;
         name: string | undefined;
         'data-valid': boolean;
@@ -28,7 +28,7 @@ export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(
     props: {
         onFocus: () => void;
         onBlur: () => void;
-        value: T;
+        value: any;
         disabled: boolean;
         name: string | undefined;
         valid: boolean;
@@ -37,7 +37,7 @@ export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(
     } | {
         onFocus: () => void;
         onBlur?: undefined;
-        value: T;
+        value: any;
         disabled: boolean;
         name: string | undefined;
         valid: boolean;

package/dist/useField.js

@@ -1,7 +1,8 @@
 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, _onInit, _onUpdate, _storedField, } = {}) {
+const defaultParseEvent = (e) => e.target.value;
+const defaultFormatValue = (value) => value;
+export default function useField(schema, { name, value = '', disabled = false, touched = false, showValidationOn = 'submit', parseEvent = (defaultParseEvent), formatValue = (defaultFormatValue), formatErrorMessage = defaultFormatErrorMessage, _onInit, _onUpdate, _storedField, } = {}) {
     function _validate(value) {
         const { success, error } = schema.safeParse(value);
         if (!success && error.issues.length > 0) {
@@ -62,7 +63,7 @@ export default function useField(schema, { name, value = '', disabled = false, t
         return schema.safeParse(field.value);
     }
     function onChange(e) {
-        update({ value: parseValue(e) });
+        update({ value: parseEvent(e) });
     }
     // Only show validation error when is touched
     const valid = !field.touched ? true : !field.errorMessage;
@@ -88,8 +89,9 @@ export default function useField(schema, { name, value = '', disabled = false, t
             errorMessage,
         }));
     }
+    const inputValue = formatValue(field.value);
     const inputProps = {
-        value: field.value,
+        value: inputValue,
         disabled: field.disabled,
         name,
         'data-valid': valid,
@@ -97,7 +99,7 @@ export default function useField(schema, { name, value = '', disabled = false, t
         ...getListeners(),
     };
     const props = {
-        value: field.value,
+        value: inputValue,
         disabled: field.disabled,
         name,
         valid,

package/dist/useForm.d.ts

@@ -2,8 +2,14 @@ import { FormEvent, ChangeEvent } from 'react';
 import { z, ZodObject, ZodError, ZodRawShape } from 'zod';
 import { $ZodIssue } from 'zod/v4/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'>) => {
+import useField from './useField.js';
+export type FieldsMap = Record<string, ReturnType<typeof useField<any, any>>>;
+type Config = {
+    formatErrorMessage?: (error: $ZodIssue, value: any, name?: string) => string;
+    _onUpdate?: (fields: FieldsMap) => void;
+};
+export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, { formatErrorMessage, _onUpdate }?: Config): {
+    useFormField: <T = string, C = ChangeEvent<HTMLInputElement>>(_name: keyof S, options?: Omit<Options<T, C>, 'formatErrorMessage' | 'name' | '_onUpdateValue'>) => {
         valid: boolean;
         update: (data: Partial<import("./types.js").Field<T>>) => void;
         reset: () => void;
@@ -12,7 +18,7 @@ export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, for
         inputProps: {
             onFocus: () => void;
             onBlur: () => void;
-            value: T;
+            value: any;
             disabled: boolean;
             name: string | undefined;
             'data-valid': boolean;
@@ -20,7 +26,7 @@ export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, for
         } | {
             onFocus: () => void;
             onBlur?: undefined;
-            value: T;
+            value: any;
             disabled: boolean;
             name: string | undefined;
             'data-valid': boolean;
@@ -29,7 +35,7 @@ export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, for
         props: {
             onFocus: () => void;
             onBlur: () => void;
-            value: T;
+            value: any;
             disabled: boolean;
             name: string | undefined;
             valid: boolean;
@@ -38,7 +44,7 @@ export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, for
         } | {
             onFocus: () => void;
             onBlur?: undefined;
-            value: T;
+            value: any;
             disabled: boolean;
             name: string | undefined;
             valid: boolean;
@@ -63,3 +69,4 @@ export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, for
     checkDirty: () => boolean;
     reset: () => void;
 };
+export {};

package/dist/useForm.js

@@ -1,14 +1,7 @@
 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].value;
-    }
-    return obj;
-}
-export default function useForm(schema, formatErrorMessage = defaultFormatErrorMessage) {
+export default function useForm(schema, { formatErrorMessage = defaultFormatErrorMessage, _onUpdate } = {}) {
     const fields = useRef({});
     function useFormField(_name, options = {}) {
         const name = String(_name);
@@ -31,6 +24,9 @@ export default function useForm(schema, formatErrorMessage = defaultFormatErrorM
                     ...fields.current[name],
                     ...data,
                 };
+                if (_onUpdate) {
+                    _onUpdate(fields.current);
+                }
             },
         });
         return field;
@@ -92,3 +88,10 @@ export default function useForm(schema, formatErrorMessage = defaultFormatErrorM
         reset,
     };
 }
+function mapFieldsToData(fields) {
+    const obj = {};
+    for (const name in fields) {
+        obj[name] = fields[name].value;
+    }
+    return obj;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weser/forms",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "React hooks for forms with zod schemas",
   "author": "Robin Weser <robin@weser.io>",
   "license": "MIT",
@@ -55,5 +55,5 @@
     "typescript": "^5.4.5",
     "zod": "^4.1.11"
   },
-  "gitHead": "71b258e9fc17ff82728fc3b51ac935f48b11f204"
+  "gitHead": "4dd312c8cf505d0c06d25ca489b893a6c6c0d9fe"
 }