@strato-admin/core 0.1.1 → 0.3.0

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),
+    };
+};

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

@@ -0,0 +1,22 @@
+import { RaRecord } from '../types';
+import { RouterLocation } from '../routing';
+/**
+ * A hook that returns the record to use to override the values in a form
+ * @param options The hook options
+ * @param options.searchSource The key in the location search to use as a source for the record. Its content should be a stringified JSON object.
+ * @param options.stateSource The key in the location state to use as a source for the record
+ * @returns The record to use to override the values in a form
+ */
+export declare const useRecordFromLocation: (props?: UseRecordFromLocationOptions) => Partial<RaRecord<import("@strato-admin/core").Identifier>> | null;
+export type UseRecordFromLocationOptions = {
+    searchSource?: string;
+    stateSource?: string;
+};
+/**
+ * Get the initial record from the location, whether it comes from the location
+ * state or is serialized in the url search part.
+ */
+export declare const getRecordFromLocation: ({ state, search }: RouterLocation, { searchSource, stateSource, }?: {
+    searchSource?: string;
+    stateSource?: string;
+}) => Partial<RaRecord> | null;

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

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState } from 'react';
+import { parse } from 'query-string';
+import isEqual from 'lodash/isEqual.js';
+import { useLocation } from '../routing';
+/**
+ * A hook that returns the record to use to override the values in a form
+ * @param options The hook options
+ * @param options.searchSource The key in the location search to use as a source for the record. Its content should be a stringified JSON object.
+ * @param options.stateSource The key in the location state to use as a source for the record
+ * @returns The record to use to override the values in a form
+ */
+export const useRecordFromLocation = (props = {}) => {
+    const { searchSource, stateSource } = props;
+    const location = useLocation();
+    const [recordFromLocation, setRecordFromLocation] = useState(() => getRecordFromLocation(location, {
+        stateSource,
+        searchSource,
+    }));
+    // To avoid having the form resets when the location changes but the final record is the same
+    // This is needed for forms such as TabbedForm or WizardForm that may change the location for their sections
+    const previousRecordRef = useRef(recordFromLocation);
+    useEffect(() => {
+        const newRecordFromLocation = getRecordFromLocation(location, {
+            stateSource,
+            searchSource,
+        });
+        if (!isEqual(newRecordFromLocation, previousRecordRef.current)) {
+            previousRecordRef.current = newRecordFromLocation;
+            setRecordFromLocation(newRecordFromLocation);
+        }
+    }, [location, stateSource, searchSource]);
+    return recordFromLocation;
+};
+/**
+ * Get the initial record from the location, whether it comes from the location
+ * state or is serialized in the url search part.
+ */
+export const getRecordFromLocation = ({ state, search }, { searchSource = 'source', stateSource = 'record', } = {}) => {
+    if (state && state[stateSource]) {
+        return state[stateSource];
+    }
+    if (search) {
+        try {
+            const searchParams = parse(search);
+            const source = searchParams[searchSource];
+            if (source) {
+                if (Array.isArray(source)) {
+                    console.error(`Failed to parse location ${searchSource} parameter '${search}'. To pre-fill some fields in the Create form, pass a stringified ${searchSource} parameter (e.g. '?${searchSource}={"title":"foo"}')`);
+                    return null;
+                }
+                return JSON.parse(source);
+            }
+        }
+        catch (e) {
+            console.error(`Failed to parse location ${searchSource} parameter '${search}'. To pre-fill some fields in the Create form, pass a stringified ${searchSource} parameter (e.g. '?${searchSource}={"title":"foo"}')`);
+        }
+    }
+    return null;
+};

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

@@ -0,0 +1,43 @@
+import { ReactElement } from 'react';
+import { UseChoicesOptions } from './choices/useChoices';
+export declare const useSuggestions: ({ allowCreate, choices, createText, createValue, createHintValue, limitChoicesToValue, matchSuggestion, optionText, optionValue, selectedItem, suggestionLimit, translateChoice, }: UseSuggestionsOptions) => {
+    getChoiceText: (choice: any) => any;
+    getChoiceValue: (choice: any) => any;
+    getSuggestions: (filter: any) => any[];
+};
+export interface UseSuggestionsOptions extends UseChoicesOptions {
+    allowCreate?: boolean;
+    allowDuplicates?: boolean;
+    choices?: any[];
+    createText?: string;
+    limitChoicesToValue?: boolean;
+    matchSuggestion?: (filter: string, suggestion: any, exact?: boolean) => boolean;
+    suggestionLimit?: number;
+    selectedItem?: any | any[];
+}
+/**
+ * Get the suggestions to display after applying a fuzzy search on the available choices
+ *
+ * @example
+ *
+ * getSuggestions({
+ *   choices: [{ id: 1, name: 'admin' }, { id: 2, name: 'publisher' }],
+ *   optionText: 'name',
+ *   optionValue: 'id',
+ *   getSuggestionText: choice => choice[optionText],
+ * })('pub')
+ *
+ * // Will return [{ id: 2, name: 'publisher' }]
+ * getSuggestions({
+ *   choices: [{ id: 1, name: 'admin' }, { id: 2, name: 'publisher' }],
+ *   optionText: 'name',
+ *   optionValue: 'id',
+ *   getSuggestionText: choice => choice[optionText],
+ * })('pub')
+ *
+ * // Will return [{ id: 2, name: 'publisher' }]
+ */
+export declare const getSuggestionsFactory: ({ allowCreate, choices, createText, createValue, optionText, optionValue, getChoiceText, getChoiceValue, limitChoicesToValue, matchSuggestion, selectedItem, suggestionLimit, }: UseSuggestionsOptions & {
+    getChoiceText: (choice: any) => string | ReactElement;
+    getChoiceValue: (choice: any) => string;
+}) => (filter: any) => any[];

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

@@ -0,0 +1,186 @@
+import { useCallback, isValidElement } from 'react';
+import set from 'lodash/set.js';
+import { useChoices, } from './choices/useChoices';
+import { useTranslate } from '../i18n';
+/*
+ * Returns helper functions for suggestions handling.
+ *
+ * @param allowDuplicates A boolean indicating whether a suggestion can be added several times
+ * @param choices An array of available choices
+ * @param limitChoicesToValue A boolean indicating whether the initial suggestions should be limited to the currently selected one(s)
+ * @param matchSuggestion Optional unless `optionText` is a React element. Function which check whether a choice matches a filter. Must return a boolean.
+ * @param optionText Either a string defining the property to use to get the choice text, a function or a React element
+ * @param optionValue The property to use to get the choice value
+ * @param selectedItem The currently selected item. Maybe an array of selected items
+ * @param suggestionLimit The maximum number of suggestions returned
+ * @param translateChoice A boolean indicating whether to option text should be translated
+ *
+ * @returns An object with helper functions:
+ * - getChoiceText: Returns the choice text or a React element
+ * - getChoiceValue: Returns the choice value
+ * - getSuggestions: A function taking a filter value (string) and returning the matching suggestions
+ */
+export const useSuggestions = ({ allowCreate, choices, createText = "strato.action.create', createValue = '@@create', createHintValue = '@@ra-create-hint', limitChoicesToValue, matchSuggestion, optionText, optionValue, selectedItem, suggestionLimit = 0, translateChoice, }) => {
+    const translate = useTranslate();
+    const { getChoiceText, getChoiceValue } = useChoices({
+        optionText,
+        optionValue,
+        translateChoice,
+        createValue,
+        createHintValue,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const getSuggestions = useCallback(getSuggestionsFactory({
+        allowCreate,
+        choices,
+        createText,
+        createValue,
+        getChoiceText,
+        getChoiceValue,
+        limitChoicesToValue,
+        matchSuggestion,
+        optionText,
+        optionValue,
+        selectedItem,
+        suggestionLimit,
+    }), [
+        allowCreate,
+        choices,
+        createText,
+        createValue,
+        getChoiceText,
+        getChoiceValue,
+        limitChoicesToValue,
+        matchSuggestion,
+        optionText,
+        optionValue,
+        selectedItem,
+        suggestionLimit,
+        translate,
+    ]);
+    return {
+        getChoiceText,
+        getChoiceValue,
+        getSuggestions,
+    };
+};
+const escapeRegExp = value => value ? value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') : ''; // $& means the whole matched string
+/**
+ * Default matcher implementation which check whether the suggestion text matches the filter.
+ */
+const defaultMatchSuggestion = getChoiceText => (filter, suggestion, exact = false) => {
+    const suggestionText = getChoiceText(suggestion);
+    const isReactElement = isValidElement(suggestionText);
+    const regex = escapeRegExp(filter);
+    return isReactElement
+        ? false
+        : suggestionText &&
+            !!suggestionText.match(
+            // We must escape any RegExp reserved characters to avoid errors
+            // For example, the filter might contain * which must be escaped as \*
+            new RegExp(exact ? `^${regex}$` : regex, 'i'));
+};
+/**
+ * Get the suggestions to display after applying a fuzzy search on the available choices
+ *
+ * @example
+ *
+ * getSuggestions({
+ *   choices: [{ id: 1, name: 'admin' }, { id: 2, name: 'publisher' }],
+ *   optionText: 'name',
+ *   optionValue: 'id',
+ *   getSuggestionText: choice => choice[optionText],
+ * })('pub')
+ *
+ * // Will return [{ id: 2, name: 'publisher' }]
+ * getSuggestions({
+ *   choices: [{ id: 1, name: 'admin' }, { id: 2, name: 'publisher' }],
+ *   optionText: 'name',
+ *   optionValue: 'id',
+ *   getSuggestionText: choice => choice[optionText],
+ * })('pub')
+ *
+ * // Will return [{ id: 2, name: 'publisher' }]
+ */
+export const getSuggestionsFactory = ({ allowCreate = false, choices = [], createText = "strato.action.create', createValue = '@@create', optionText = 'name', optionValue = 'id', getChoiceText, getChoiceValue, limitChoicesToValue = false, matchSuggestion = defaultMatchSuggestion(getChoiceText), selectedItem, suggestionLimit = 0, }) => filter => {
+    let suggestions = [];
+    // if an item is selected and matches the filter
+    if (selectedItem &&
+        !Array.isArray(selectedItem) &&
+        matchSuggestion(filter, selectedItem)) {
+        if (limitChoicesToValue) {
+            // display only the selected item
+            suggestions = choices.filter(choice => getChoiceValue(choice) === getChoiceValue(selectedItem));
+        }
+        else {
+            suggestions = [...choices];
+        }
+    }
+    else {
+        suggestions = choices.filter(choice => matchSuggestion(filter, choice) ||
+            (selectedItem != null &&
+                (!Array.isArray(selectedItem)
+                    ? getChoiceValue(choice) ===
+                        getChoiceValue(selectedItem)
+                    : selectedItem.some(selected => getChoiceValue(choice) ===
+                        getChoiceValue(selected)))));
+    }
+    suggestions = limitSuggestions(suggestions, suggestionLimit);
+    const hasExactMatch = suggestions.some(suggestion => matchSuggestion(filter, suggestion, true));
+    if (allowCreate) {
+        const filterIsSelectedItem = 
+        // If the selectedItem is an array (for example AutocompleteArrayInput)
+        // we shouldn't try to match
+        !!selectedItem && !Array.isArray(selectedItem)
+            ? matchSuggestion(filter, selectedItem, true)
+            : false;
+        if (!hasExactMatch && !filterIsSelectedItem) {
+            suggestions.push(getSuggestion({
+                optionText,
+                optionValue,
+                text: createText,
+                value: createValue,
+            }));
+        }
+    }
+    // Only keep unique items. Necessary because we might have fetched
+    // the currently selected choice in addition of the possible choices
+    // that may also contain it
+    const result = suggestions.filter((suggestion, index) => suggestions.indexOf(suggestion) === index);
+    return result;
+};
+/**
+ * @example
+ *
+ * limitSuggestions(
+ *  [{ id: 1, name: 'foo'}, { id: 2, name: 'bar' }],
+ *  1
+ * );
+ *
+ * // Will return [{ id: 1, name: 'foo' }]
+ *
+ * @param suggestions List of suggestions
+ * @param limit
+ */
+const limitSuggestions = (suggestions, limit = 0) => Number.isInteger(limit) && limit > 0
+    ? suggestions.slice(0, limit)
+    : suggestions;
+/**
+ * addSuggestion(
+ *  [{ id: 1, name: 'foo'}, { id: 2, name: 'bar' }],
+ * );
+ *
+ * // Will return [{ id: null, name: '' }, { id: 1, name: 'foo' }, { id: 2, name: 'bar' }]
+ *
+ * @param suggestions List of suggestions
+ * @param options
+ * @param options.optionText
+ */
+const getSuggestion = ({ optionText = 'name', optionValue = 'id', text = '', value = null, }) => {
+    const suggestion = {};
+    set(suggestion, optionValue, value);
+    if (typeof optionText === 'string') {
+        set(suggestion, optionText, text);
+    }
+    return suggestion;
+};

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

@@ -0,0 +1,7 @@
+import { Control } from 'react-hook-form';
+/**
+ * Display a confirmation dialog if the form has unsaved changes.
+ * - If the user confirms, the navigation continues and the changes are lost.
+ * - If the user cancels, the navigation is cancelled and the changes are kept.
+ */
+export declare const useWarnWhenUnsavedChanges: (enable: boolean, formRootPathname?: string, control?: Control) => void;

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

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react';
+import { useFormState } from 'react-hook-form';
+import { useTranslate } from '../i18n';
+import { useBlocker } from '../routing/useBlocker';
+/**
+ * Display a confirmation dialog if the form has unsaved changes.
+ * - If the user confirms, the navigation continues and the changes are lost.
+ * - If the user cancels, the navigation is cancelled and the changes are kept.
+ */
+export const useWarnWhenUnsavedChanges = (enable, formRootPathname, control) => {
+    const translate = useTranslate();
+    const { isSubmitSuccessful, dirtyFields } = useFormState(control ? { control } : undefined);
+    const isDirty = Object.keys(dirtyFields).length > 0;
+    const [shouldNotify, setShouldNotify] = useState(false);
+    const shouldNotBlock = !enable || !isDirty || isSubmitSuccessful;
+    const blocker = useBlocker(({ currentLocation, nextLocation }) => {
+        if (shouldNotBlock)
+            return false;
+        // Also check if the new location is inside the form
+        const initialLocation = formRootPathname || currentLocation.pathname;
+        const newLocationIsInsideCurrentLocation = nextLocation.pathname.startsWith(initialLocation);
+        const newLocationIsShowView = nextLocation.pathname.startsWith(`${initialLocation}/show`);
+        const newLocationIsInsideForm = newLocationIsInsideCurrentLocation && !newLocationIsShowView;
+        if (newLocationIsInsideForm)
+            return false;
+        return true;
+    });
+    useEffect(() => {
+        if (blocker.state === 'blocked') {
+            // Corner case: the blocker might be triggered by a redirect in the onSuccess side effect,
+            // happening during the same tick the form is reset after a successful save.
+            // In that case, the blocker will block but shouldNotBlock will be true one tick after.
+            // If we are in that case, we can proceed immediately.
+            if (shouldNotBlock) {
+                blocker.proceed();
+                return;
+            }
+            setShouldNotify(true);
+        }
+        // This effect should only run when the blocker state changes, not when shouldNotBlock changes.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [blocker.state]);
+    useEffect(() => {
+        if (shouldNotify) {
+            const shouldProceed = window.confirm(translate("strato.message.unsaved_changes'));
+            if (shouldProceed) {
+                blocker.proceed && blocker.proceed();
+            }
+            else {
+                blocker.reset && blocker.reset();
+            }
+        }
+        setShouldNotify(false);
+        // Can't use blocker in the dependency array because it is not stable across rerenders
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shouldNotify, translate]);
+    // This effect handles document navigation, e.g. closing the tab
+    useEffect(() => {
+        const beforeunload = (e) => {
+            // Invoking event.preventDefault() will trigger a warning dialog when the user closes or navigates the tab
+            // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#examples
+            e.preventDefault();
+            // Included for legacy support, e.g. Chrome/Edge < 119
+            e.returnValue = true;
+        };
+        if (shouldNotBlock) {
+            return;
+        }
+        window.addEventListener('beforeunload', beforeunload);
+        return () => {
+            window.removeEventListener('beforeunload', beforeunload);
+        };
+    }, [shouldNotBlock]);
+};

package/dist/ra-core/src/form/validation/ValidationError.d.ts

@@ -0,0 +1,5 @@
+import { ValidationErrorMessage } from './validate';
+export interface ValidationErrorProps {
+    error: ValidationErrorMessage;
+}
+export declare const ValidationError: (props: ValidationErrorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ra-core/src/form/validation/ValidationError.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useTranslate } from '../../i18n';
+const ValidationErrorSpecialFormatPrefix = '@@react-admin@@';
+export const ValidationError = (props) => {
+    const { error } = props;
+    let errorMessage = error;
+    const translate = useTranslate();
+    // 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 useInput hook handle the special formatting
+    if (typeof error === 'string' &&
+        error.startsWith(ValidationErrorSpecialFormatPrefix)) {
+        errorMessage = JSON.parse(error.substring(ValidationErrorSpecialFormatPrefix.length));
+    }
+    if (errorMessage.message) {
+        const { message, args } = errorMessage;
+        return _jsx(_Fragment, { children: translate(message, { _: message, ...args }) });
+    }
+    return _jsx(_Fragment, { children: translate(errorMessage, { _: errorMessage }) });
+};

package/dist/ra-core/src/form/validation/getSimpleValidationResolver.d.ts

@@ -0,0 +1,31 @@
+import { FieldValues } from 'react-hook-form';
+/**
+ * Convert a simple validation function that returns an object matching the form shape with errors
+ * to a validation resolver compatible with react-hook-form.
+ *
+ * @example
+ * const validate = (values: any) => {
+ *     if (values.username == null || values.username.trim() === '') {
+ *         return { username: 'Required' };
+ *     }
+ * }
+ *
+ * const validationResolver = getSimpleValidationResolver(validate);
+ *
+ * const UserForm = () => (
+ *     <Form
+ *         defaultValues={{ username: 'John' }}
+ *         validationResolver={validationResolver}
+ *     >
+ *         <TextField source="username" />
+ *     </Form>
+ * );
+ */
+export declare const getSimpleValidationResolver: (validate: ValidateForm) => (data: FieldValues) => Promise<{
+    values: FieldValues;
+    errors: {};
+} | {
+    values: {};
+    errors: any;
+}>;
+export type ValidateForm = (data: FieldValues) => FieldValues | Promise<FieldValues>;

package/dist/ra-core/src/form/validation/getSimpleValidationResolver.js

@@ -0,0 +1,87 @@
+/**
+ * Convert a simple validation function that returns an object matching the form shape with errors
+ * to a validation resolver compatible with react-hook-form.
+ *
+ * @example
+ * const validate = (values: any) => {
+ *     if (values.username == null || values.username.trim() === '') {
+ *         return { username: 'Required' };
+ *     }
+ * }
+ *
+ * const validationResolver = getSimpleValidationResolver(validate);
+ *
+ * const UserForm = () => (
+ *     <Form
+ *         defaultValues={{ username: 'John' }}
+ *         validationResolver={validationResolver}
+ *     >
+ *         <TextField source="username" />
+ *     </Form>
+ * );
+ */
+export const getSimpleValidationResolver = (validate) => async (data) => {
+    const errors = await validate(data);
+    // If there are no errors, early return the form values
+    if (!errors || isEmptyObject(errors)) {
+        return { values: data, errors: {} };
+    }
+    // Else, we return an error object shaped like errors but having for each leaf
+    // `type: 'manual'` and a `message` prop like react-hook-form expects it
+    const transformedErrors = transformErrorFields(errors);
+    // Sometimes we still need to transform the error object to realize there are actually
+    // no errors in it.
+    //   e.g. with an ArrayInput we can get something like: `{backlinks: [{}, {}]}`
+    // If, after transformation, there are no errors, we return the form values
+    if (!transformedErrors || isEmptyObject(transformedErrors)) {
+        return { values: data, errors: {} };
+    }
+    // Else return the errors and no values
+    return {
+        values: {},
+        errors: transformedErrors,
+    };
+};
+const transformErrorFields = (error) => {
+    return Object.keys(error).reduce((acc, field) => {
+        // Handle arrays
+        if (Array.isArray(error[field])) {
+            let arrayHasErrors = false;
+            const transformedArrayErrors = error[field].map(item => {
+                if (!isEmptyObject(item)) {
+                    arrayHasErrors = true;
+                }
+                return transformErrorFields(item);
+            });
+            if (!arrayHasErrors) {
+                return acc;
+            }
+            return {
+                ...acc,
+                [field]: transformedArrayErrors,
+            };
+        }
+        // Handle objects
+        if (isEmptyObject(error[field])) {
+            return acc;
+        }
+        if (typeof error[field] === 'object' &&
+            !isRaTranslationObj(error[field])) {
+            return {
+                ...acc,
+                [field]: transformErrorFields(error[field]),
+            };
+        }
+        // Handle leaf (either primary type or RaTranslationObj)
+        return {
+            ...acc,
+            [field]: addTypeAndMessage(error[field]),
+        };
+    }, {});
+};
+const addTypeAndMessage = (error) => ({
+    type: 'manual',
+    message: isRaTranslationObj(error) ? error : { message: error },
+});
+const isRaTranslationObj = (obj) => Object.keys(obj).includes('message') && Object.keys(obj).includes('args');
+const isEmptyObject = (obj) => obj == null || Object.getOwnPropertyNames(obj).length === 0;

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

@@ -0,0 +1,7 @@
+export * from './getSimpleValidationResolver';
+export * from './setSubmissionErrors';
+export * from './useGetValidationErrorMessage';
+export * from './useNotifyIsFormInvalid';
+export * from './useUnique';
+export * from './validate';
+export * from './ValidationError';

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

@@ -0,0 +1,7 @@
+export * from './getSimpleValidationResolver';
+export * from './setSubmissionErrors';
+export * from './useGetValidationErrorMessage';
+export * from './useNotifyIsFormInvalid';
+export * from './useUnique';
+export * from './validate';
+export * from './ValidationError';