@rolster/react-forms 18.8.2 → 18.9.1

package/dist/es/index.js

@@ -1,437 +1,440 @@
 import { createFormControlOptions, createFormGroupOptions, createFormArrayOptions } from '@rolster/forms/arguments';
 import { controlIsValid, hasError, someErrors, groupIsValid, controlsAllChecked, controlsPartialChecked, controlsToValue, arrayIsValid, groupAllChecked, groupPartialChecked } from '@rolster/forms/helpers';
 import { v4 } from 'uuid';
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect, useCallback } from 'react';
 
-class RolsterReactArrayControl {
-    constructor(options) {
-        this.initialValue = options.initialValue;
-        this.uuid = options.uuid;
-        this.focused = !!options.focused;
-        this.unfocused = !this.focused;
-        this.touched = !!options.touched;
-        this.untouched = !this.touched;
-        this.dirty = !!options.dirty;
-        this.pristine = !this.dirty;
-        this.disabled = !!options.disabled;
-        this.enabled = !this.disabled;
-        const { value, validators } = options;
-        this.value = value;
-        this.validators = validators;
-        this.errors = validators ? controlIsValid({ value, validators }) : [];
-        this.error = this.errors[0];
-    }
-    focus() {
-        this.unfocused && this.refresh({ focused: true });
-    }
-    blur() {
-        this.focused && this.refresh({ focused: false, touched: true });
-    }
-    disable() {
-        this.enabled && this.refresh({ disabled: true });
-    }
-    enable() {
-        this.disabled && this.refresh({ disabled: false });
-    }
-    touch() {
-        this.untouched && this.refresh({ touched: true });
-    }
-    setValue(value) {
-        this.refresh({ value });
-    }
-    setValidators(validators) {
-        this.refresh({ validators });
-    }
-    subscribe(subscriber) {
-        this.subscriber = subscriber;
-    }
-    hasError(key) {
-        return hasError(this.errors, key);
-    }
-    someErrors(keys) {
-        return someErrors(this.errors, keys);
-    }
-    reset() {
-        this.refresh({
-            dirty: false,
-            touched: false,
-            value: this.initialValue
-        });
-    }
-    refresh(changes) {
-        this.subscriber &&
-            this.subscriber({
-                ...this,
-                ...changes,
-                initialValue: this.initialValue
-            });
-    }
-}
-class RolsterArrayControl extends RolsterReactArrayControl {
-    constructor(options) {
-        super(options);
-        this.valid = this.errors.length === 0;
-        this.invalid = !this.valid;
-        this.wrong = this.touched && this.invalid;
-    }
-    clone(options) {
-        return new RolsterArrayControl(options);
-    }
-}
-function rolsterArrayControl(options, validators) {
-    const controlOptions = createFormControlOptions(options, validators);
-    return new RolsterArrayControl({
-        ...controlOptions,
-        initialValue: controlOptions.value,
-        uuid: v4()
-    });
-}
-function reactArrayControl(options, validators) {
-    return rolsterArrayControl(options, validators);
-}
-function formArrayControl(options, validators) {
-    return rolsterArrayControl(options, validators);
-}
-function inputArrayControl(options, validators) {
-    return rolsterArrayControl(options, validators);
+class RolsterReactArrayControl {
+    constructor(options) {
+        this.initialValue = options.initialValue;
+        this.uuid = options.uuid;
+        this.focused = !!options.focused;
+        this.unfocused = !this.focused;
+        this.touched = !!options.touched;
+        this.untouched = !this.touched;
+        this.dirty = !!options.dirty;
+        this.pristine = !this.dirty;
+        this.disabled = !!options.disabled;
+        this.enabled = !this.disabled;
+        const { value, validators } = options;
+        this.value = value;
+        this.validators = validators;
+        this.errors = validators ? controlIsValid({ value, validators }) : [];
+        this.error = this.errors[0];
+    }
+    focus() {
+        this.unfocused && this.refresh({ focused: true });
+    }
+    blur() {
+        this.focused && this.refresh({ focused: false, touched: true });
+    }
+    disable() {
+        this.enabled && this.refresh({ disabled: true });
+    }
+    enable() {
+        this.disabled && this.refresh({ disabled: false });
+    }
+    touch() {
+        this.untouched && this.refresh({ touched: true });
+    }
+    setValue(value) {
+        this.refresh({ value });
+    }
+    setValidators(validators) {
+        this.refresh({ validators });
+    }
+    subscribe(subscriber) {
+        this.subscriber = subscriber;
+    }
+    hasError(key) {
+        return hasError(this.errors, key);
+    }
+    someErrors(keys) {
+        return someErrors(this.errors, keys);
+    }
+    reset() {
+        this.refresh({
+            dirty: false,
+            touched: false,
+            value: this.initialValue
+        });
+    }
+    refresh(changes) {
+        this.subscriber &&
+            this.subscriber({
+                ...this,
+                ...changes,
+                initialValue: this.initialValue
+            });
+    }
+}
+class RolsterArrayControl extends RolsterReactArrayControl {
+    constructor(options) {
+        super(options);
+        this.valid = this.errors.length === 0;
+        this.invalid = !this.valid;
+        this.wrong = this.touched && this.invalid;
+    }
+    clone(options) {
+        return new RolsterArrayControl(options);
+    }
+}
+function rolsterArrayControl(options, validators) {
+    const controlOptions = createFormControlOptions(options, validators);
+    return new RolsterArrayControl({
+        ...controlOptions,
+        initialValue: controlOptions.value,
+        uuid: v4()
+    });
+}
+function reactArrayControl(options, validators) {
+    return rolsterArrayControl(options, validators);
+}
+function formArrayControl(options, validators) {
+    return rolsterArrayControl(options, validators);
+}
+function inputArrayControl(options, validators) {
+    return rolsterArrayControl(options, validators);
 }
 
-class RolsterArrayGroup {
-    constructor(options) {
-        const { controls, resource, uuid, validators } = options;
-        this.uuid = uuid;
-        this.controls = controls;
-        this.validators = validators;
-        this.resource = resource;
-        this.errors = validators ? groupIsValid({ controls, validators }) : [];
-        this.error = this.errors[0];
-        this.valid =
-            this.errors.length === 0 && controlsAllChecked(controls, 'valid');
-        this.invalid = !this.valid;
-        this.dirty = controlsPartialChecked(controls, 'dirty');
-        this.dirtyAll = controlsAllChecked(controls, 'dirty');
-        this.touched = controlsPartialChecked(controls, 'touched');
-        this.touchedAll = controlsAllChecked(controls, 'touched');
-        this.untouched = !this.touched;
-        this.untouchedAll = !this.touchedAll;
-        this.pristine = !this.dirty;
-        this.pristineAll = !this.dirtyAll;
-        this.wrong = this.touched && this.invalid;
-        this.value = controlsToValue(controls);
-        const subscriber = (options) => {
-            this.refresh({
-                controls: Object.entries(this.controls).reduce((controls, [key, control]) => {
-                    controls[key] =
-                        control.uuid === options.uuid ? control.clone(options) : control;
-                    return controls;
-                }, {})
-            });
-        };
-        Object.values(controls).forEach((control) => {
-            control.subscribe(subscriber);
-        });
-    }
-    setValidators(validators) {
-        this.refresh({ validators });
-    }
-    subscribe(subscriber) {
-        this.subscriber = subscriber;
-    }
-    refresh(changes) {
-        this.subscriber && this.subscriber({ ...this, ...changes });
-    }
-}
-function formArrayGroup(options, validators) {
-    return new RolsterArrayGroup({
-        ...createFormGroupOptions(options, validators),
-        uuid: v4()
-    });
+class RolsterArrayGroup {
+    constructor(options) {
+        const { controls, resource, uuid, validators } = options;
+        this.uuid = uuid;
+        this.controls = controls;
+        this.validators = validators;
+        this.resource = resource;
+        this.errors = validators ? groupIsValid({ controls, validators }) : [];
+        this.error = this.errors[0];
+        this.valid =
+            this.errors.length === 0 && controlsAllChecked(controls, 'valid');
+        this.invalid = !this.valid;
+        this.dirty = controlsPartialChecked(controls, 'dirty');
+        this.dirtyAll = controlsAllChecked(controls, 'dirty');
+        this.touched = controlsPartialChecked(controls, 'touched');
+        this.touchedAll = controlsAllChecked(controls, 'touched');
+        this.untouched = !this.touched;
+        this.untouchedAll = !this.touchedAll;
+        this.pristine = !this.dirty;
+        this.pristineAll = !this.dirtyAll;
+        this.wrong = this.touched && this.invalid;
+        this.value = controlsToValue(controls);
+        const subscriber = (options) => {
+            this.refresh({
+                controls: Object.entries(this.controls).reduce((controls, [key, control]) => {
+                    controls[key] =
+                        control.uuid === options.uuid ? control.clone(options) : control;
+                    return controls;
+                }, {})
+            });
+        };
+        Object.values(controls).forEach((control) => {
+            control.subscribe(subscriber);
+        });
+    }
+    setValidators(validators) {
+        this.refresh({ validators });
+    }
+    subscribe(subscriber) {
+        this.subscriber = subscriber;
+    }
+    refresh(changes) {
+        this.subscriber && this.subscriber({ ...this, ...changes });
+    }
+}
+function formArrayGroup(options, validators) {
+    return new RolsterArrayGroup({
+        ...createFormGroupOptions(options, validators),
+        uuid: v4()
+    });
 }
 
-class RolsterArrayList extends RolsterReactArrayControl {
-    constructor(options) {
-        const value = options.controls.map((controls) => controlsToValue(controls));
-        super({ ...options, value });
-        this.valueToControls = options.valueToControls;
-        this.controls = options.controls;
-        this.valid =
-            this.errors.length === 0 &&
-                this.controls.reduce((valid, controls) => valid && controlsAllChecked(controls, 'valid'), true);
-        this.invalid = !this.valid;
-        this.wrong = this.touched && this.invalid;
-        options.controls.forEach((controls) => {
-            this.subscribeControls(controls);
-        });
-    }
-    setValue(value) {
-        this.refresh({
-            controls: value.map((value) => this.valueToControls(value))
-        });
-    }
-    clone(options) {
-        return new RolsterArrayList(options);
-    }
-    push(controls) {
-        this.refresh({
-            controls: [...this.controls, controls]
-        });
-    }
-    remove(controls) {
-        this.refresh({
-            controls: this.controls.filter((currentControls) => currentControls !== controls)
-        });
-    }
-    refresh(changes) {
-        super.refresh(changes);
-    }
-    subscribeControls(newControls) {
-        Object.values(newControls).forEach((control) => {
-            control.subscribe((options) => {
-                const controls = this.controls.map((currentControls) => currentControls !== newControls
-                    ? currentControls
-                    : Object.entries(newControls).reduce((controls, [key, control]) => {
-                        controls[key] =
-                            control.uuid === options.uuid
-                                ? control.clone(options)
-                                : control;
-                        return controls;
-                    }, {}));
-                this.refresh({ controls });
-            });
-        });
-    }
-}
-function formArrayList(valueToControls, options) {
-    const value = options?.value || [];
-    return new RolsterArrayList({
-        ...options,
-        valueToControls,
-        controls: value.map((value) => valueToControls(value)),
-        initialValue: value,
-        uuid: v4()
-    });
+class RolsterArrayList extends RolsterReactArrayControl {
+    constructor(options) {
+        const value = options.controls.map((controls) => controlsToValue(controls));
+        super({ ...options, value });
+        this.valueToControls = options.valueToControls;
+        this.controls = options.controls;
+        this.valid =
+            this.errors.length === 0 &&
+                this.controls.reduce((valid, controls) => valid && controlsAllChecked(controls, 'valid'), true);
+        this.invalid = !this.valid;
+        this.wrong = this.touched && this.invalid;
+        options.controls.forEach((controls) => {
+            this.subscribeControls(controls);
+        });
+    }
+    setValue(value) {
+        this.refresh({
+            controls: value.map((value) => this.valueToControls(value))
+        });
+    }
+    clone(options) {
+        return new RolsterArrayList(options);
+    }
+    push(controls) {
+        this.refresh({
+            controls: [...this.controls, controls]
+        });
+    }
+    remove(controls) {
+        this.refresh({
+            controls: this.controls.filter((currentControls) => currentControls !== controls)
+        });
+    }
+    refresh(changes) {
+        super.refresh(changes);
+    }
+    subscribeControls(newControls) {
+        Object.values(newControls).forEach((control) => {
+            control.subscribe((options) => {
+                const controls = this.controls.map((currentControls) => currentControls !== newControls
+                    ? currentControls
+                    : Object.entries(newControls).reduce((controls, [key, control]) => {
+                        controls[key] =
+                            control.uuid === options.uuid
+                                ? control.clone(options)
+                                : control;
+                        return controls;
+                    }, {}));
+                this.refresh({ controls });
+            });
+        });
+    }
+}
+function formArrayList(valueToControls, options) {
+    const value = options?.value || [];
+    return new RolsterArrayList({
+        ...options,
+        valueToControls,
+        controls: value.map((value) => valueToControls(value)),
+        initialValue: value,
+        uuid: v4()
+    });
 }
 
-function useFormArray(options, arrayValidators) {
-    const arrayOptions = createFormArrayOptions(options, arrayValidators);
-    const groups = arrayOptions.groups || [];
-    const currentState = useRef(groups);
-    const [state, setState] = useState({
-        controls: groups.map(({ controls }) => controls),
-        disabled: false,
-        groups,
-        value: groups.map(({ controls }) => controlsToValue(controls)),
-        validators: arrayOptions.validators
-    });
-    const errors = state.validators
-        ? arrayIsValid({ groups, validators: state.validators })
-        : [];
-    const error = errors[0];
-    const valid = errors.length === 0 && groupAllChecked(state.groups, 'valid');
-    const dirty = groupPartialChecked(state.groups, 'dirty');
-    const dirtyAll = groupAllChecked(state.groups, 'dirty');
-    const touched = groupPartialChecked(state.groups, 'touched');
-    const touchedAll = groupAllChecked(state.groups, 'touched');
-    useEffect(() => {
-        const subscriber = (options) => {
-            setGroups(state.groups.map((group) => group.uuid === options.uuid
-                ? new RolsterArrayGroup(options)
-                : group));
-        };
-        state.groups.forEach((group) => {
-            group.subscribe(subscriber);
-        });
-    }, [state.groups]);
-    function disable() {
-        setState((state) => ({ ...state, disabled: true }));
-    }
-    function enable() {
-        setState((state) => ({ ...state, disabled: false }));
-    }
-    function setGroups(groups) {
-        setState((currentState) => ({
-            ...currentState,
-            groups,
-            controls: groups.map(({ controls }) => controls),
-            value: groups.map(({ controls }) => controlsToValue(controls))
-        }));
-    }
-    function push(group) {
-        setGroups([...state.groups, group]);
-    }
-    function merge(groups) {
-        setGroups([...state.groups, ...groups]);
-    }
-    function set(groups) {
-        setGroups(groups);
-    }
-    function remove({ uuid }) {
-        setGroups(state.groups.filter((group) => group.uuid !== uuid));
-    }
-    function hasError$1(key) {
-        return hasError(errors, key);
-    }
-    function someErrors$1(keys) {
-        return someErrors(errors, keys);
-    }
-    function reset() {
-        setGroups(currentState.current);
-    }
-    function setValidators(validators) {
-        setState((state) => ({ ...state, validators }));
-    }
-    return {
-        ...state,
-        dirty,
-        dirtyAll,
-        disable,
-        enable,
-        enabled: !state.disabled,
-        error,
-        errors,
-        hasError: hasError$1,
-        invalid: !valid,
-        merge,
-        pristine: !dirty,
-        pristineAll: !dirtyAll,
-        push,
-        remove,
-        reset,
-        set,
-        setValidators,
-        someErrors: someErrors$1,
-        touched,
-        touchedAll,
-        untouched: !touched,
-        untouchedAll: !touchedAll,
-        valid,
-        wrong: touched && !valid
-    };
+function useFormArray(options, arrayValidators) {
+    const arrayOptions = createFormArrayOptions(options, arrayValidators);
+    const groups = arrayOptions.groups || [];
+    const currentState = useRef(groups);
+    const [state, setState] = useState({
+        controls: groups.map(({ controls }) => controls),
+        disabled: false,
+        groups,
+        value: groups.map(({ controls }) => controlsToValue(controls)),
+        validators: arrayOptions.validators
+    });
+    const errors = state.validators
+        ? arrayIsValid({ groups, validators: state.validators })
+        : [];
+    const error = errors[0];
+    const valid = errors.length === 0 && groupAllChecked(state.groups, 'valid');
+    const dirty = groupPartialChecked(state.groups, 'dirty');
+    const dirtyAll = groupAllChecked(state.groups, 'dirty');
+    const touched = groupPartialChecked(state.groups, 'touched');
+    const touchedAll = groupAllChecked(state.groups, 'touched');
+    useEffect(() => {
+        const subscriber = (options) => {
+            setGroups(state.groups.map((group) => group.uuid === options.uuid
+                ? new RolsterArrayGroup(options)
+                : group));
+        };
+        state.groups.forEach((group) => {
+            group.subscribe(subscriber);
+        });
+    }, [state.groups]);
+    function disable() {
+        setState((state) => ({ ...state, disabled: true }));
+    }
+    function enable() {
+        setState((state) => ({ ...state, disabled: false }));
+    }
+    function setGroups(groups) {
+        setState((currentState) => ({
+            ...currentState,
+            groups,
+            controls: groups.map(({ controls }) => controls),
+            value: groups.map(({ controls }) => controlsToValue(controls))
+        }));
+    }
+    function push(group) {
+        setGroups([...state.groups, group]);
+    }
+    function merge(groups) {
+        setGroups([...state.groups, ...groups]);
+    }
+    function set(groups) {
+        setGroups(groups);
+    }
+    function remove({ uuid }) {
+        setGroups(state.groups.filter((group) => group.uuid !== uuid));
+    }
+    function hasError$1(key) {
+        return hasError(errors, key);
+    }
+    function someErrors$1(keys) {
+        return someErrors(errors, keys);
+    }
+    function reset() {
+        setGroups(currentState.current);
+    }
+    function setValidators(validators) {
+        setState((state) => ({ ...state, validators }));
+    }
+    return {
+        ...state,
+        dirty,
+        dirtyAll,
+        disable,
+        enable,
+        enabled: !state.disabled,
+        error,
+        errors,
+        hasError: hasError$1,
+        invalid: !valid,
+        merge,
+        pristine: !dirty,
+        pristineAll: !dirtyAll,
+        push,
+        remove,
+        reset,
+        set,
+        setValidators,
+        someErrors: someErrors$1,
+        touched,
+        touchedAll,
+        untouched: !touched,
+        untouchedAll: !touchedAll,
+        valid,
+        wrong: touched && !valid
+    };
 }
 
-function useControl(controlOptions, controlValidators) {
-    const { value, touched, validators } = createFormControlOptions(controlOptions, controlValidators);
-    const [state, setState] = useState({
-        dirty: false,
-        disabled: false,
-        focused: false,
-        touched: !!touched,
-        validators,
-        value
-    });
-    const initialValue = useRef(value);
-    const elementRef = useRef(null);
-    const errors = state.validators
-        ? controlIsValid({
-            value: state.value,
-            validators: state.validators
-        })
-        : [];
-    const valid = errors.length === 0;
-    function focus() {
-        setState((state) => ({ ...state, focused: true }));
-    }
-    function blur() {
-        setState((state) => ({ ...state, focused: false, touched: true }));
-    }
-    function disable() {
-        setState((state) => ({ ...state, disabled: true }));
-    }
-    function enable() {
-        setState((state) => ({ ...state, disabled: false }));
-    }
-    function touch() {
-        setState((state) => ({ ...state, touched: true }));
-    }
-    function setValue(value) {
-        setState((state) => ({ ...state, dirty: true, value }));
-    }
-    function setValidators(validators) {
-        setState((state) => ({ ...state, validators }));
-    }
-    function hasError$1(key) {
-        return hasError(errors, key);
-    }
-    function someErrors$1(keys) {
-        return someErrors(errors, keys);
-    }
-    function reset() {
-        setState((state) => ({
-            ...state,
-            dirty: false,
-            value: initialValue.current,
-            touched: false
-        }));
-    }
-    return {
-        ...state,
-        blur,
-        disable,
-        elementRef,
-        enable,
-        enabled: !state.disabled,
-        error: errors[0],
-        errors,
-        focus,
-        hasError: hasError$1,
-        invalid: !valid,
-        pristine: !state.dirty,
-        reset,
-        setValidators,
-        setValue,
-        someErrors: someErrors$1,
-        touch,
-        unfocused: !state.focused,
-        untouched: !state.touched,
-        valid,
-        wrong: state.touched && !valid
-    };
-}
-function useReactControl(options, validators) {
-    return useControl(options, validators);
-}
-function useFormControl(options, validators) {
-    return useControl(options, validators);
-}
-function useInputControl(options, validators) {
-    return useControl(options, validators);
+function useControl(controlOptions, controlValidators) {
+    const { value, touched, validators } = createFormControlOptions(controlOptions, controlValidators);
+    const [state, setState] = useState({
+        dirty: false,
+        disabled: false,
+        focused: false,
+        touched: !!touched,
+        validators,
+        value
+    });
+    const [errors, setErrors] = useState([]);
+    const initialValue = useRef(value);
+    const elementRef = useRef(null);
+    useEffect(() => {
+        setErrors(state.validators
+            ? controlIsValid({
+                value: state.value,
+                validators: state.validators
+            })
+            : []);
+    }, [state.value, state.validators]);
+    const focus = useCallback(() => {
+        setState((state) => ({ ...state, focused: true }));
+    }, []);
+    const blur = useCallback(() => {
+        setState((state) => ({ ...state, focused: false, touched: true }));
+    }, []);
+    const disable = useCallback(() => {
+        setState((state) => ({ ...state, disabled: true }));
+    }, []);
+    const enable = useCallback(() => {
+        setState((state) => ({ ...state, disabled: false }));
+    }, []);
+    const touch = useCallback(() => {
+        setState((state) => ({ ...state, touched: true }));
+    }, []);
+    const setValue = useCallback((value) => {
+        setState((state) => ({ ...state, dirty: true, value }));
+    }, []);
+    const setValidators = useCallback((validators) => {
+        setState((state) => ({ ...state, validators }));
+    }, []);
+    const reset = useCallback(() => {
+        setState((state) => ({
+            ...state,
+            dirty: false,
+            value: initialValue.current,
+            touched: false
+        }));
+    }, []);
+    function hasError$1(key) {
+        return hasError(errors, key);
+    }
+    function someErrors$1(keys) {
+        return someErrors(errors, keys);
+    }
+    const valid = errors.length === 0;
+    return {
+        ...state,
+        blur,
+        disable,
+        elementRef,
+        enable,
+        enabled: !state.disabled,
+        error: errors[0],
+        errors,
+        focus,
+        hasError: hasError$1,
+        invalid: !valid,
+        pristine: !state.dirty,
+        reset,
+        setValidators,
+        setValue,
+        someErrors: someErrors$1,
+        touch,
+        unfocused: !state.focused,
+        untouched: !state.touched,
+        valid,
+        wrong: state.touched && !valid
+    };
+}
+function useReactControl(options, validators) {
+    return useControl(options, validators);
+}
+function useFormControl(options, validators) {
+    return useControl(options, validators);
+}
+function useInputControl(options, validators) {
+    return useControl(options, validators);
 }
 
-function useFormGroup(options, groupValidators) {
-    const groupOptions = createFormGroupOptions(options, groupValidators);
-    const [validators, setValidators] = useState(groupOptions.validators);
-    const { controls } = groupOptions;
-    const errors = validators ? groupIsValid({ controls, validators }) : [];
-    const valid = errors.length === 0 && controlsAllChecked(controls, 'valid');
-    const value = controlsToValue(controls);
-    const dirty = controlsPartialChecked(controls, 'dirty');
-    const dirtyAll = controlsAllChecked(controls, 'dirty');
-    const touched = controlsPartialChecked(controls, 'touched');
-    const touchedAll = controlsAllChecked(controls, 'touched');
-    function reset() {
-        Object.values(controls).forEach((control) => {
-            control.reset();
-        });
-    }
-    return {
-        controls,
-        dirty,
-        dirtyAll,
-        error: errors[0],
-        errors,
-        invalid: !valid,
-        pristine: !dirty,
-        pristineAll: !dirtyAll,
-        reset,
-        setValidators,
-        touched,
-        touchedAll,
-        untouched: !touched,
-        untouchedAll: !touchedAll,
-        valid,
-        value,
-        wrong: touched && !valid
-    };
+function useFormGroup(options, groupValidators) {
+    const groupOptions = createFormGroupOptions(options, groupValidators);
+    const [validators, setValidators] = useState(groupOptions.validators);
+    const { controls } = groupOptions;
+    const errors = validators ? groupIsValid({ controls, validators }) : [];
+    const valid = errors.length === 0 && controlsAllChecked(controls, 'valid');
+    const value = controlsToValue(controls);
+    const dirty = controlsPartialChecked(controls, 'dirty');
+    const dirtyAll = controlsAllChecked(controls, 'dirty');
+    const touched = controlsPartialChecked(controls, 'touched');
+    const touchedAll = controlsAllChecked(controls, 'touched');
+    function reset() {
+        Object.values(controls).forEach((control) => {
+            control.reset();
+        });
+    }
+    return {
+        controls,
+        dirty,
+        dirtyAll,
+        error: errors[0],
+        errors,
+        invalid: !valid,
+        pristine: !dirty,
+        pristineAll: !dirtyAll,
+        reset,
+        setValidators,
+        touched,
+        touchedAll,
+        untouched: !touched,
+        untouchedAll: !touchedAll,
+        valid,
+        value,
+        wrong: touched && !valid
+    };
 }
 
 export { formArrayControl, formArrayGroup, formArrayList, inputArrayControl, reactArrayControl, useFormArray, useFormControl, useFormGroup, useInputControl, useReactControl };