@strato-admin/faker-ecommerce 0.1.1 → 0.3.0

package/dist/ra-core/src/form/groups/useFormGroup.js

@@ -0,0 +1,146 @@
+import { useEffect, useState } from 'react';
+import get from 'lodash/get.js';
+import isEqual from 'lodash/isEqual.js';
+import { useFormState } from 'react-hook-form';
+import { useFormGroups } from './useFormGroups';
+import { useEvent } from '../../util';
+/**
+ * Retrieve a specific form group data such as its validation status (valid/invalid) or
+ * or whether its inputs have been updated (dirty/pristine)
+ *
+ * @example
+ * import { Edit, SimpleForm, TextInput, FormGroupContextProvider, useFormGroup, minLength } from 'react-admin';
+ * import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
+ * import ExpandMoreIcon from '@mui/icons-material/ExpandMoreIcon';
+ *
+ * const PostEdit = () => (
+ *     <Edit>
+ *         <SimpleForm>
+ *             <TextInput source="title" />
+ *             <FormGroupContextProvider name="options">
+ *                 <Accordion>
+ *                     <AccordionSummary
+ *                         expandIcon={<ExpandMoreIcon />}
+ *                         aria-controls="options-content"
+ *                         id="options-header"
+ *                     >
+ *                         <AccordionSectionTitle name="options">Options</AccordionSectionTitle>
+ *                     </AccordionSummary>
+ *                     <AccordionDetails id="options-content" aria-labelledby="options-header">
+ *                         <TextInput source="teaser" validate={minLength(20)} />
+ *                     </AccordionDetails>
+ *                 </Accordion>
+ *             </FormGroupContextProvider>
+ *         </SimpleForm>
+ *     </Edit>
+ * );
+ *
+ * const AccordionSectionTitle = ({ children, name }) => {
+ *     const formGroupState = useFormGroup(name);
+ *     return (
+ *         <Typography color={!formGroupState.isValid && formGroupState.isDirty ? 'error' : 'inherit'}>
+ *             {children}
+ *         </Typography>
+ *     );
+ * }
+ *
+ * @param {string} name The form group name
+ * @returns {FormGroupState} The form group state
+ */
+export const useFormGroup = (name) => {
+    const { dirtyFields, touchedFields, validatingFields, errors } = useFormState();
+    // dirtyFields, touchedFields, validatingFields and errors are objects with keys being the field names
+    // Ex: { title: true }
+    // However, they are not correctly serialized when using JSON.stringify
+    // To avoid our effects to not be triggered when they should, we extract the keys and use that as a dependency
+    const dirtyFieldsNames = Object.keys(dirtyFields);
+    const touchedFieldsNames = Object.keys(touchedFields);
+    const validatingFieldsNames = Object.keys(validatingFields);
+    const errorsNames = Object.keys(errors);
+    const formGroups = useFormGroups();
+    const [state, setState] = useState({
+        errors: undefined,
+        isDirty: false,
+        isTouched: false,
+        isValid: true,
+        isValidating: true,
+    });
+    const updateGroupState = useEvent(() => {
+        if (!formGroups)
+            return;
+        const fields = formGroups.getGroupFields(name);
+        const fieldStates = fields
+            .map(field => {
+            return {
+                name: field,
+                error: get(errors, field, undefined),
+                isDirty: get(dirtyFields, field, false) !== false,
+                isValid: get(errors, field, undefined) == null,
+                isValidating: get(validatingFields, field, undefined) == null,
+                isTouched: get(touchedFields, field, false) !== false,
+            };
+        })
+            .filter(fieldState => fieldState != undefined); // eslint-disable-line
+        const newState = getFormGroupState(fieldStates);
+        setState(oldState => {
+            if (!isEqual(oldState, newState)) {
+                return newState;
+            }
+            return oldState;
+        });
+    });
+    useEffect(() => {
+        updateGroupState();
+    }, [
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        JSON.stringify(dirtyFieldsNames),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        JSON.stringify(errorsNames),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        JSON.stringify(touchedFieldsNames),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        JSON.stringify(validatingFieldsNames),
+        updateGroupState,
+        name,
+        formGroups,
+    ]);
+    useEffect(() => {
+        if (!formGroups)
+            return;
+        // Whenever the group content changes (input are added or removed)
+        // we must update its state
+        const unsubscribe = formGroups.subscribe(name, () => {
+            updateGroupState();
+        });
+        return unsubscribe;
+    }, [formGroups, name, updateGroupState]);
+    return state;
+};
+/**
+ * Get the state of a form group
+ *
+ * @param {FieldState[]} fieldStates A map of field states from react-hook-form where the key is the field name.
+ * @returns {FormGroupState} The state of the group.
+ */
+export const getFormGroupState = (fieldStates) => {
+    return fieldStates.reduce((acc, fieldState) => {
+        const errors = acc.errors || {};
+        if (fieldState.error) {
+            errors[fieldState.name] = fieldState.error;
+        }
+        const newState = {
+            isDirty: acc.isDirty || fieldState.isDirty,
+            errors,
+            isTouched: acc.isTouched || fieldState.isTouched,
+            isValid: acc.isValid && fieldState.isValid,
+            isValidating: acc.isValidating && fieldState.isValidating,
+        };
+        return newState;
+    }, {
+        isDirty: false,
+        errors: undefined,
+        isValid: true,
+        isTouched: false,
+        isValidating: false,
+    });
+};

package/dist/ra-core/src/form/groups/useFormGroupContext.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Retrieve the name of the form group the consumer belongs to. May be undefined if the consumer is not inside a form group.
+ */
+export declare const useFormGroupContext: () => string | null;

package/dist/ra-core/src/form/groups/useFormGroupContext.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { FormGroupContext } from './FormGroupContext';
+/**
+ * Retrieve the name of the form group the consumer belongs to. May be undefined if the consumer is not inside a form group.
+ */
+export const useFormGroupContext = () => {
+    const context = useContext(FormGroupContext);
+    return context;
+};

package/dist/ra-core/src/form/groups/useFormGroups.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Retrieve the form groups management context. Used by inputs to register themselves into a form group.
+ */
+export declare const useFormGroups: () => unknown;

package/dist/ra-core/src/form/groups/useFormGroups.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { FormGroupsContext } from './FormGroupsContext';
+/**
+ * Retrieve the form groups management context. Used by inputs to register themselves into a form group.
+ */
+export const useFormGroups = () => {
+    const context = useContext(FormGroupsContext);
+    return context;
+};

package/dist/ra-core/src/form/index.d.ts

@@ -0,0 +1,14 @@
+export * from './choices';
+export * from './Form';
+export * from './FormDataConsumer';
+export * from './groups';
+export * from './useApplyInputDefaultValues';
+export * from './useAugmentedForm';
+export * from './useInput';
+export * from './useRecordFromLocation';
+export * from './useSuggestions';
+export * from './useWarnWhenUnsavedChanges';
+export * from './validation';
+export * from './WarnWhenUnsavedChanges';
+export * from './FilterLiveForm';
+export * from './useFormIsDirty';

package/dist/ra-core/src/form/index.js

@@ -0,0 +1,14 @@
+export * from './choices';
+export * from './Form';
+export * from './FormDataConsumer';
+export * from './groups';
+export * from './useApplyInputDefaultValues';
+export * from './useAugmentedForm';
+export * from './useInput';
+export * from './useRecordFromLocation';
+export * from './useSuggestions';
+export * from './useWarnWhenUnsavedChanges';
+export * from './validation';
+export * from './WarnWhenUnsavedChanges';
+export * from './FilterLiveForm';
+export * from './useFormIsDirty';

package/dist/ra-core/src/form/sanitizeEmptyValues.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Remove empty strings from form state
+ *
+ * @example
+ * sanitizeEmptyValues({ foo: '', bar: 'baz' }) // { bar: 'baz' }
+ */
+export declare const sanitizeEmptyValues: (values: any, record?: any) => any;

package/dist/ra-core/src/form/sanitizeEmptyValues.js

@@ -0,0 +1,26 @@
+/**
+ * Remove empty strings from form state
+ *
+ * @example
+ * sanitizeEmptyValues({ foo: '', bar: 'baz' }) // { bar: 'baz' }
+ */
+export const sanitizeEmptyValues = (values, record = {}) => {
+    const sanitizedValues = {};
+    Object.keys(values).forEach(key => {
+        if (values[key] == null || values[key] === '') {
+            if (record.hasOwnProperty(key)) {
+                // user has emptied a field, make the value null
+                sanitizedValues[key] = null;
+            }
+            else {
+                // user has emptied a field, but the initial value was undefined
+                // so we don't include it in the sanitized values
+            }
+        }
+        else {
+            // this is a non-empty value, so we include it in the sanitized values
+            sanitizedValues[key] = values[key];
+        }
+    });
+    return sanitizedValues;
+};

package/dist/ra-core/src/form/useApplyInputDefaultValues.d.ts

@@ -0,0 +1,19 @@
+import { FieldValues, UseFieldArrayReturn } from 'react-hook-form';
+import { InputProps } from './useInput';
+interface StandardInput {
+    inputProps: Partial<InputProps> & {
+        source: string;
+    };
+    isArrayInput?: undefined;
+    fieldArrayInputControl?: undefined;
+}
+interface ArrayInput {
+    inputProps: Partial<InputProps> & {
+        source: string;
+    };
+    isArrayInput: true;
+    fieldArrayInputControl: UseFieldArrayReturn<FieldValues, string, 'id'>;
+}
+type Props = StandardInput | ArrayInput;
+export declare const useApplyInputDefaultValues: ({ inputProps, isArrayInput, fieldArrayInputControl, }: Props) => void;
+export {};

package/dist/ra-core/src/form/useApplyInputDefaultValues.js

@@ -0,0 +1,71 @@
+import { useEffect, useRef } from 'react';
+import { useFormContext, } from 'react-hook-form';
+import get from 'lodash/get.js';
+import { useRecordContext } from '../controller';
+import { useWrappedSource } from '../core';
+/*
+ * This hook updates the input with the default value if default value is present
+ * and field input is not already populated or dirty
+ */
+export const useApplyInputDefaultValues = ({ inputProps, isArrayInput, fieldArrayInputControl, }) => {
+    const { defaultValue, source, disabled } = inputProps;
+    const finalSource = useWrappedSource(source);
+    const record = useRecordContext(inputProps);
+    const { getValues, resetField, reset, subscribe } = useFormContext();
+    const recordValue = get(record, finalSource);
+    const formValue = get(getValues(), finalSource);
+    const isDirty = useRef(undefined);
+    useEffect(() => {
+        return subscribe({
+            // Even though we only need dirtyFields, we subscribe to values as well to
+            // ensure we properly receive dirtyFields updates for newly added items in an ArrayInput
+            formState: { values: true, dirtyFields: true },
+            callback: ({ dirtyFields }) => {
+                isDirty.current = get(dirtyFields ?? {}, finalSource, false);
+            },
+        });
+    }, [finalSource, subscribe]);
+    useEffect(() => {
+        if (defaultValue == null ||
+            formValue != null ||
+            // When the input is disabled, its value may always be undefined, no matter the default value.
+            // This prevents from trying to reset the value indefinitely.
+            disabled ||
+            // We check strictly for undefined to avoid setting default value
+            // when the field is null
+            recordValue !== undefined ||
+            isDirty.current === true) {
+            return;
+        }
+        // Side note: For Array Input but checked for all to avoid possible regression
+        // Since we use get(record, source), if source is like foo.23.bar,
+        // this effect will run. However we only want to set the default value
+        // for the subfield bar if the record actually has a value for foo.23
+        const pathContainsIndex = finalSource
+            .split('.')
+            .some(pathPart => numericRegex.test(pathPart));
+        if (pathContainsIndex) {
+            const parentPath = finalSource.split('.').slice(0, -1).join('.');
+            const parentValue = get(getValues(), parentPath);
+            if (parentValue == null) {
+                // the parent is undefined, so we don't want to set the default value
+                return;
+            }
+        }
+        if (isArrayInput) {
+            if (!fieldArrayInputControl) {
+                throw new Error('useApplyInputDefaultValues: No fieldArrayInputControl passed in props for array input usage');
+            }
+            // We need to update inputs nested in array using react hook forms
+            // own array controller rather then the generic reset to prevent control losing
+            // context of the nested inputs
+            fieldArrayInputControl.replace(defaultValue);
+            // resets the form so that control no longer sees the form as dirty after
+            // defaults applied
+            reset({}, { keepValues: true });
+            return;
+        }
+        resetField(finalSource, { defaultValue });
+    });
+};
+const numericRegex = /^\d+$/;

package/dist/ra-core/src/form/useAugmentedForm.d.ts

@@ -0,0 +1,32 @@
+import { BaseSyntheticEvent } from 'react';
+import { FieldValues, SubmitHandler, UseFormProps } from 'react-hook-form';
+import { RaRecord } from '../types';
+import { SaveHandler } from '../controller';
+import { ValidateForm } from './validation/getSimpleValidationResolver';
+/**
+ * Wrapper around react-hook-form's useForm
+ *
+ * This hook adds the following features to react-hook-form's useForm:
+ *
+ * - form initialization based on RecordContext
+ * - validation based on a validate function
+ * - sanitization of empty values
+ * - notification on invalid form
+ * - stop form submission event propagation
+ */
+export declare const useAugmentedForm: <RecordType = any>(props: UseAugmentedFormProps<RecordType>) => {
+    form: import("react-hook-form").UseFormReturn<any, any, FieldValues>;
+    handleSubmit: (values: any, event: any) => Promise<void>;
+    formHandleSubmit: (event: BaseSyntheticEvent) => void;
+};
+export type UseAugmentedFormProps<RecordType = any> = UseFormOwnProps<RecordType> & Omit<UseFormProps, 'onSubmit'> & {
+    validate?: ValidateForm;
+};
+export interface UseFormOwnProps<RecordType = any> {
+    defaultValues?: any;
+    formRootPathname?: string;
+    record?: Partial<RaRecord>;
+    onSubmit?: SubmitHandler<FieldValues> | SaveHandler<RecordType>;
+    sanitizeEmptyValues?: boolean;
+    disableInvalidFormNotification?: boolean;
+}

package/dist/ra-core/src/form/useAugmentedForm.js

@@ -0,0 +1,101 @@
+import { useCallback, useEffect, useMemo, useRef, } from 'react';
+import { useForm, } from 'react-hook-form';
+import merge from 'lodash/merge.js';
+import { useRecordContext, useSaveContext } from '../controller';
+import getFormInitialValues from './getFormInitialValues';
+import { getSimpleValidationResolver, } from './validation/getSimpleValidationResolver';
+import { setSubmissionErrors } from './validation/setSubmissionErrors';
+import { useNotifyIsFormInvalid } from './validation/useNotifyIsFormInvalid';
+import { sanitizeEmptyValues as sanitizeValues } from './sanitizeEmptyValues';
+import { useRecordFromLocation } from './useRecordFromLocation';
+/**
+ * Wrapper around react-hook-form's useForm
+ *
+ * This hook adds the following features to react-hook-form's useForm:
+ *
+ * - form initialization based on RecordContext
+ * - validation based on a validate function
+ * - sanitization of empty values
+ * - notification on invalid form
+ * - stop form submission event propagation
+ */
+export const useAugmentedForm = (props) => {
+    const { criteriaMode = 'firstError', defaultValues, formRootPathname, resolver, resetOptions, reValidateMode = 'onChange', onSubmit, sanitizeEmptyValues, validate, disableInvalidFormNotification, ...rest } = props;
+    const saveContext = useSaveContext();
+    const record = useRecordContext(props);
+    const defaultValuesIncludingRecord = useMemo(() => getFormInitialValues(defaultValues, record), 
+    // eslint-disable-next-line
+    [
+        // eslint-disable-next-line
+        JSON.stringify({
+            defaultValues: typeof defaultValues === 'function'
+                ? 'function'
+                : defaultValues,
+            record,
+        }),
+    ]);
+    const finalResolver = resolver
+        ? resolver
+        : validate
+            ? getSimpleValidationResolver(validate)
+            : undefined;
+    const form = useForm({
+        criteriaMode,
+        defaultValues: defaultValuesIncludingRecord,
+        reValidateMode,
+        resolver: finalResolver,
+        ...rest,
+    });
+    const formRef = useRef(form);
+    const { reset, formState } = form;
+    const { isReady } = formState;
+    const previousRecordId = useRef(record?.id);
+    useEffect(() => {
+        const recordIdChanged = record?.id !== previousRecordId.current;
+        previousRecordId.current = record?.id;
+        reset(defaultValuesIncludingRecord, recordIdChanged ? undefined : resetOptions);
+    }, [defaultValuesIncludingRecord, reset, resetOptions, record?.id]);
+    // notify on invalid form
+    useNotifyIsFormInvalid(form.control, !disableInvalidFormNotification);
+    const recordFromLocation = useRecordFromLocation();
+    const recordFromLocationApplied = useRef(false);
+    useEffect(() => {
+        if (!isReady)
+            return;
+        if (recordFromLocation && !recordFromLocationApplied.current) {
+            reset(merge({}, defaultValuesIncludingRecord, recordFromLocation), {
+                keepDefaultValues: true,
+            });
+            recordFromLocationApplied.current = true;
+        }
+    }, [defaultValuesIncludingRecord, recordFromLocation, reset, isReady]);
+    // submit callbacks
+    const handleSubmit = useCallback(async (values, event) => {
+        let errors;
+        const finalValues = sanitizeEmptyValues
+            ? sanitizeValues(values, record)
+            : values;
+        if (onSubmit) {
+            errors = await onSubmit(finalValues, event);
+        }
+        if (onSubmit == null && saveContext?.save) {
+            errors = await saveContext.save(finalValues, event);
+        }
+        if (errors != null) {
+            setSubmissionErrors(errors, formRef.current.setError);
+        }
+    }, [onSubmit, saveContext, sanitizeEmptyValues, record]);
+    const formHandleSubmit = useCallback((event) => {
+        if (!event.defaultPrevented) {
+            // Prevent outer forms to receive the event
+            event.stopPropagation();
+            form.handleSubmit(handleSubmit)(event);
+        }
+        return;
+    }, [form, handleSubmit]);
+    return {
+        form,
+        handleSubmit,
+        formHandleSubmit,
+    };
+};

package/dist/ra-core/src/form/useFormIsDirty.d.ts

@@ -0,0 +1,4 @@
+export declare const useFormIsDirty: () => boolean;
+export declare const checkHasDirtyFields: (dirtyFields: Partial<Readonly<{
+    [x: string]: any;
+}>>) => boolean;

package/dist/ra-core/src/form/useFormIsDirty.js

@@ -0,0 +1,39 @@
+import { useFormState } from 'react-hook-form';
+import isEmpty from 'lodash/isEmpty.js';
+// useFormState().isDirty might differ from useFormState().dirtyFields (https://github.com/react-hook-form/react-hook-form/issues/4740)
+export const useFormIsDirty = () => {
+    const { dirtyFields } = useFormState();
+    return checkHasDirtyFields(dirtyFields);
+};
+export const checkHasDirtyFields = (dirtyFields) => {
+    // dirtyFields can contains simple keys with boolean values, nested objects or arrays
+    // We must ignore values that are false
+    return Object.values(dirtyFields).some(value => {
+        if (typeof value === 'boolean') {
+            return value;
+        }
+        else if (Array.isArray(value)) {
+            // Some arrays contain only booleans (scalar arrays), some arrays contain objects (object arrays)
+            for (const item of value) {
+                if (item === true) {
+                    return true;
+                }
+                // FIXME: because we currently don't set default values correctly for arrays,
+                // new items are either empty objects, or undefined in dirtyFields. Consider them as dirty.
+                if ((typeof item === 'object' && isEmpty(item)) ||
+                    item === undefined) {
+                    return true;
+                }
+                if (typeof item === 'object' &&
+                    item !== null &&
+                    checkHasDirtyFields(item)) {
+                    return true;
+                }
+            }
+        }
+        else if (typeof value === 'object' && value !== null) {
+            return checkHasDirtyFields(value);
+        }
+        return false;
+    });
+};

package/dist/ra-core/src/form/useInput.d.ts

@@ -0,0 +1,33 @@
+import { FocusEvent, ReactNode } from 'react';
+import { ControllerFieldState, ControllerRenderProps, UseControllerProps, UseControllerReturn, UseFormStateReturn } from 'react-hook-form';
+import type { EditorEvents } from '@tiptap/react';
+import { Validator } from './validation';
+export declare const useInput: <ValueType = any>(props: InputProps<ValueType>) => UseInputValue;
+export type InputProps<ValueType = any> = Omit<UseControllerProps, 'name' | 'defaultValue' | 'rules'> & Partial<UseControllerReturn> & {
+    alwaysOn?: any;
+    defaultValue?: any;
+    format?: (value: ValueType) => any;
+    id?: string;
+    isRequired?: boolean;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    name?: string;
+    onBlur?: (...event: any[]) => void;
+    onChange?: (...event: any[]) => void;
+    parse?: (value: any) => ValueType;
+    type?: string;
+    resource?: string;
+    source: string;
+    validate?: Validator | Validator[];
+    readOnly?: boolean;
+    disabled?: boolean;
+};
+export type UseInputValue = {
+    id: string;
+    isRequired: boolean;
+    field: Omit<ControllerRenderProps, 'onBlur'> & {
+        onBlur: (event?: FocusEvent<HTMLElement> | EditorEvents['blur']) => void;
+    };
+    formState: UseFormStateReturn<Record<string, string>>;
+    fieldState: ControllerFieldState;
+};

package/dist/ra-core/src/form/useInput.js

@@ -0,0 +1,100 @@
+import { useEffect, useId } from 'react';
+import { useController, } from 'react-hook-form';
+import get from 'lodash/get.js';
+import { useRecordContext } from '../controller';
+import { composeValidators, isRequired } from './validation';
+import { useFormGroupContext, useFormGroups } from './groups';
+import { useApplyInputDefaultValues } from './useApplyInputDefaultValues';
+import { useEvent } from '../util';
+import { useWrappedSource } from '../core';
+// replace null or undefined values by empty string to avoid controlled/uncontrolled input warning
+const defaultFormat = (value) => (value == null ? '' : value);
+// parse empty string into null as it's more suitable for a majority of backends
+const defaultParse = (value) => (value === '' ? null : value);
+export const useInput = (props) => {
+    const { defaultValue, format = defaultFormat, id, isRequired: isRequiredOption, name, onBlur: initialOnBlur, onChange: initialOnChange, parse: parseProp = defaultParse, source, validate, ...options } = props;
+    const finalSource = useWrappedSource(source);
+    const finalName = name || finalSource;
+    const formGroupName = useFormGroupContext();
+    const formGroups = useFormGroups();
+    const record = useRecordContext();
+    // @ts-ignore
+    const parse = useEvent(parseProp);
+    const defaultId = useId();
+    if (!finalName && process.env.NODE_ENV === 'development') {
+        console.warn('Input components require either a source or a name prop.');
+    }
+    useEffect(() => {
+        if (!formGroups || formGroupName == null) {
+            return;
+        }
+        formGroups.registerField(finalSource, formGroupName);
+        return () => {
+            formGroups.unregisterField(finalSource, formGroupName);
+        };
+    }, [formGroups, formGroupName, finalSource]);
+    const sanitizedValidate = Array.isArray(validate)
+        ? composeValidators(validate)
+        : validate;
+    // Fetch the defaultValue from the record if available or apply the provided defaultValue.
+    // This ensures dynamically added inputs have their value set correctly (ArrayInput for example).
+    // We don't do this for the form level defaultValues so that it works as it should in react-hook-form
+    // (i.e. field level defaultValue override form level defaultValues for this field).
+    const { field: controllerField, fieldState, formState, } = useController({
+        name: finalName,
+        defaultValue: get(record, finalSource, defaultValue),
+        rules: {
+            validate: async (value, values) => {
+                if (!sanitizedValidate)
+                    return true;
+                const error = await sanitizedValidate(value, values, {
+                    ...props,
+                    finalSource,
+                });
+                if (!error)
+                    return true;
+                // react-hook-form expects errors to be plain strings but our validators can return objects
+                // that have message and args.
+                // To avoid double translation for users that validate with a schema instead of our validators
+                // we use a special format for our validators errors.
+                // The ValidationError component will check for this format and extract the message and args
+                // to translate.
+                return `@@react-admin@@${JSON.stringify(error)}`;
+            },
+        },
+        ...options,
+    });
+    // Because our forms may receive an asynchronously loaded record for instance,
+    // they may reset their default values which would override the input default value.
+    // This hook ensures that the input default value is applied when a new record is loaded but has
+    // no value for the input.
+    useApplyInputDefaultValues({ inputProps: props });
+    const onBlur = useEvent((...event) => {
+        controllerField.onBlur();
+        if (initialOnBlur) {
+            initialOnBlur(...event);
+        }
+    });
+    const onChange = useEvent((...event) => {
+        const eventOrValue = (props.type === 'checkbox' && event[0]?.target?.value === 'on'
+            ? event[0].target.checked
+            : event[0]?.target?.value ?? event[0]);
+        controllerField.onChange(parse ? parse(eventOrValue) : eventOrValue);
+        if (initialOnChange) {
+            initialOnChange(...event);
+        }
+    });
+    const field = {
+        ...controllerField,
+        value: format ? format(controllerField.value) : controllerField.value,
+        onBlur,
+        onChange,
+    };
+    return {
+        id: id || defaultId,
+        field,
+        fieldState,
+        formState,
+        isRequired: isRequiredOption || isRequired(validate),
+    };
+};