@iwsio/forms - npm Package Compare versions

Comparing version 4.3.3 to 5.0.0

dist/ControlledFieldManager.d.ts

@@ -1,11 +0,10 @@
-import { FieldManagerProps } from './FieldManager';
-import { useFieldState } from './useFieldState';
-export type ControlledFieldManagerProps = Omit<FieldManagerProps, 'fields' | 'defaultValues'> & {
-    fieldState: ReturnType<typeof useFieldState>;
-};
+import { ComponentProps } from 'react';
+import { FieldManagerProps } from './FieldManager.js';
+import { UseFieldStateResult } from './types.js';
+export interface ControlledFieldManagerProps extends ComponentProps<'form'>, Omit<FieldManagerProps, 'fields' | 'defaultValues'> {
+    fieldState: UseFieldStateResult;
+}
 /**
- * Use this component if you want to manage field state remotely. This is useful when you're setting up form context elswhere and want the field values to change from outside input interactions.
+ * Use this component if you want to manage field state remotely. This is useful when you're setting up form context elsewhere and want the field values to change from outside input interactions.
  */
-export declare const ControlledFieldManager: import("react").ForwardRefExoticComponent<Omit<FieldManagerProps, "defaultValues" | "fields"> & {
-    fieldState: ReturnType<typeof useFieldState>;
-} & import("react").RefAttributes<HTMLFormElement>>;
+export declare const ControlledFieldManager: ({ children, fieldState, ref, ...props }: ControlledFieldManagerProps) => import("react/jsx-runtime").JSX.Element;

dist/ControlledFieldManager.js

@@ -1,15 +0,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ControlledFieldManager = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const FieldManagerContext_1 = require("./FieldManagerContext");
-const FieldManagerForm_1 = require("./FieldManagerForm");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldManagerContext } from './FieldManagerContext.js';
+import { FieldManagerForm } from './FieldManagerForm.js';
 /**
- * Use this component if you want to manage field state remotely. This is useful when you're setting up form context elswhere and want the field values to change from outside input interactions.
+ * Use this component if you want to manage field state remotely. This is useful when you're setting up form context elsewhere and want the field values to change from outside input interactions.
  */
-exports.ControlledFieldManager = (0, react_1.forwardRef)(({ children, fieldState, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(FieldManagerContext_1.FieldManagerContext.Provider, { value: fieldState, children: (0, jsx_runtime_1.jsx)(FieldManagerForm_1.FieldManagerForm, { ref: ref, ...props, children: children }) }));
-});
-exports.ControlledFieldManager.displayName = 'ControlledFieldManager';
+export const ControlledFieldManager = ({ children, fieldState, ref, ...props }) => {
+    return (_jsx(FieldManagerContext.Provider, { value: fieldState, children: _jsx(FieldManagerForm, { ref: ref, ...props, children: children }) }));
+};
 //# sourceMappingURL=ControlledFieldManager.js.map

dist/defaults.d.ts

@@ -15,2 +15,17 @@ /**
  */
-export declare const defaults: (dest: any, ...sources: any[]) => any;
+export declare const defaults: <T extends Record<string, unknown>>(dest: T, ...sources: Array<T | undefined>) => T;
+/**
+ * Deep defaults. This basically assigns in when target prop is undefined and recurses through source object props, left to right.
+ *
+ * i.e.
+ *
+ * ```
+ * defaults({a: 1, d: { f: 1 }}, {b: 2}, {b: 3, c: 4}, {d: {e: 5, f: 2}})
+ * result: {a: 1, b: 2, c: 4, d: { e: 5, f: 1}}
+ * ```
+ *
+ * @param dest destination object.
+ * @param sources params sources applied sequentially left to right.
+ * @returns
+ */
+export declare const defaultsDeep: (dest: Record<string, unknown>, ...sources: Record<string, unknown>[]) => Record<string, unknown>;

dist/defaults.js

@@ -1,4 +0,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaults = void 0;
+import { isRecordObject } from './isRecordObject.js';
 /**
@@ -18,14 +16,14 @@ * Shallow defaults. This basically assigns in when target is undefined.
  */
-const defaults = (dest, ...sources) => {
-    if (sources == null)
+export const defaults = (dest, ...sources) => {
+    if (sources == null || sources.length === 0)
         return dest;
     // for each source
-    for (let ix = 0; ix < sources.length; ix++) {
-        const source = sources[ix];
+    for (const source of sources) {
+        if (source == null)
+            continue;
         const keys = Object.keys(source);
         // for each key
-        for (let kx = 0; kx < keys.length; kx++) {
-            const key = keys[kx];
-            if (typeof dest[key] === 'undefined' && typeof source[key] !== 'undefined') { // prop doesn't exist on dest
-                dest[key] = source[key];
+        for (const key of keys) {
+            if (dest[key] == null && source[key] != null) { // prop doesn't exist on dest
+                Object.assign(dest, { [key]: source[key] });
             }
@@ -36,3 +34,44 @@ }
 };
-exports.defaults = defaults;
+/**
+ * Deep defaults. This basically assigns in when target prop is undefined and recurses through source object props, left to right.
+ *
+ * i.e.
+ *
+ * ```
+ * defaults({a: 1, d: { f: 1 }}, {b: 2}, {b: 3, c: 4}, {d: {e: 5, f: 2}})
+ * result: {a: 1, b: 2, c: 4, d: { e: 5, f: 1}}
+ * ```
+ *
+ * @param dest destination object.
+ * @param sources params sources applied sequentially left to right.
+ * @returns
+ */
+export const defaultsDeep = (dest, ...sources) => {
+    if (sources == null || sources.length === 0)
+        return dest;
+    // for each source
+    for (const source of sources) {
+        const keys = Object.keys(source);
+        // for each key
+        for (const key of keys) {
+            const destValue = dest[key];
+            const sourceValue = source[key];
+            if (destValue == null && sourceValue != null) { // prop doesn't exist on dest
+                if (isRecordObject(sourceValue)) {
+                    dest[key] = defaultsDeep({}, sourceValue);
+                }
+                else
+                    dest[key] = sourceValue;
+            }
+            else {
+                if (isRecordObject(destValue)) {
+                    if (isRecordObject(sourceValue)) {
+                        dest[key] = defaultsDeep(destValue, sourceValue);
+                    } // else ignore. source is not an object
+                } // else ignore; dest is not an object
+            }
+        }
+    }
+    return dest;
+};
 //# sourceMappingURL=defaults.js.map

dist/FieldManager.d.ts

@@ -1,29 +0,28 @@
-import { PropsWithChildren } from 'react';
-import { ValidatedFormProps } from './ValidatedForm';
-import { FieldValues } from './types';
-import { ErrorMapping } from './useErrorMapping';
-export type FieldManagerProps = Omit<ValidatedFormProps, 'onValidSubmit' | 'noValidate'> & PropsWithChildren<{
+import { FieldValues } from './types.js';
+import { ErrorMapping } from './useErrorMapping.js';
+import { ValidatedFormProps } from './ValidatedForm.js';
+export interface FieldManagerProps extends Omit<ValidatedFormProps, 'onValidSubmit'> {
     /**
-     * Initial field values to setup the form with. If you want to change these after initialization, use the `setFieldValues` method from the `useFieldManager` hook.
-     */
+         * Initial field values to setup the form with. If you want to change these after initialization, use the `setFieldValues` method from the `useFieldManager` hook.
+         */
     fields: FieldValues;
     /**
-     * Initial default values to setup the form with. If you want to change these after initialization, use the `setDefaultValues` method from the `useFieldManager` hook.
-     */
+         * Initial default values to setup the form with. If you want to change these after initialization, use the `setDefaultValues` method from the `useFieldManager` hook.
+         */
     defaultValues?: Record<string, string>;
     /**
-     * Error mapping to be used for validation. If not provided, default error messages are used.
-     */
+         * Error mapping to be used for validation. If not provided, default error messages are used.
+         */
     errorMapping?: ErrorMapping;
     /**
-     * Callback to be called when form is valid and submitted. Provides current field values.
-     */
+         * Callback to be called when form is valid and submitted. Provides current field values.
+         */
     onValidSubmit?: (fields: FieldValues) => void;
     /**
-     * If true, the form will be set to busy after a valid submit event is triggered and wait for `toggleBusy` to be called with a value of `false` to reset.
-     * This is useful for forms that need to wait for a server response before allowing another submit.
-     * Default value: false
-     */
+         * If true, the form will be set to busy after a valid submit event is triggered and wait for `toggleBusy` to be called with a value of `false` to reset.
+         * This is useful for forms that need to wait for a server response before allowing another submit.
+         * Default value: false
+         */
     holdBusyAfterSubmit?: boolean;
-}>;
+}
 /**
@@ -35,27 +34,2 @@ * Setup a field manager to maintain field values and validation state in a form. This directly renders a <form> with attributes provided to this component.
  */
-export declare const FieldManager: import("react").ForwardRefExoticComponent<Omit<ValidatedFormProps, "onValidSubmit" | "noValidate"> & {
-    /**
-     * Initial field values to setup the form with. If you want to change these after initialization, use the `setFieldValues` method from the `useFieldManager` hook.
-     */
-    fields: FieldValues;
-    /**
-     * Initial default values to setup the form with. If you want to change these after initialization, use the `setDefaultValues` method from the `useFieldManager` hook.
-     */
-    defaultValues?: Record<string, string>;
-    /**
-     * Error mapping to be used for validation. If not provided, default error messages are used.
-     */
-    errorMapping?: ErrorMapping;
-    /**
-     * Callback to be called when form is valid and submitted. Provides current field values.
-     */
-    onValidSubmit?: (fields: FieldValues) => void;
-    /**
-     * If true, the form will be set to busy after a valid submit event is triggered and wait for `toggleBusy` to be called with a value of `false` to reset.
-     * This is useful for forms that need to wait for a server response before allowing another submit.
-     * Default value: false
-     */
-    holdBusyAfterSubmit?: boolean;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLFormElement>>;
+export declare const FieldManager: ({ children, fields, defaultValues, errorMapping, ...props }: FieldManagerProps) => import("react/jsx-runtime").JSX.Element;

dist/FieldManager.js

@@ -1,9 +0,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldManager = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const FieldManagerContext_1 = require("./FieldManagerContext");
-const useFieldState_1 = require("./useFieldState");
-const FieldManagerForm_1 = require("./FieldManagerForm");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldManagerContext } from './FieldManagerContext.js';
+import { FieldManagerForm } from './FieldManagerForm.js';
+import { useFieldState } from './useFieldState.js';
 /**
@@ -15,7 +11,6 @@ * Setup a field manager to maintain field values and validation state in a form. This directly renders a <form> with attributes provided to this component.
  */
-exports.FieldManager = (0, react_1.forwardRef)(({ children, fields, defaultValues, errorMapping, ...props }, ref) => {
-    const fieldState = (0, useFieldState_1.useFieldState)(fields, { defaultValues, errorMapping });
-    return ((0, jsx_runtime_1.jsx)(FieldManagerContext_1.FieldManagerContext.Provider, { value: fieldState, children: (0, jsx_runtime_1.jsx)(FieldManagerForm_1.FieldManagerForm, { ref: ref, ...props, children: children }) }));
-});
-exports.FieldManager.displayName = 'FieldManager';
+export const FieldManager = ({ children, fields, defaultValues, errorMapping, ...props }) => {
+    const fieldState = useFieldState(fields, { defaultValues, errorMapping });
+    return (_jsx(FieldManagerContext, { value: fieldState, children: _jsx(FieldManagerForm, { ...props, children: children }) }));
+};
 //# sourceMappingURL=FieldManager.js.map

dist/FieldManagerContext.d.ts

@@ -1,1 +0,2 @@
-export declare const FieldManagerContext: import("react").Context<any>;
+import { UseFieldStateResult } from './types.js';
+export declare const FieldManagerContext: import("react").Context<UseFieldStateResult | undefined>;

dist/FieldManagerContext.js

@@ -1,6 +0,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldManagerContext = void 0;
-const react_1 = require("react");
-exports.FieldManagerContext = (0, react_1.createContext)(undefined);
+import { createContext } from 'react';
+export const FieldManagerContext = createContext(undefined);
 //# sourceMappingURL=FieldManagerContext.js.map

dist/FieldManagerForm.d.ts

@@ -1,4 +0,4 @@
-import { ValidatedFormProps } from './ValidatedForm';
-import { FieldValues } from './types';
-export type FieldManagerFormProps = Omit<ValidatedFormProps, 'onValidSubmit' | 'noValidate'> & {
+import { FieldValues } from './types.js';
+import { ValidatedFormProps } from './ValidatedForm.js';
+export interface FieldManagerFormProps extends Omit<ValidatedFormProps, 'onValidSubmit'> {
     /**
@@ -14,14 +14,3 @@ * Callback to be called when form is valid and submitted. Provides current field values.
     holdBusyAfterSubmit?: boolean;
-};
-export declare const FieldManagerForm: import("react").ForwardRefExoticComponent<Omit<ValidatedFormProps, "onValidSubmit" | "noValidate"> & {
-    /**
-     * Callback to be called when form is valid and submitted. Provides current field values.
-     */
-    onValidSubmit?: (fields: FieldValues) => void;
-    /**
-     * If true, the form will be set to busy after a valid submit event is triggered and wait for `toggleBusy` to be called with a value of `false` to reset.
-     * This is useful for forms that need to wait for a server response before allowing another submit.
-     * Default value: false
-     */
-    holdBusyAfterSubmit?: boolean;
-} & import("react").RefAttributes<HTMLFormElement>>;
+}
+export declare const FieldManagerForm: import("react").ForwardRefExoticComponent<Omit<FieldManagerFormProps, "ref"> & import("react").RefAttributes<HTMLFormElement>>;

dist/FieldManagerForm.js

@@ -1,26 +0,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldManagerForm = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const useFieldManager_1 = require("./useFieldManager");
-const ValidatedForm_1 = require("./ValidatedForm");
-exports.FieldManagerForm = (0, react_1.forwardRef)(({ children, onValidSubmit, holdBusyAfterSubmit, reportValidity = false, nativeValidation = false, className = '', ...props }, ref) => {
-    const { fields, setReportValidation, toggleFormBusy } = (0, useFieldManager_1.useFieldManager)();
-    const handleLocalSubmit = () => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import { useFieldManager } from './useFieldManager.js';
+import { ValidatedForm } from './ValidatedForm.js';
+export const FieldManagerForm = forwardRef(({ children, onValidSubmit, holdBusyAfterSubmit, reportValidity = false, nativeValidation = false, className = '', ...props }, ref) => {
+    const { fields, setReportValidation, toggleFormBusy } = useFieldManager();
+    const handleLocalSubmit = (e) => {
+        e.preventDefault();
         setReportValidation(true);
     };
-    // no args; this comes from ValidatedForm
-    const handleLocalValidSubmit = () => {
+    const handleLocalValidSubmit = useCallback(() => {
         toggleFormBusy(true);
-        if (onValidSubmit != null) {
-            onValidSubmit(fields);
-        }
+        onValidSubmit?.(fields);
         if (holdBusyAfterSubmit)
             return;
         toggleFormBusy(false);
-    };
-    return (0, jsx_runtime_1.jsx)(ValidatedForm_1.ValidatedForm, { ref: ref, ...props, nativeValidation: nativeValidation, reportValidity: reportValidity, className: className, onValidSubmit: handleLocalValidSubmit, onSubmit: handleLocalSubmit, children: children });
+    }, [fields, holdBusyAfterSubmit, onValidSubmit, toggleFormBusy]);
+    return _jsx(ValidatedForm, { ref: ref, ...props, nativeValidation: nativeValidation, reportValidity: reportValidity, className: className, onValidSubmit: handleLocalValidSubmit, onSubmit: handleLocalSubmit, children: children });
 });
-exports.FieldManagerForm.displayName = 'FieldManagerForm';
+FieldManagerForm.displayName = 'FieldManagerForm';
 //# sourceMappingURL=FieldManagerForm.js.map

dist/index.d.ts

@@ -1,16 +0,16 @@
-export { Input, InputProps } from './Input';
-export * from './InputField';
-export { Select, SelectProps } from './Select';
-export * from './SelectField';
-export { TextArea, TextAreaProps } from './TextArea';
-export * from './TextAreaField';
-export * from './InvalidFeedbackForField';
-export * from './types';
-export * from './FieldManager';
-export * from './ControlledFieldManager';
-export * from './useFieldState';
-export * from './useFieldManager';
-export * from './useForwardRef';
-export * from './ValidatedForm';
-export * from './useErrorMapping';
-export * from './validityState';
+export * from './ControlledFieldManager.js';
+export * from './FieldManager.js';
+export { Input, InputProps } from './Input.js';
+export * from './InputField.js';
+export * from './InvalidFeedbackForField.js';
+export { Select, SelectProps } from './Select.js';
+export * from './SelectField.js';
+export { TextArea, TextAreaProps } from './TextArea.js';
+export * from './TextAreaField.js';
+export * from './types.js';
+export * from './useErrorMapping.js';
+export * from './useFieldManager.js';
+export * from './useFieldState.js';
+export * from './useForwardRef.js';
+export * from './ValidatedForm.js';
+export * from './validityState.js';

dist/index.js

@@ -1,37 +0,18 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextArea = exports.Select = exports.Input = void 0;
-var Input_1 = require("./Input");
-Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
-__exportStar(require("./InputField"), exports);
-var Select_1 = require("./Select");
-Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
-__exportStar(require("./SelectField"), exports);
-var TextArea_1 = require("./TextArea");
-Object.defineProperty(exports, "TextArea", { enumerable: true, get: function () { return TextArea_1.TextArea; } });
-__exportStar(require("./TextAreaField"), exports);
-__exportStar(require("./InvalidFeedbackForField"), exports);
-__exportStar(require("./types"), exports);
-__exportStar(require("./FieldManager"), exports);
-__exportStar(require("./ControlledFieldManager"), exports);
-__exportStar(require("./useFieldState"), exports);
-__exportStar(require("./useFieldManager"), exports);
-__exportStar(require("./useForwardRef"), exports);
-__exportStar(require("./ValidatedForm"), exports);
-__exportStar(require("./useErrorMapping"), exports);
-__exportStar(require("./validityState"), exports);
+export * from './ControlledFieldManager.js';
+export * from './FieldManager.js';
+export { Input } from './Input.js';
+export * from './InputField.js';
+export * from './InvalidFeedbackForField.js';
+export { Select } from './Select.js';
+export * from './SelectField.js';
+export { TextArea } from './TextArea.js';
+export * from './TextAreaField.js';
+export * from './types.js';
+export * from './useErrorMapping.js';
+export * from './useFieldManager.js';
+export * from './useFieldState.js';
+export * from './useForwardRef.js';
+export * from './ValidatedForm.js';
+export * from './validityState.js';
+// NOTE: for code splitting, you can import modules directly
 //# sourceMappingURL=index.js.map

dist/Input.d.ts

@@ -1,5 +0,6 @@
-import { InputHTMLAttributes } from 'react';
-import { ValidationProps } from './types';
-export type InputProps = ValidationProps & InputHTMLAttributes<HTMLInputElement>;
-export type Ref = HTMLInputElement;
-export declare const Input: import("react").ForwardRefExoticComponent<ValidationProps & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+import { ComponentProps } from 'react';
+import { ValidationProps } from './types.js';
+export interface InputProps extends ValidationProps, Omit<ComponentProps<'input'>, 'name'> {
+    name: string;
+}
+export declare const Input: ({ onFieldError, fieldError, name, type, onChange, value, checked, onInvalid, ref, ...other }: InputProps) => import("react/jsx-runtime").JSX.Element;

dist/Input.js

@@ -1,42 +0,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const useForwardRef_1 = require("./useForwardRef");
-exports.Input = (0, react_1.forwardRef)(({ onFieldError, fieldError, name, type = 'text', onChange, value, checked, onInvalid, ...other }, ref) => {
-    const localRef = (0, useForwardRef_1.useForwardRef)(ref);
-    const localSetError = (message) => {
-        if (onFieldError != null)
-            onFieldError(name, localRef.current.validity, message);
-    };
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useRef } from 'react';
+export const Input = ({ onFieldError, fieldError, name, type = 'text', onChange, value, checked, onInvalid, ref, ...other }) => {
+    const localRef = useRef(null);
+    // @ts-expect-error -- returning whole ref object
+    useImperativeHandle(ref, () => localRef.current, [localRef]);
     const localOnChange = (e) => {
-        localSetError(undefined);
         e.target.setCustomValidity('');
-        if (onChange != null)
-            onChange(e);
-        if (!localRef.current.validity.valid)
-            localSetError(localRef.current.validationMessage);
+        onChange?.(e);
+        if (!e.target.validity.valid)
+            onFieldError?.(name, e.target.validity, e.target.validationMessage);
     };
     const handleInvalid = (e) => {
-        localSetError(e.target.validationMessage);
-        if (onInvalid != null)
-            onInvalid(e);
+        const target = e.target;
+        onFieldError?.(name, target.validity, target.validationMessage);
+        onInvalid?.(e);
     };
-    (0, react_1.useEffect)(() => {
-        if (!localRef.current.validity.valid)
-            localSetError(localRef.current.validationMessage);
-    }, []);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (fieldError == null)
-            return localRef.current.setCustomValidity('');
-        if (fieldError.message == null)
-            return localRef.current.setCustomValidity('');
-        if (fieldError.validity?.customError && fieldError.message !== localRef.current.validationMessage) {
-            localRef.current.setCustomValidity(fieldError.message);
+            return localRef.current?.setCustomValidity(''); // clear it.
+        // intended to track upstream errors.
+        if (fieldError.validity?.customError && fieldError.message !== localRef.current?.validationMessage) {
+            localRef.current?.setCustomValidity(fieldError.message ?? '');
         }
     }, [fieldError]);
-    return ((0, jsx_runtime_1.jsx)("input", { ref: localRef, name: name, type: type, onInvalid: handleInvalid, ...(/checkbox|radio/i.test(type) ? { value, checked } : { value }), onChange: localOnChange, ...other }));
-});
-exports.Input.displayName = 'Input';
+    return (_jsx("input", { ...other, ref: localRef, name: name, type: type, onInvalid: handleInvalid, ...(/checkbox|radio/i.test(type) ? { value, checked } : { value }), onChange: localOnChange }));
+};
 //# sourceMappingURL=Input.js.map

dist/InputField.d.ts

@@ -1,8 +0,6 @@
-import { InputProps } from './Input';
-import { FieldChangeEventHandler } from './types';
-export type InputFieldProps = Omit<InputProps, 'DefaultValue' | 'onChange'> & {
+import { InputProps } from './Input.js';
+import { FieldChangeEventHandler } from './types.js';
+export interface InputFieldProps extends Omit<InputProps, 'onChange'> {
     onChange?: FieldChangeEventHandler;
-};
-export declare const InputField: import("react").ForwardRefExoticComponent<Omit<InputProps, "onChange" | "DefaultValue"> & {
-    onChange?: FieldChangeEventHandler;
-} & import("react").RefAttributes<HTMLInputElement>>;
+}
+export declare const InputField: ({ type, name, onChange, value, ...other }: InputFieldProps) => import("react/jsx-runtime").JSX.Element;

dist/InputField.js

@@ -1,16 +0,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Input_1 = require("./Input");
-const useFieldManager_1 = require("./useFieldManager");
-const useForwardRef_1 = require("./useForwardRef");
-exports.InputField = (0, react_1.forwardRef)(({ type = 'text', name, onChange, value, ...other }, ref) => {
-    const localRef = (0, useForwardRef_1.useForwardRef)(ref);
-    const { handleChange: managerOnChange, fields, setFieldError, fieldErrors, mapError } = (0, useFieldManager_1.useFieldManager)();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from './Input.js';
+import { useFieldManager } from './useFieldManager.js';
+export const InputField = ({ type = 'text', name, onChange, value, ...other }) => {
+    const { handleChange: managerOnChange, fields, setFieldError, fieldErrors, mapError } = useFieldManager();
     const handleOnChange = (e) => {
         const result = managerOnChange(e);
-        if (onChange != null)
-            onChange(result);
+        onChange?.(result);
     };
@@ -21,5 +14,4 @@ const handleFieldError = (key, validity, message) => {
     };
-    return ((0, jsx_runtime_1.jsx)(Input_1.Input, { ref: localRef, onChange: handleOnChange, ...(/checkbox|radio/i.test(type) ? { value, checked: fields[name] === value } : { value: fields[name] }), type: type, name: name, fieldError: fieldErrors[name], onFieldError: handleFieldError, ...other }));
-});
-exports.InputField.displayName = 'InputField';
+    return (_jsx(Input, { ...other, onChange: handleOnChange, ...(/checkbox|radio/i.test(type) ? { value, checked: fields[name] === value } : { value: fields[name] }), type: type, name: name, fieldError: fieldErrors[name], onFieldError: handleFieldError }));
+};
 //# sourceMappingURL=InputField.js.map

dist/InvalidFeedbackForField.d.ts

@@ -1,5 +0,5 @@
-import { FC, HTMLAttributes } from 'react';
-export type InvalidFeedbackForFieldProps = {
+import { ComponentProps } from 'react';
+export interface InvalidFeedbackForFieldProps extends ComponentProps<'span'> {
     name: string;
-} & HTMLAttributes<HTMLSpanElement>;
+}
 /**
@@ -9,2 +9,2 @@ * Returns a simple <span/> containing the error if one exists while `reportValidation` in field state is `true`.
  */
-export declare const InvalidFeedbackForField: FC<InvalidFeedbackForFieldProps>;
+export declare const InvalidFeedbackForField: ({ name, ...props }: InvalidFeedbackForFieldProps) => import("react/jsx-runtime").JSX.Element;

dist/InvalidFeedbackForField.js

@@ -1,6 +0,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InvalidFeedbackForField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const useFieldManager_1 = require("./useFieldManager");
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useFieldManager } from './useFieldManager.js';
 /**
@@ -10,8 +7,7 @@ * Returns a simple <span/> containing the error if one exists while `reportValidation` in field state is `true`.
  */
-const InvalidFeedbackForField = ({ name, ...props }) => {
-    const { checkFieldError } = (0, useFieldManager_1.useFieldManager)();
+export const InvalidFeedbackForField = ({ name, ...props }) => {
+    const { checkFieldError } = useFieldManager();
     const error = checkFieldError(name);
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error && (0, jsx_runtime_1.jsx)("span", { ...props, children: error }) });
+    return _jsx(_Fragment, { children: error && _jsx("span", { ...props, children: error }) });
 };
-exports.InvalidFeedbackForField = InvalidFeedbackForField;
 //# sourceMappingURL=InvalidFeedbackForField.js.map

dist/Select.d.ts

@@ -1,7 +0,6 @@
-import { PropsWithChildren, SelectHTMLAttributes } from 'react';
-import { ValidationProps } from './types';
-export type SelectProps = PropsWithChildren<SelectHTMLAttributes<HTMLSelectElement>> & ValidationProps;
-export type Ref = HTMLSelectElement;
-export declare const Select: import("react").ForwardRefExoticComponent<SelectHTMLAttributes<HTMLSelectElement> & {
-    children?: import("react").ReactNode | undefined;
-} & ValidationProps & import("react").RefAttributes<HTMLSelectElement>>;
+import { ComponentProps } from 'react';
+import { ValidationProps } from './types.js';
+export interface SelectProps extends ValidationProps, Omit<ComponentProps<'select'>, 'name'> {
+    name: string;
+}
+export declare const Select: ({ onFieldError, onInvalid, fieldError, name, onChange, value, children, ref, ...other }: SelectProps) => import("react/jsx-runtime").JSX.Element;

dist/Select.js

@@ -1,40 +0,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const useForwardRef_1 = require("./useForwardRef");
-exports.Select = (0, react_1.forwardRef)(({ onFieldError, onInvalid, fieldError, name, onChange, value, children, ...other }, ref) => {
-    const localRef = (0, useForwardRef_1.useForwardRef)(ref);
-    const localSetError = (message) => {
-        if (onFieldError != null)
-            onFieldError(name, localRef.current.validity, message);
-    };
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useRef } from 'react';
+export const Select = ({ onFieldError, onInvalid, fieldError, name, onChange, value, children, ref, ...other }) => {
+    const localRef = useRef(null);
+    // @ts-expect-error -- returning whole ref object
+    useImperativeHandle(ref, () => localRef.current, [localRef]);
     const localOnChange = (e) => {
-        localSetError(undefined);
         e.target.setCustomValidity('');
-        if (onChange != null)
-            onChange(e);
-        if (!localRef.current.validity.valid)
-            localSetError(localRef.current.validationMessage);
+        onChange?.(e);
+        if (!e.target.validity.valid)
+            onFieldError?.(name, e.target.validity, e.target.validationMessage);
     };
     const handleInvalid = (e) => {
-        localSetError(e.target.validationMessage);
-        if (onInvalid != null)
-            onInvalid(e);
+        const target = e.target;
+        onInvalid?.(e);
+        onFieldError?.(name, target.validity, target.validationMessage);
     };
-    (0, react_1.useEffect)(() => {
-        if (!localRef.current.validity.valid)
-            localSetError(localRef.current.validationMessage);
-    }, []);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (fieldError == null)
-            return localRef.current.setCustomValidity('');
-        if (fieldError.validity?.customError && fieldError.message !== localRef.current.validationMessage) {
-            localRef.current.setCustomValidity(fieldError.message || '');
+            return localRef.current?.setCustomValidity(''); // clear it.
+        // intended to track upstream errors.
+        if (fieldError.validity?.customError && fieldError.message !== localRef.current?.validationMessage) {
+            localRef.current?.setCustomValidity(fieldError.message ?? '');
         }
     }, [fieldError]);
-    return ((0, jsx_runtime_1.jsx)("select", { ref: localRef, name: name, value: value, onInvalid: handleInvalid, onChange: localOnChange, ...other, children: children }));
-});
-exports.Select.displayName = 'Select';
+    return (_jsx("select", { ref: localRef, name: name, value: value, onInvalid: handleInvalid, onChange: localOnChange, ...other, children: children }));
+};
 //# sourceMappingURL=Select.js.map

dist/SelectField.d.ts

@@ -1,8 +0,6 @@
-import { SelectProps } from './Select';
-import { FieldChangeEventHandler } from './types';
-export type SelectFieldProps = Omit<SelectProps, 'DefaultValue' | 'onChange'> & {
+import { SelectProps } from './Select.js';
+import { FieldChangeEventHandler } from './types.js';
+export interface SelectFieldProps extends Omit<SelectProps, 'onChange'> {
     onChange?: FieldChangeEventHandler;
-};
-export declare const SelectField: import("react").ForwardRefExoticComponent<Omit<SelectProps, "onChange" | "DefaultValue"> & {
-    onChange?: FieldChangeEventHandler;
-} & import("react").RefAttributes<HTMLSelectElement>>;
+}
+export declare const SelectField: ({ name, onChange, ref, ...other }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;

dist/SelectField.js

@@ -1,12 +0,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Select_1 = require("./Select");
-const useFieldManager_1 = require("./useFieldManager");
-const useForwardRef_1 = require("./useForwardRef");
-exports.SelectField = (0, react_1.forwardRef)(({ name, onChange, ...other }, ref) => {
-    const localRef = (0, useForwardRef_1.useForwardRef)(ref);
-    const { handleChange: managerOnChange, fields, setFieldError, fieldErrors, mapError } = (0, useFieldManager_1.useFieldManager)();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select } from './Select.js';
+import { useFieldManager } from './useFieldManager.js';
+export const SelectField = ({ name, onChange, ref, ...other }) => {
+    const { handleChange: managerOnChange, fields, setFieldError, fieldErrors, mapError } = useFieldManager();
     const handleOnChange = (e) => {
@@ -21,5 +15,4 @@ const result = managerOnChange(e);
     };
-    return ((0, jsx_runtime_1.jsx)(Select_1.Select, { ref: localRef, onChange: handleOnChange, onFieldError: handleFieldError, name: name, fieldError: fieldErrors[name], value: fields[name], ...other }));
-});
-exports.SelectField.displayName = 'SelectField';
+    return (_jsx(Select, { ref: ref, onChange: handleOnChange, onFieldError: handleFieldError, name: name, fieldError: fieldErrors[name], value: fields[name], ...other }));
+};
 //# sourceMappingURL=SelectField.js.map

dist/TextArea.d.ts

@@ -1,5 +0,6 @@
-import { TextareaHTMLAttributes } from 'react';
-import { ValidationProps } from './types';
-export type TextAreaProps = ValidationProps & TextareaHTMLAttributes<HTMLTextAreaElement>;
-export type Ref = HTMLTextAreaElement;
-export declare const TextArea: import("react").ForwardRefExoticComponent<ValidationProps & TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;
+import { ComponentProps } from 'react';
+import { ValidationProps } from './types.js';
+export interface TextAreaProps extends ValidationProps, Omit<ComponentProps<'textarea'>, 'name'> {
+    name: string;
+}
+export declare const TextArea: ({ onFieldError, onInvalid, fieldError, name, onChange, value, ref, ...other }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;

dist/TextArea.js

@@ -1,40 +0,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextArea = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const useForwardRef_1 = require("./useForwardRef");
-exports.TextArea = (0, react_1.forwardRef)(({ onFieldError, onInvalid, fieldError, name, onChange, value, ...other }, ref) => {
-    const localRef = (0, useForwardRef_1.useForwardRef)(ref);
-    const localSetError = (message) => {
-        if (onFieldError != null)
-            onFieldError(name, localRef.current.validity, message);
-    };
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useRef } from 'react';
+export const TextArea = ({ onFieldError, onInvalid, fieldError, name, onChange, value, ref, ...other }) => {
+    const localRef = useRef(null);
+    // @ts-expect-error -- returning whole ref object
+    useImperativeHandle(ref, () => localRef.current, [localRef]);
     const localOnChange = (e) => {
-        localSetError(undefined);
         e.target.setCustomValidity('');
-        if (onChange != null)
-            onChange(e);
-        if (!localRef.current.validity.valid)
-            localSetError(localRef.current.validationMessage);
+        onChange?.(e);
+        if (!e.target.validity.valid)
+            onFieldError?.(name, e.target.validity, e.target.validationMessage);
     };
     const handleInvalid = (e) => {
-        localSetError(e.target.validationMessage);
-        if (onInvalid != null)
-            onInvalid(e);
+        const target = e.target;
+        onInvalid?.(e);
+        onFieldError?.(name, target.validity, target.validationMessage);
     };
-    (0, react_1.useEffect)(() => {
-        if (!localRef.current.validity.valid)
-            localSetError(localRef.current.validationMessage);
-    }, []);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (fieldError == null)
-            return localRef.current.setCustomValidity(''); // clear it.
-        if (fieldError.validity?.customError && fieldError.message !== localRef.current.validationMessage) {
-            localRef.current.setCustomValidity(fieldError.message || '');
+            return localRef.current?.setCustomValidity(''); // clear it.
+        // intended to track upstream errors.
+        if (fieldError.validity?.customError && fieldError.message !== localRef.current?.validationMessage) {
+            localRef.current?.setCustomValidity(fieldError.message ?? '');
         }
     }, [fieldError]);
-    return ((0, jsx_runtime_1.jsx)("textarea", { ref: localRef, name: name, value: value, onInvalid: handleInvalid, onChange: localOnChange, ...other }));
-});
-exports.TextArea.displayName = 'TextArea';
+    return (_jsx("textarea", { ref: localRef, name: name, value: value, onInvalid: handleInvalid, onChange: localOnChange, ...other }));
+};
 //# sourceMappingURL=TextArea.js.map

dist/TextAreaField.d.ts

@@ -1,6 +0,6 @@
-import { TextAreaProps } from './TextArea';
-import { FieldChangeEventHandler } from './types';
-export type TextAreaFieldProps = Omit<TextAreaProps, 'DefaultValue' | 'onChange'> & {
+import { TextAreaProps } from './TextArea.js';
+import { FieldChangeEventHandler } from './types.js';
+export interface TextAreaFieldProps extends Omit<TextAreaProps, 'onChange'> {
     onChange?: FieldChangeEventHandler;
-};
-export declare const TextAreaField: import("react").ForwardRefExoticComponent<Omit<TextAreaFieldProps, "DefaultValue"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+}
+export declare const TextAreaField: ({ name, onChange, ref, ...other }: TextAreaFieldProps) => import("react/jsx-runtime").JSX.Element;

dist/TextAreaField.js

@@ -1,12 +0,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextAreaField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const TextArea_1 = require("./TextArea");
-const useFieldManager_1 = require("./useFieldManager");
-const useForwardRef_1 = require("./useForwardRef");
-exports.TextAreaField = (0, react_1.forwardRef)(({ name, onChange, ...other }, ref) => {
-    const localRef = (0, useForwardRef_1.useForwardRef)(ref);
-    const { handleChange: managerOnChange, fields, setFieldError, fieldErrors, mapError } = (0, useFieldManager_1.useFieldManager)();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextArea } from './TextArea.js';
+import { useFieldManager } from './useFieldManager.js';
+export const TextAreaField = ({ name, onChange, ref, ...other }) => {
+    const { handleChange: managerOnChange, fields, setFieldError, fieldErrors, mapError } = useFieldManager();
     const handleOnChange = (e) => {
@@ -21,5 +15,4 @@ const result = managerOnChange(e);
     };
-    return ((0, jsx_runtime_1.jsx)(TextArea_1.TextArea, { ref: localRef, onChange: handleOnChange, onFieldError: handleFieldError, name: name, fieldError: fieldErrors[name], value: fields[name], ...other }));
-});
-exports.TextAreaField.displayName = 'TextAreaField';
+    return (_jsx(TextArea, { ref: ref, onChange: handleOnChange, onFieldError: handleFieldError, name: name, fieldError: fieldErrors[name], value: fields[name], ...other }));
+};
 //# sourceMappingURL=TextAreaField.js.map

dist/types.d.ts

 import { ChangeEvent, Dispatch, SetStateAction } from 'react';
-export type FieldError = {
+export interface FieldError {
     message: string | undefined;
     validity?: ValidityState | undefined;
-};
-export type ValidationProps = {
+}
+export type FieldErrorHandler = (key: string, validity: ValidityState, message?: string) => void;
+export interface ValidationProps {
     fieldError?: FieldError;
-    onFieldError?: (key: string, validity: ValidityState, message?: string) => void;
-};
+    onFieldError?: FieldErrorHandler;
+}
 export type FieldValues = Record<string, string>;
-export type FieldChangeResult<Element extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> = {
+export interface FieldChangeResult<Element extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> {
     /**
@@ -20,6 +21,6 @@ * The updated field values after the change event.
     target: EventTarget & Element;
-};
-export type FieldChangeEventHandler = <Element extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(e: FieldChangeResult<Element>) => void;
-export type FieldStateChangeEventHandler = <Element extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(e: ChangeEvent<Element>) => FieldChangeResult<Element>;
-export type UseFieldStateResult = {
+}
+export type FieldChangeEventHandler = <Element extends (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)>(e: FieldChangeResult<Element>) => void;
+export type FieldStateChangeEventHandler = <Element extends (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)>(e: ChangeEvent<Element>) => FieldChangeResult<Element>;
+export interface UseFieldStateResult {
     /**
@@ -103,2 +104,5 @@ * Indicates whether InputFields within should render validation errors based on the fieldError state. This is unrelated to the native browser `reportValidity()` function.
     toggleFormBusy: (value?: boolean) => void;
-};
+}
+export declare const isHTMLInput: (target: EventTarget) => target is HTMLInputElement;
+export declare const isHTMLSelect: (target: EventTarget) => target is HTMLSelectElement;
+export declare const isHTMLTextArea: (target: EventTarget) => target is HTMLTextAreaElement;

dist/types.js

@@ -1,3 +0,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export const isHTMLInput = (target) => {
+    return target instanceof HTMLElement && target.tagName === 'INPUT';
+};
+export const isHTMLSelect = (target) => {
+    return target instanceof HTMLElement && target.tagName === 'SELECT';
+};
+export const isHTMLTextArea = (target) => {
+    return target instanceof HTMLElement && target.tagName === 'TEXTAREA';
+};
 //# sourceMappingURL=types.js.map

dist/useErrorMapping.d.ts

 /**
  * Overrides input validation message with custom message. When undefined, the default message will be used.
  */
-export type ErrorMapping = {
+export interface ErrorMapping {
     badInput?: string;
@@ -18,3 +18,3 @@ /**
     valueMissing?: string;
-};
-export declare const useErrorMapping: (mapping?: ErrorMapping | undefined) => (validity: ValidityState, message: string | undefined) => string;
+}
+export declare const useErrorMapping: (mapping?: ErrorMapping | undefined) => (validity: ValidityState, message: string | undefined) => string | undefined;

dist/useErrorMapping.js

@@ -1,5 +0,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useErrorMapping = void 0;
-const useErrorMapping = (mapping) => {
+export const useErrorMapping = (mapping) => {
     const mapError = (validity, message) => {
@@ -34,3 +31,2 @@ if (mapping == null)
 };
-exports.useErrorMapping = useErrorMapping;
 //# sourceMappingURL=useErrorMapping.js.map

dist/useFieldManager.d.ts

@@ -1,2 +0,2 @@
-import { UseFieldStateResult } from './types';
+import { UseFieldStateResult } from './types.js';
 /**
@@ -3,0 +3,0 @@ * Retrieves the field manager context

dist/useFieldManager.js

@@ -1,11 +0,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFieldManager = void 0;
-const react_1 = require("react");
-const FieldManagerContext_1 = require("./FieldManagerContext");
+import { useContext } from 'react';
+import { FieldManagerContext } from './FieldManagerContext.js';
 /**
  * Retrieves the field manager context
  */
-const useFieldManager = () => {
-    const context = (0, react_1.useContext)(FieldManagerContext_1.FieldManagerContext);
+export const useFieldManager = () => {
+    const context = useContext(FieldManagerContext);
     if (context == null)
@@ -15,3 +12,2 @@ throw new Error('Must be used within a FieldManager');
 };
-exports.useFieldManager = useFieldManager;
 //# sourceMappingURL=useFieldManager.js.map

dist/useFieldState.d.ts

@@ -1,3 +0,3 @@
-import { FieldValues, UseFieldStateResult } from './types';
-import { ErrorMapping } from './useErrorMapping';
+import { FieldValues, UseFieldStateResult } from './types.js';
+import { ErrorMapping } from './useErrorMapping.js';
 export type UseFieldStateMethod = (
@@ -4,0 +4,0 @@ /**

dist/useFieldState.js

@@ -1,22 +0,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFieldState = void 0;
-const react_1 = require("react");
-const defaults_1 = require("./defaults");
-const omitBy_1 = require("./omitBy");
-const useErrorMapping_1 = require("./useErrorMapping");
-const validityState_1 = require("./validityState");
+import { useCallback, useState } from 'react';
+import { defaults } from './defaults.js';
+import { isHTMLInput } from './types.js';
+import { useErrorMapping } from './useErrorMapping.js';
+import { emptyValidity } from './validityState.js';
 /**
  * Manages field state via change handler, values and error state.
  */
-const useFieldState = (fields, options = {}) => {
+export const useFieldState = (fields, options = {}) => {
     const { defaultValues, errorMapping } = options;
-    const initDefaultFieldValues = defaultValues != null ? (0, defaults_1.defaults)((0, omitBy_1.omitBy)(fields, v => v == null || v === ''), defaultValues) : fields;
-    const [reportValidation, setReportValidation] = (0, react_1.useState)(false);
-    const [fieldValues, setFieldValues] = (0, react_1.useState)(fields);
-    const [fieldErrors, setFieldErrors] = (0, react_1.useState)({});
-    const [defaultFieldValues, setDefaultFieldValues] = (0, react_1.useState)(initDefaultFieldValues);
-    const [isFormBusy, setIsFormBusy] = (0, react_1.useState)(false);
-    const mapError = (0, useErrorMapping_1.useErrorMapping)(errorMapping);
-    const toggleFormBusy = (0, react_1.useCallback)((value) => {
+    const initDefaultFieldValues = defaults({}, defaultValues, fields);
+    const [reportValidation, setReportValidation] = useState(false);
+    const [fieldValues, setFieldValues] = useState(fields);
+    const [fieldErrors, setFieldErrors] = useState({});
+    const [defaultFieldValues, setDefaultFieldValues] = useState(initDefaultFieldValues);
+    const [isFormBusy, setIsFormBusy] = useState(false);
+    const mapError = useErrorMapping(errorMapping);
+    const toggleFormBusy = useCallback((value) => {
         if (value == null)
@@ -26,7 +23,22 @@ return setIsFormBusy(_old => !_old);
     }, []);
-    const setField = (0, react_1.useCallback)((key, value) => {
+    const setFieldError = useCallback((key, message, validity) => {
+        let _validity;
+        const hasMessage = message != null && message.trim().length > 0;
+        if (hasMessage) {
+            _validity = validity ?? { ...emptyValidity, customError: true };
+        }
+        setFieldErrors((old) => {
+            const result = { ...old };
+            delete result[key]; // clear this error
+            if (!hasMessage)
+                return result;
+            result[key] = { message, validity: _validity };
+            return result;
+        });
+    }, []);
+    const setField = useCallback((key, value) => {
         setFieldValues(oldFields => ({ ...oldFields, [key]: value }));
-        setFieldError(key, undefined); // clear this error if one exists.
-    }, []);
-    const setFields = (0, react_1.useCallback)((values) => {
+        setFieldError(key); // clear this error if one exists.
+    }, [setFieldError]);
+    const setFields = useCallback((values) => {
         setFieldValues((oldFields) => {
@@ -50,11 +62,3 @@ const newFields = { ...oldFields };
     }, []);
-    const setFieldError = (0, react_1.useCallback)((key, message, validity) => {
-        let _validity;
-        const hasMessage = message != null && message.trim().length > 0;
-        if (hasMessage) {
-            _validity = validity ?? { ...validityState_1.emptyValidity, customError: true };
-        }
-        setFieldErrors(old => ({ ...old, [key]: !hasMessage ? undefined : { message, validity: _validity } }));
-    }, [errorMapping]);
-    const checkFieldError = (0, react_1.useCallback)((key) => {
+    const checkFieldError = useCallback((key) => {
         let fieldError = undefined;
@@ -66,4 +70,4 @@ if (reportValidation && fieldErrors[key] != null && fieldErrors[key].message !== '')
         return mapError(fieldError.validity, fieldError.message);
-    }, [fieldErrors, reportValidation, mapError, fieldValues]);
-    const reset = (0, react_1.useCallback)(() => {
+    }, [fieldErrors, reportValidation, mapError]);
+    const reset = useCallback(() => {
         setFieldErrors(_old => ({}));
@@ -73,7 +77,8 @@ setFieldValues(_old => ({ ...defaultFieldValues }));
     }, [defaultFieldValues]);
-    const handleChange = (0, react_1.useCallback)((e) => {
+    const handleChange = useCallback((e) => {
+        setFieldError(e.target.name); // clear this error if one exists.
         let value = e.target.value;
         const name = e.target.name;
         const updatedFields = { ...fieldValues, [name]: value };
-        if (e.target.type === 'checkbox' || e.target.type === 'radiobutton') {
+        if (isHTMLInput(e.target) && (e.target.type === 'checkbox' || e.target.type === 'radiobutton')) {
             value = e.target.checked ? value : '';
@@ -87,3 +92,3 @@ }
         return { fields: updatedFields, target: e.target };
-    }, [fieldValues]);
+    }, [fieldValues, setFieldError]);
     return {
@@ -108,3 +113,2 @@ fieldErrors,
 };
-exports.useFieldState = useFieldState;
 //# sourceMappingURL=useFieldState.js.map

dist/useForwardRef.d.ts

 import { ForwardedRef } from 'react';
-export declare const useForwardRef: <T>(ref: ForwardedRef<T>, initialValue?: any) => import("react").MutableRefObject<T>;
+export declare const useForwardRef: <T>(ref: ForwardedRef<T>) => import("react").RefObject<T | null>;

dist/useForwardRef.js

@@ -1,22 +0,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useForwardRef = void 0;
-// For more details on this elegant solution, see: https://github.com/facebook/react/issues/24722#issue-1270749463
-// Thank you https://github.com/lejahmie
-const react_1 = require("react");
-const useForwardRef = (ref, initialValue = null) => {
-    const targetRef = (0, react_1.useRef)(initialValue);
-    (0, react_1.useEffect)(() => {
-        if (!ref)
-            return;
-        if (typeof ref === 'function') {
-            ref(targetRef.current);
-        }
-        else {
-            ref.current = targetRef.current;
-        }
-    }, [ref]);
-    return targetRef;
+import { useImperativeHandle, useRef } from 'react';
+export const useForwardRef = (ref) => {
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current);
+    return innerRef;
 };
-exports.useForwardRef = useForwardRef;
 //# sourceMappingURL=useForwardRef.js.map

dist/ValidatedForm.d.ts

@@ -1,3 +0,3 @@
-import { FormHTMLAttributes, PropsWithChildren } from 'react';
-export type ValidatedFormProps = PropsWithChildren<{
+import { ComponentProps } from 'react';
+export interface ValidatedFormProps extends Omit<ComponentProps<'form'>, 'noValidate'> {
     /**
@@ -16,19 +16,3 @@ * Invokes when submit event triggered and form has been validated and is valid.
     nativeValidation?: boolean;
-}> & FormHTMLAttributes<HTMLFormElement>;
-export declare const ValidatedForm: import("react").ForwardRefExoticComponent<{
-    /**
-     * Invokes when submit event triggered and form has been validated and is valid.
-     * @param fields Current values stored in field state.
-     */
-    onValidSubmit?: () => void;
-    /**
-     * Trigger report validity on every submission? Default: false
-     */
-    reportValidity?: boolean;
-    /**
-     * When true, relies on native browser validation. In other words: it toggles `noValidate` on the `<form/>`. When false, `noValidate` is true.
-     */
-    nativeValidation?: boolean;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & FormHTMLAttributes<HTMLFormElement> & import("react").RefAttributes<HTMLFormElement>>;
+}
+export declare const ValidatedForm: ({ children, onValidSubmit, onReset, reportValidity, onSubmit, nativeValidation, className, ...props }: ValidatedFormProps) => import("react/jsx-runtime").JSX.Element;

dist/ValidatedForm.js

@@ -1,24 +0,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ValidatedForm = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const useForwardRef_1 = require("./useForwardRef");
-exports.ValidatedForm = (0, react_1.forwardRef)(({ children, onValidSubmit, onSubmit, onReset, reportValidity = false, nativeValidation = false, className = '', ...props }, ref) => {
-    const refForm = (0, useForwardRef_1.useForwardRef)(ref);
-    const [validatedClassName, setValidatedClassName] = (0, react_1.useState)('needs-validation');
-    // TODO: setup context API to track THIS form's validation state. This allows consumers elsewhere to report it.
-    /**
-     * Bootstrappiness: needs-validation, was-validated
-     */
-    const consolidatedClassName = (0, react_1.useMemo)(() => `${validatedClassName}${className != null ? ' ' + className : ''}`, [className, validatedClassName]);
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useState } from 'react';
+export const ValidatedForm = ({ children, onValidSubmit, onReset, reportValidity = false, onSubmit, nativeValidation = false, className = '', ...props }) => {
+    const [submitted, setSubmitted] = useState(false);
     const onLocalSubmit = (event) => {
         event.preventDefault();
-        const form = refForm.current;
-        setValidatedClassName(() => 'was-validated');
-        if (onSubmit != null)
-            onSubmit(event);
+        onSubmit?.(event);
+        const form = event.target;
+        setSubmitted(true);
         if (form.checkValidity()) {
-            if (onValidSubmit != null)
-                onValidSubmit();
+            onValidSubmit?.();
         }
@@ -29,9 +18,8 @@ if (reportValidity)
     const handleReset = (e) => {
-        setValidatedClassName('needs-validation');
+        setSubmitted(false);
         if (onReset != null)
             onReset(e);
     };
-    return ((0, jsx_runtime_1.jsx)("form", { ref: refForm, onSubmit: onLocalSubmit, onReset: handleReset, className: consolidatedClassName, noValidate: !nativeValidation, ...props, children: children }));
-});
-exports.ValidatedForm.displayName = 'ValidatedForm';
+    return (_jsx("form", { ...props, onSubmit: onLocalSubmit, onReset: handleReset, className: classNames(className, { 'was-validated': submitted }, { 'needs-validation': !submitted }), noValidate: !nativeValidation, children: children }));
+};
 //# sourceMappingURL=ValidatedForm.js.map

dist/validityState.js

@@ -1,8 +0,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.emptyValidity = void 0;
 /**
  * Baseline validity state with all props false.
  */
-exports.emptyValidity = { valid: false, badInput: false, customError: false, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false, stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false, valueMissing: false };
+export const emptyValidity = { valid: false, badInput: false, customError: false, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false, stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false, valueMissing: false };
 //# sourceMappingURL=validityState.js.map

package.json

 {
   "name": "@iwsio/forms",
-  "version": "4.3.3",
+  "version": "5.0.0",
   "description": "Simple library with useful React forms components and browser validation.",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
+  "type": "module",
   "exports": {
@@ -15,3 +16,3 @@ ".": "./dist/index.js",
   "scripts": {
-    "test": "VITEST_SEGFAULT_RETRY=3 vitest --run --passWithNoTests",
+    "test": "vitest --run --passWithNoTests",
     "prebuild": "tsc --build tsconfig.build.json --clean && rimraf dist",
@@ -40,20 +41,23 @@ "build": "tsc --build tsconfig.build.json",
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "jsdom": "^24.1.1",
+    "@iwsio/eslint-config": "^1.0.1",
+    "@iwsio/tsconfig": "^1.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "classnames": "^2.5.1",
+    "jsdom": "^26.0.0",
     "npm-run-all": "^4.1.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rimraf": "^6.0.1",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.4",
-    "vitest": "^2.0.5",
-    "webpack-dev-server": "^5.0.4"
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.5",
+    "webpack-dev-server": "^5.2.0"
   },
   "peerDependencies": {
-    "react": "^18"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Is type module

Yes

Worsened metrics

Total package byte prevSize

103767

decreased by-6.73%

Dependency count

2

increased by100%

Dev dependency count

16

increased by14.29%

Lines of code

794

decreased by-16.07%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes