@rolster/react-forms 19.4.12 → 19.4.14

package/dist/es/index.mjs

@@ -0,0 +1,904 @@
+import { createFormArrayOptions, controlsToValue, hasError, someErrors, formArrayIsValid, verifyAllTrueInGroups, createFormControlOptions, formControlIsValid, createFormGroupOptions, formGroupIsValid, verifyAllTrueInControls, verifyAnyTrueInControls, reduceControlsToArray } from '@rolster/forms/helpers';
+import { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+import { v4 } from 'uuid';
+
+function refactorForValid$2(groups, validators) {
+    const errors = validators ? formArrayIsValid({ groups, validators }) : [];
+    return {
+        errors,
+        valid: errors.length === 0 && verifyAllTrueInGroups(groups, 'valid')
+    };
+}
+function refactorForGroups(groups, validators) {
+    return {
+        ...refactorForValid$2(groups, validators),
+        groups,
+        controls: groups.map(({ controls }) => controls),
+        value: groups.map(({ controls }) => controlsToValue(controls))
+    };
+}
+function refactorForControls$1(action, state, groups) {
+    switch (action) {
+        case 'validators':
+            return refactorForValid$2(groups, state.validators);
+        case 'reset':
+        case 'list':
+        case 'value':
+            return refactorForGroups(groups, state.validators);
+        default:
+            return { groups };
+    }
+}
+function useFormArray(options, validators) {
+    const formArray = createFormArrayOptions(options, validators);
+    const refArrayValue = useRef(formArray.groups || []);
+    const refArrayGroups = useRef(new Map());
+    const [state, setState] = useState(() => {
+        return {
+            ...refactorForValid$2(refArrayValue.current, formArray.validators),
+            controls: refArrayValue.current.map(({ controls }) => controls),
+            dirty: false,
+            dirties: false,
+            disabled: false,
+            groups: refArrayValue.current,
+            touched: false,
+            toucheds: false,
+            value: refArrayValue.current.map(({ controls }) => controlsToValue(controls)),
+            validators: formArray.validators
+        };
+    });
+    const subscriber = useCallback((action, group) => {
+        setState((state) => {
+            const groups = state.groups.map((currentGroup) => {
+                return currentGroup.uuid === group.uuid ? group : currentGroup;
+            });
+            return {
+                ...state,
+                ...refactorForControls$1(action, state, groups)
+            };
+        });
+    }, []);
+    useEffect(() => {
+        const previousGroups = refArrayGroups.current;
+        const currentGroups = new Map();
+        state.groups.forEach((group) => {
+            currentGroups.set(group.uuid, group);
+            if (previousGroups.get(group.uuid) !== group) {
+                group.subscribe(subscriber);
+            }
+        });
+        refArrayGroups.current = currentGroups;
+    }, [state.groups]);
+    const disable = useCallback(() => {
+        setState((state) => ({ ...state, disabled: true }));
+    }, []);
+    const enable = useCallback(() => {
+        setState((state) => ({ ...state, disabled: false }));
+    }, []);
+    const setValue = useCallback((groups) => {
+        setState((state) => ({
+            ...state,
+            ...refactorForGroups(groups, state.validators)
+        }));
+    }, []);
+    const setStartValue = useCallback((groups) => {
+        setState((state) => ({
+            ...state,
+            ...refactorForGroups(groups, state.validators)
+        }));
+    }, []);
+    const setDefaultValue = useCallback((groups) => {
+        setState((state) => ({
+            ...state,
+            ...refactorForGroups(groups, state.validators)
+        }));
+        refArrayValue.current = groups;
+    }, []);
+    const push = useCallback((group) => {
+        refArrayGroups.current.set(group.uuid, group);
+        group.subscribe(subscriber);
+        setState((state) => ({
+            ...state,
+            ...refactorForGroups([...state.groups, group], state.validators)
+        }));
+    }, []);
+    const merge = useCallback((groups) => {
+        groups.forEach((group) => {
+            group.subscribe(subscriber);
+            refArrayGroups.current.set(group.uuid, group);
+        });
+        setState((state) => ({
+            ...state,
+            ...refactorForGroups([...state.groups, ...groups], state.validators)
+        }));
+    }, []);
+    const remove = useCallback(({ uuid }) => {
+        refArrayGroups.current.delete(uuid);
+        setState((state) => ({
+            ...state,
+            ...refactorForGroups(state.groups.filter((group) => group.uuid !== uuid), state.validators)
+        }));
+    }, []);
+    const findByUuid = useCallback((uuid) => {
+        return refArrayGroups.current.get(uuid);
+    }, []);
+    const setValidators = useCallback((validators) => {
+        setState((state) => ({
+            ...state,
+            ...refactorForValid$2(state.groups, validators),
+            validators
+        }));
+    }, []);
+    const formArrayHasError = useCallback((key) => {
+        return hasError(state.errors, key);
+    }, [state.errors]);
+    const formArraySomeErrors = useCallback((keys) => {
+        return someErrors(state.errors, keys);
+    }, [state.errors]);
+    const reset = useCallback(() => {
+        refArrayValue.current.forEach((group) => group.reset());
+        refArrayGroups.current = new Map();
+        setState((state) => ({
+            ...state,
+            ...refactorForGroups(refArrayValue.current, state.validators)
+        }));
+    }, []);
+    return {
+        ...state,
+        disable,
+        enable,
+        enabled: !state.disabled,
+        error: state.errors[0],
+        findByUuid,
+        hasError: formArrayHasError,
+        invalid: !state.valid,
+        merge,
+        pristine: !state.dirty,
+        pristines: !state.dirties,
+        push,
+        remove,
+        reset,
+        setDefaultValue,
+        setStartValue,
+        setValidators,
+        setValue,
+        someErrors: formArraySomeErrors,
+        untouched: !state.touched,
+        untoucheds: !state.toucheds,
+        wrong: state.touched && !state.valid
+    };
+}
+
+class RolsterArrayControl {
+    constructor(options) {
+        this.uuid = options.uuid;
+        this.defaultValue = options.defaultValue;
+        this.value = options.value;
+        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;
+        this.valid = this.isValid(options.errors);
+        this.invalid = !this.valid;
+        this.wrong = this.touched && this.invalid;
+        this.errors = options.errors;
+        this.error = this.errors[0];
+        this.validators = options.validators;
+    }
+    focus() {
+        if (this.unfocused) {
+            this.refresh('focused', { focused: true });
+        }
+    }
+    blur() {
+        if (this.focused) {
+            this.refresh('focused', { focused: false, touched: true });
+        }
+    }
+    disable() {
+        if (this.enabled) {
+            this.refresh('disabled', { disabled: true });
+        }
+    }
+    enable() {
+        if (this.disabled) {
+            this.refresh('disabled', { disabled: false });
+        }
+    }
+    touch() {
+        if (this.untouched) {
+            this.refresh('touched', { touched: true });
+        }
+    }
+    setDefaultValue(value) {
+        if (value !== this.defaultValue) {
+            const errors = this.validators
+                ? formControlIsValid({ value, validators: this.validators })
+                : [];
+            this.refresh('value', { errors, defaultValue: value, value });
+        }
+    }
+    setStartValue(value) {
+        if (value !== this.value) {
+            const errors = this.validators
+                ? formControlIsValid({ value, validators: this.validators })
+                : [];
+            this.refresh('value', { errors, value });
+        }
+    }
+    setValue(value) {
+        if (value !== this.value) {
+            const errors = this.validators
+                ? formControlIsValid({ value, validators: this.validators })
+                : [];
+            this.refresh('value', { dirty: true, errors, value });
+        }
+    }
+    setValidators(validators) {
+        const errors = validators
+            ? formControlIsValid({ value: this.value, validators })
+            : [];
+        this.refresh('validators', { errors, validators });
+    }
+    subscribe(subscriber) {
+        this.subscriber = subscriber;
+    }
+    hasError(key) {
+        return hasError(this.errors, key);
+    }
+    someErrors(keys) {
+        return someErrors(this.errors, keys);
+    }
+    reset() {
+        const errors = this.validators
+            ? formControlIsValid({
+                value: this.defaultValue,
+                validators: this.validators
+            })
+            : [];
+        this.refresh('reset', {
+            dirty: false,
+            errors,
+            touched: false,
+            value: this.defaultValue
+        });
+    }
+    isValid(errors) {
+        return errors.length === 0;
+    }
+    builder(options) {
+        return new RolsterArrayControl({ ...this, ...options });
+    }
+    refresh(action, options) {
+        this.subscriber?.(action, this.builder(options));
+    }
+}
+class ReactRolsterArrayControl extends RolsterArrayControl {
+    constructor(options) {
+        const { value, validators } = options;
+        const errors = validators ? formControlIsValid({ value, validators }) : [];
+        super({ ...options, errors });
+    }
+}
+function rolsterArrayControl(options, validators) {
+    const formControl = createFormControlOptions(options, validators);
+    return new ReactRolsterArrayControl({
+        ...formControl,
+        defaultValue: formControl.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);
+}
+function areaArrayControl(options, validators) {
+    return rolsterArrayControl(options, validators);
+}
+
+function replaceControl(controls, control) {
+    return Object.entries(controls).reduce((controls, [key, _control]) => {
+        if (_control.uuid === control.uuid) {
+            controls[key] = control;
+        }
+        return controls;
+    }, { ...controls });
+}
+
+function refactorForValid$1(controls, validators) {
+    const errors = validators ? formGroupIsValid({ controls, validators }) : [];
+    return {
+        errors,
+        valid: errors.length === 0 && verifyAllTrueInControls(controls, 'valid')
+    };
+}
+function refactorForControls(action, group, controls) {
+    switch (action) {
+        case 'focused':
+        case 'touched':
+            return {
+                touched: verifyAnyTrueInControls(controls, 'touched'),
+                toucheds: verifyAllTrueInControls(controls, 'touched')
+            };
+        case 'validators':
+            return refactorForValid$1(controls, group.validators);
+        case 'reset':
+            return {
+                ...refactorForValid$1(controls, group.validators),
+                dirty: verifyAnyTrueInControls(controls, 'dirty'),
+                dirties: verifyAllTrueInControls(controls, 'dirty'),
+                touched: verifyAnyTrueInControls(controls, 'touched'),
+                toucheds: verifyAllTrueInControls(controls, 'touched'),
+                value: controlsToValue(controls)
+            };
+        case 'list':
+        case 'value':
+            return {
+                ...refactorForValid$1(controls, group.validators),
+                dirty: verifyAnyTrueInControls(controls, 'dirty'),
+                dirties: verifyAllTrueInControls(controls, 'dirty'),
+                value: controlsToValue(controls)
+            };
+        default:
+            return {};
+    }
+}
+class RolsterArrayGroup {
+    constructor(options) {
+        this.uuid = options.uuid;
+        this._controls = options.controls;
+        this.value = options.value;
+        this.resource = options.resource;
+        this.dirty = !!options.dirty;
+        this.dirties = !!options.dirties;
+        this.pristine = !this.dirty;
+        this.pristines = !this.dirties;
+        this.touched = !!options.touched;
+        this.toucheds = !!options.toucheds;
+        this.untouched = !this.touched;
+        this.untoucheds = !this.toucheds;
+        this.valid = !!options.valid;
+        this.invalid = !this.valid;
+        this.wrong = this.touched && this.invalid;
+        this.errors = options.errors;
+        this.error = this.errors[0];
+        this.validators = options.validators;
+        this.subscriberControl = (action, control) => {
+            const controls = replaceControl(this._controls, control);
+            this._controls = controls;
+            this.refresh(action, {
+                ...refactorForControls(action, this, controls),
+                controls
+            });
+        };
+    }
+    get controls() {
+        return this._controls;
+    }
+    subscribe(subscriber) {
+        this.subscriber = subscriber;
+        Object.values(this._controls).forEach((control) => {
+            control.subscribe(this.subscriberControl);
+        });
+    }
+    setValidators(validators) {
+        this.refresh('validators', {
+            ...refactorForValid$1(this._controls, validators),
+            validators
+        });
+    }
+    setResource(resource) {
+        this.refresh('resource', { resource });
+    }
+    reset() {
+        Object.values(this._controls).forEach((control) => {
+            control.reset();
+        });
+    }
+    refresh(action, options) {
+        if (this.subscriber) {
+            this.subscriber(action, new RolsterArrayGroup({
+                ...this,
+                ...options,
+                controls: this._controls
+            }));
+        }
+    }
+}
+class ReactRolsterArrayGroup extends RolsterArrayGroup {
+    constructor(options) {
+        const { controls, validators } = options;
+        const errors = validators ? formGroupIsValid({ controls, validators }) : [];
+        super({
+            ...options,
+            errors,
+            dirties: verifyAllTrueInControls(controls, 'dirty'),
+            dirty: verifyAnyTrueInControls(controls, 'dirty'),
+            touched: verifyAnyTrueInControls(controls, 'touched'),
+            toucheds: verifyAllTrueInControls(controls, 'touched'),
+            valid: errors.length === 0 && verifyAllTrueInControls(controls, 'valid'),
+            value: controlsToValue(controls)
+        });
+    }
+}
+function valueIsGroupOptions(options) {
+    return typeof options === 'object' && 'controls' in options;
+}
+function formArrayGroup(options, validators) {
+    const _uuid = valueIsGroupOptions(options) ? options.uuid || v4() : v4();
+    return new ReactRolsterArrayGroup({
+        ...createFormGroupOptions(options, validators),
+        uuid: _uuid
+    });
+}
+
+class RolsterArrayList extends RolsterArrayControl {
+    constructor(options) {
+        const { controls, controlsUuid, valueToControls, valueToUuid, validators } = options;
+        const value = controls.map(controlsToValue);
+        const errors = validators ? formControlIsValid({ value, validators }) : [];
+        super({ ...options, errors, value });
+        this.valueToControls = valueToControls;
+        this.valueToUuid = valueToUuid;
+        this._controls = controls;
+        this.controlsUuid = controlsUuid ?? controls.map(() => v4());
+        this.valid =
+            errors.length === 0 &&
+                controls.reduce((valid, controls) => valid && verifyAllTrueInControls(controls, 'valid'), true);
+        this.invalid = !this.valid;
+        this.wrong = this.touched && this.invalid;
+        controls.forEach((reactControls) => {
+            this._subscribe(reactControls);
+        });
+    }
+    get controls() {
+        return this._controls;
+    }
+    setDefaultValue(value) {
+        this.refresh('list', {
+            controls: value.map(this.valueToControls),
+            controlsUuid: this.generateControlsUuid(value),
+            defaultValue: value
+        });
+    }
+    setStartValue(value) {
+        this.refresh('list', {
+            controls: value.map(this.valueToControls),
+            controlsUuid: this.generateControlsUuid(value)
+        });
+    }
+    setValue(value) {
+        this.refresh('list', {
+            controls: value.map(this.valueToControls),
+            controlsUuid: this.generateControlsUuid(value),
+            dirty: true
+        });
+    }
+    reset() {
+        this.refresh('list', {
+            controls: this.defaultValue.map(this.valueToControls),
+            controlsUuid: this.generateControlsUuid(this.defaultValue),
+            dirty: false,
+            touched: false
+        });
+    }
+    push(controls) {
+        const _uuid = this.valueToUuid?.(controlsToValue(controls)) ?? v4();
+        this.refresh('list', {
+            controls: [...this._controls, controls],
+            controlsUuid: [...this.controlsUuid, _uuid]
+        });
+    }
+    remove(controls) {
+        const _controls = [];
+        const _controlsUuid = [];
+        this._controls.forEach((currentControls, index) => {
+            if (currentControls !== controls) {
+                _controls.push(currentControls);
+                _controlsUuid.push(this.controlsUuid[index]);
+            }
+        });
+        this.refresh('list', {
+            controls: _controls,
+            controlsUuid: _controlsUuid
+        });
+    }
+    findControlsByUuid(uuid) {
+        const index = this.controlsUuid.indexOf(uuid);
+        return index >= 0 ? this._controls[index] : undefined;
+    }
+    builder(options) {
+        return new RolsterArrayList({
+            ...this,
+            ...options,
+            valueToControls: this.valueToControls,
+            valueToUuid: this.valueToUuid
+        });
+    }
+    refresh(action, options) {
+        super.refresh(action, options);
+    }
+    generateControlsUuid(values) {
+        return values.map((value) => this.valueToUuid?.(value) ?? v4());
+    }
+    _subscribe(controls) {
+        Object.values(controls).forEach((control) => {
+            control.subscribe((action, _control) => {
+                const _controls = this._controls.map((_controls) => {
+                    const currentControl = Object.values(_controls).some((currentControl) => currentControl.uuid === _control.uuid);
+                    return currentControl
+                        ? replaceControl(_controls, _control)
+                        : _controls;
+                });
+                this._controls = _controls;
+                this.refresh(action, { controls: _controls });
+            });
+        });
+    }
+}
+function formArrayList(options) {
+    const { valueToControls, valueToUuid } = options;
+    const value = options?.value || [];
+    return new RolsterArrayList({
+        ...options,
+        controls: value.map(valueToControls),
+        controlsUuid: value.map((v) => valueToUuid?.(v) ?? v4()),
+        defaultValue: value,
+        uuid: v4()
+    });
+}
+
+function errorsInControl(value, validators) {
+    return validators ? formControlIsValid({ value, validators }) : [];
+}
+
+function useControl(options, validators) {
+    const formControl = createFormControlOptions(options, validators);
+    const defaultValue = useRef(formControl.value);
+    const [state, setState] = useState(() => {
+        return {
+            dirty: false,
+            disabled: false,
+            errors: errorsInControl(formControl.value, formControl.validators),
+            focused: false,
+            touched: !!formControl.touched,
+            value: formControl.value,
+            validators: formControl.validators
+        };
+    });
+    const elementRef = useRef(null);
+    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 setDefaultValue = useCallback((value) => {
+        defaultValue.current = value;
+        setState((state) => ({
+            ...state,
+            errors: errorsInControl(value, state.validators),
+            value
+        }));
+    }, []);
+    const setStartValue = useCallback((value) => {
+        setState((state) => ({
+            ...state,
+            errors: errorsInControl(value, state.validators),
+            value
+        }));
+    }, []);
+    const setValue = useCallback((value) => {
+        setState((state) => ({
+            ...state,
+            dirty: true,
+            errors: errorsInControl(value, state.validators),
+            value
+        }));
+    }, []);
+    const setValidators = useCallback((validators) => {
+        setState((state) => ({
+            ...state,
+            errors: errorsInControl(state.value, validators),
+            validators
+        }));
+    }, []);
+    const reset = useCallback(() => {
+        setState((state) => ({
+            ...state,
+            dirty: false,
+            errors: errorsInControl(defaultValue.current, state.validators),
+            value: defaultValue.current,
+            touched: false
+        }));
+    }, []);
+    const formControlHasError = useCallback((key) => {
+        return hasError(state.errors, key);
+    }, [state.errors]);
+    const formControlSomeErrors = useCallback((keys) => {
+        return someErrors(state.errors, keys);
+    }, [state.errors]);
+    const valid = state.errors.length === 0;
+    return {
+        ...state,
+        blur,
+        disable,
+        elementRef,
+        enable,
+        enabled: !state.disabled,
+        error: state.errors[0],
+        focus,
+        hasError: formControlHasError,
+        invalid: !valid,
+        pristine: !state.dirty,
+        reset,
+        setDefaultValue,
+        setStartValue,
+        setValidators,
+        setValue,
+        someErrors: formControlSomeErrors,
+        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 useAreaControl(options, validators) {
+    return useControl(options, validators);
+}
+
+function refactorForValid(controls, validators) {
+    const errors = validators ? formGroupIsValid({ controls, validators }) : [];
+    return {
+        errors,
+        valid: errors.length === 0 && verifyAllTrueInControls(controls, 'valid')
+    };
+}
+function checkAllSuccess(status) {
+    return status.every((value) => value);
+}
+function checkPartialSuccess(status) {
+    return status.some((value) => value);
+}
+function arraysShallowEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (a.length !== b.length) {
+        return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i]) {
+            return false;
+        }
+    }
+    return true;
+}
+function useFormGroup(options, validators) {
+    const formGroup = createFormGroupOptions(options, validators);
+    const refControls = useRef(formGroup.controls);
+    refControls.current = formGroup.controls;
+    const formGroupStatus = useMemo(() => {
+        const dirty = [];
+        const disabled = [];
+        const focused = [];
+        const touched = [];
+        const value = [];
+        Object.values(formGroup.controls).forEach((control) => {
+            dirty.push(control.dirty);
+            disabled.push(control.disabled);
+            focused.push(control.focused);
+            touched.push(control.touched);
+            value.push(control.value);
+        });
+        return {
+            dirty,
+            disabled,
+            focused,
+            touched,
+            value
+        };
+    }, [formGroup.controls]);
+    const [state, setState] = useState(() => {
+        return {
+            ...refactorForValid(formGroup.controls, formGroup.validators),
+            dirties: checkAllSuccess(formGroupStatus.dirty),
+            dirty: checkPartialSuccess(formGroupStatus.dirty),
+            touched: checkPartialSuccess(formGroupStatus.touched),
+            toucheds: checkAllSuccess(formGroupStatus.touched),
+            validators: formGroup.validators,
+            value: controlsToValue(formGroup.controls)
+        };
+    });
+    const refPrevFormGroupStatus = useRef(null);
+    useEffect(() => {
+        const formGroupPrev = refPrevFormGroupStatus.current;
+        refPrevFormGroupStatus.current = formGroupStatus;
+        if (!formGroupPrev) {
+            return;
+        }
+        const valueChanged = !arraysShallowEqual(formGroupPrev.value, formGroupStatus.value);
+        const dirtyChanged = !arraysShallowEqual(formGroupPrev.dirty, formGroupStatus.dirty);
+        const touchedChanged = !arraysShallowEqual(formGroupPrev.touched, formGroupStatus.touched);
+        const disabledChanged = !arraysShallowEqual(formGroupPrev.disabled, formGroupStatus.disabled);
+        const focusedChanged = !arraysShallowEqual(formGroupPrev.focused, formGroupStatus.focused);
+        if (!valueChanged &&
+            !dirtyChanged &&
+            !touchedChanged &&
+            !disabledChanged &&
+            !focusedChanged) {
+            return;
+        }
+        setState((state) => {
+            const next = { ...state };
+            if (valueChanged) {
+                const validResult = refactorForValid(refControls.current, state.validators);
+                next.errors = validResult.errors;
+                next.valid = validResult.valid;
+                next.value = controlsToValue(refControls.current);
+            }
+            if (dirtyChanged) {
+                next.dirty = checkPartialSuccess(formGroupStatus.dirty);
+                next.dirties = checkAllSuccess(formGroupStatus.dirty);
+            }
+            if (touchedChanged) {
+                next.touched = checkPartialSuccess(formGroupStatus.touched);
+                next.toucheds = checkAllSuccess(formGroupStatus.touched);
+            }
+            return next;
+        });
+    });
+    const setValidators = useCallback((validators) => {
+        setState((state) => ({
+            ...state,
+            ...refactorForValid(refControls.current, validators),
+            validators
+        }));
+    }, []);
+    const setValue = useCallback((value) => {
+        Object.entries(value).forEach(([key, valueControl]) => {
+            const formControl = refControls.current[key];
+            formControl?.setValue(valueControl);
+        });
+    }, []);
+    const reset = useCallback(() => {
+        Object.values(refControls.current).forEach((control) => {
+            control.reset();
+        });
+    }, []);
+    return {
+        ...state,
+        controls: formGroup.controls,
+        error: state.errors[0],
+        invalid: !state.valid,
+        pristine: !state.dirty,
+        pristines: !state.dirties,
+        reset,
+        setValidators,
+        setValue,
+        untouched: !state.touched,
+        untoucheds: !state.toucheds,
+        wrong: state.touched && !state.valid
+    };
+}
+
+function useReactList(value, validators) {
+    const control = useReactControl(value || [], validators);
+    const push = useCallback((item) => {
+        control.setValue([...control.value, item]);
+    }, [control.value, control.setValue]);
+    const remove = useCallback((item) => {
+        const value = control.value.filter((current) => current !== item);
+        if (value.length !== control.value.length) {
+            control.setValue(value);
+        }
+    }, [control.value, control.setValue]);
+    const clear = useCallback(() => {
+        if (control.value.length > 0) {
+            control.setValue([]);
+        }
+    }, [control.value, control.setValue]);
+    return {
+        ...control,
+        clear,
+        push,
+        remove
+    };
+}
+function useFormList(value, validators) {
+    return useReactList(value, validators);
+}
+
+function useInputRefControl(options) {
+    const formRef = useInputControl(options);
+    const setValueRef = useRef(options.setValue);
+    setValueRef.current = options.setValue;
+    useEffect(() => {
+        const element = formRef.elementRef?.current;
+        if (!element) {
+            return;
+        }
+        const handleFocus = () => {
+            formRef.focus();
+        };
+        const handleBlur = () => {
+            formRef.blur();
+        };
+        const handleChange = (event) => {
+            const target = event.target;
+            setValueRef.current(formRef, target.value);
+        };
+        element.addEventListener('focus', handleFocus);
+        element.addEventListener('blur', handleBlur);
+        element.addEventListener('change', handleChange);
+        return () => {
+            element.removeEventListener('focus', handleFocus);
+            element.removeEventListener('blur', handleBlur);
+            element.removeEventListener('change', handleChange);
+        };
+    }, []);
+    return formRef;
+}
+function useTextRefControl(options, validators) {
+    return useInputRefControl({
+        ...createFormControlOptions(options, validators),
+        setValue: (control, value) => {
+            control.setValue(value);
+        }
+    });
+}
+function useNumberRefControl(options, validators) {
+    return useInputRefControl({
+        ...createFormControlOptions(options, validators),
+        setValue: (control, value) => {
+            control.setValue(+value);
+        }
+    });
+}
+
+function reduceControlsToValues(controls) {
+    return reduceControlsToArray(controls, 'value');
+}
+function reduceGroupToValues(group) {
+    return reduceControlsToValues(group.controls);
+}
+
+function useFormArrayGroupSelect({ formArray }) {
+    const [formSelect, setFormGroup] = useState();
+    const formGroup = useMemo(() => {
+        return (formSelect &&
+            formArray.groups.find(({ uuid }) => formSelect.uuid === uuid));
+    }, [formArray.value, formSelect]);
+    return { formGroup, setFormGroup };
+}
+
+export { areaArrayControl, formArrayControl, formArrayGroup, formArrayList, inputArrayControl, reactArrayControl, reduceControlsToValues, reduceGroupToValues, useAreaControl, useFormArray, useFormArrayGroupSelect, useFormControl, useFormGroup, useFormList, useInputControl, useNumberRefControl, useReactControl, useReactList, useTextRefControl };
+//# sourceMappingURL=index.mjs.map