@strato-admin/core 0.1.0 → 0.3.0

package/dist/ra-core/src/controller/edit/useEditController.js

@@ -0,0 +1,206 @@
+import { useCallback } from 'react';
+import { useAuthenticated, useRequireAccess } from '../../auth';
+import { useRedirect, useParams } from '../../routing';
+import { useNotify } from '../../notification';
+import { useGetOne, useUpdate, } from '../../dataProvider';
+import { useTranslate } from '../../i18n';
+import { useResourceContext, useGetResourceLabel, useGetRecordRepresentation, } from '../../core';
+import { useMutationMiddlewares, } from '../saveContext';
+/**
+ * Prepare data for the Edit view.
+ *
+ * useEditController does a few things:
+ * - it grabs the id from the URL and the resource name from the ResourceContext,
+ * - it fetches the record via useGetOne,
+ * - it prepares the page title.
+ *
+ * @param {Object} props The props passed to the Edit component.
+ *
+ * @return {Object} controllerProps Fetched data and callbacks for the Edit view
+ *
+ * @example
+ *
+ * import { useEditController } from 'react-admin';
+ * import EditView from './EditView';
+ *
+ * const MyEdit = () => {
+ *     const controllerProps = useEditController({ resource: 'posts', id: 123 });
+ *     return <EditView {...controllerProps} {...props} />;
+ * }
+ */
+export const useEditController = (props = {}) => {
+    const { disableAuthentication = false, id: propsId, mutationMode = 'undoable', mutationOptions = {}, queryOptions = {}, redirect: redirectTo = DefaultRedirect, redirectOnError = DefaultRedirectOnError, transform, } = props;
+    const resource = useResourceContext(props);
+    if (!resource) {
+        throw new Error('useEditController requires a non-empty resource prop or context');
+    }
+    const { isPending: isPendingAuthenticated } = useAuthenticated({
+        enabled: !disableAuthentication,
+    });
+    const { isPending: isPendingCanAccess } = useRequireAccess({
+        action: 'edit',
+        resource,
+        enabled: !disableAuthentication && !isPendingAuthenticated,
+    });
+    const getRecordRepresentation = useGetRecordRepresentation(resource);
+    const translate = useTranslate();
+    const notify = useNotify();
+    const redirect = useRedirect();
+    const { id: routeId } = useParams();
+    if (!routeId && !propsId) {
+        throw new Error('useEditController requires an id prop or a route with an /:id? parameter.');
+    }
+    const id = propsId ?? routeId;
+    const { meta: queryMeta, ...otherQueryOptions } = queryOptions;
+    const { meta: mutationMeta, onSuccess, onError, ...otherMutationOptions } = mutationOptions;
+    if ((queryMeta || mutationMeta) &&
+        JSON.stringify(queryMeta) !== JSON.stringify(mutationMeta) &&
+        redirectTo === false) {
+        console.warn('When not redirecting after editing, query meta and mutation meta should be the same, or you will have data update issues.');
+    }
+    const { registerMutationMiddleware, getMutateWithMiddlewares, unregisterMutationMiddleware, } = useMutationMiddlewares();
+    const { data: record, error, isLoading, isFetching, isPaused, isPending, isPlaceholderData, refetch, } = useGetOne(resource, { id, meta: queryMeta }, {
+        enabled: (!isPendingAuthenticated && !isPendingCanAccess) ||
+            disableAuthentication,
+        onError: () => {
+            notify("strato.notification.item_doesnt_exist', {
+                type: 'error',
+            });
+            redirect(redirectOnError, resource, id);
+        },
+        refetchOnReconnect: false,
+        refetchOnWindowFocus: false,
+        retry: false,
+        ...otherQueryOptions,
+    });
+    // eslint-disable-next-line eqeqeq
+    if (record && record.id && record.id != id) {
+        throw new Error(`useEditController: Fetched record's id attribute (${record.id}) must match the requested 'id' (${id})`);
+    }
+    const getResourceLabel = useGetResourceLabel();
+    const recordRepresentation = getRecordRepresentation(record);
+    const defaultTitle = translate(`resources.${resource}.page.edit`, {
+        id,
+        record,
+        recordRepresentation: typeof recordRepresentation === 'string'
+            ? recordRepresentation
+            : '',
+        _: translate("strato.page.edit', {
+            name: getResourceLabel(resource, 1),
+            id,
+            record,
+            recordRepresentation: typeof recordRepresentation === 'string'
+                ? recordRepresentation
+                : '',
+        }),
+    });
+    const recordCached = { id, previousData: record };
+    const [update, { isPending: saving }] = useUpdate(resource, recordCached, {
+        onSuccess: async (...args) => {
+            if (onSuccess) {
+                return onSuccess(...args);
+            }
+            const [data] = args;
+            notify(`resources.${resource}.notifications.updated`, {
+                type: 'info',
+                messageArgs: {
+                    smart_count: 1,
+                    _: translate("strato.notification.updated', {
+                        smart_count: 1,
+                    }),
+                },
+                undoable: mutationMode === 'undoable',
+            });
+            redirect(redirectTo, resource, data.id, data);
+        },
+        onError: (...args) => {
+            if (onError) {
+                return onError(...args);
+            }
+            const [error] = args;
+            // Don't trigger a notification if this is a validation error
+            // (notification will be handled by the useNotifyIsFormInvalid hook)
+            const validationErrors = error?.body?.errors;
+            const hasValidationErrors = !!validationErrors &&
+                Object.keys(validationErrors).length > 0;
+            if (!hasValidationErrors || mutationMode !== 'pessimistic') {
+                notify(typeof error === 'string'
+                    ? error
+                    : error.message ||
+                        "strato.notification.http_error', {
+                    type: 'error',
+                    messageArgs: {
+                        _: typeof error === 'string'
+                            ? error
+                            : error instanceof Error ||
+                                (typeof error === 'object' &&
+                                    error !== null &&
+                                    error.hasOwnProperty('message'))
+                                ? // @ts-ignore
+                                    error.message
+                                : undefined,
+                    },
+                });
+            }
+        },
+        ...otherMutationOptions,
+        mutationMode,
+        returnPromise: mutationMode === 'pessimistic',
+        getMutateWithMiddlewares,
+    });
+    const save = useCallback((data, { onSuccess: onSuccessFromSave, onError: onErrorFromSave, transform: transformFromSave, meta: metaFromSave, } = {}) => Promise.resolve(transformFromSave
+        ? transformFromSave(data, {
+            previousData: recordCached.previousData,
+        })
+        : transform
+            ? transform(data, {
+                previousData: recordCached.previousData,
+            })
+            : data).then(async (data) => {
+        try {
+            await update(resource, {
+                id,
+                data,
+                meta: metaFromSave ?? mutationMeta,
+                previousData: record,
+            }, {
+                onError: onErrorFromSave,
+                onSuccess: onSuccessFromSave,
+            });
+        }
+        catch (error) {
+            if (error.body?.errors != null) {
+                return error.body.errors;
+            }
+        }
+    }), [
+        id,
+        mutationMeta,
+        record,
+        resource,
+        transform,
+        update,
+        recordCached.previousData,
+    ]);
+    return {
+        defaultTitle,
+        error,
+        isFetching,
+        isLoading,
+        isPaused,
+        isPending,
+        isPlaceholderData,
+        mutationMode,
+        record,
+        redirect: redirectTo,
+        redirectOnError,
+        refetch,
+        registerMutationMiddleware,
+        resource,
+        save,
+        saving,
+        unregisterMutationMiddleware,
+    };
+};
+const DefaultRedirect = 'list';
+const DefaultRedirectOnError = 'list';

package/dist/ra-core/src/controller/field/ReferenceArrayFieldBase.d.ts

@@ -0,0 +1,77 @@
+import { type ReactNode } from 'react';
+import type { UseQueryOptions } from '@tanstack/react-query';
+import { Exporter, FilterPayload, RaRecord, SortPayload } from '../../types';
+import { ListControllerResult } from '../list';
+import { BaseFieldProps } from './types';
+/**
+ * A container component that fetches records from another resource specified
+ * by an array of *ids* in current record.
+ *
+ * You must define the fields to be passed to the iterator component as children.
+ *
+ * @example Display all the products of the current order as datagrid
+ * // order = {
+ * //   id: 123,
+ * //   product_ids: [456, 457, 458],
+ * // }
+ * <ReferenceArrayFieldBase label="Products" reference="products" source="product_ids">
+ *     <Datagrid>
+ *         <TextField source="id" />
+ *         <TextField source="description" />
+ *         <NumberField source="price" options={{ style: 'currency', currency: 'USD' }} />
+ *         <EditButton />
+ *     </Datagrid>
+ * </ReferenceArrayFieldBase>
+ *
+ * @example Display all the categories of the current product as a list of chips
+ * // product = {
+ * //   id: 456,
+ * //   category_ids: [11, 22, 33],
+ * // }
+ * <ReferenceArrayFieldBase label="Categories" reference="categories" source="category_ids">
+ *     <SingleFieldList>
+ *         <ChipField source="name" />
+ *     </SingleFieldList>
+ * </ReferenceArrayFieldBase>
+ *
+ * By default, restricts the displayed values to 1000. You can extend this limit
+ * by setting the `perPage` prop.
+ *
+ * @example
+ * <ReferenceArrayFieldBase perPage={10} reference="categories" source="category_ids">
+ *    ...
+ * </ReferenceArrayFieldBase>
+ *
+ * By default, the field displays the results in the order in which they are referenced
+ * (i.e. in the order of the list of ids). You can change this order
+ * by setting the `sort` prop (an object with `field` and `order` properties).
+ *
+ * @example
+ * <ReferenceArrayFieldBase sort={{ field: 'name', order: 'ASC' }} reference="categories" source="category_ids">
+ *    ...
+ * </ReferenceArrayFieldBase>
+ *
+ * Also, you can filter the results to display only a subset of values. Use the
+ * `filter` prop for that.
+ *
+ * @example
+ * <ReferenceArrayFieldBase filter={{ is_published: true }} reference="categories" source="category_ids">
+ *    ...
+ * </ReferenceArrayFieldBase>
+ */
+export declare const ReferenceArrayFieldBase: <RecordType extends RaRecord = RaRecord, ReferenceRecordType extends RaRecord = RaRecord>(props: ReferenceArrayFieldBaseProps<RecordType, ReferenceRecordType>) => import("react/jsx-runtime").JSX.Element;
+export interface ReferenceArrayFieldBaseProps<RecordType extends RaRecord = RaRecord, ReferenceRecordType extends RaRecord = RaRecord> extends BaseFieldProps<RecordType> {
+    children?: ReactNode;
+    render?: (props: ListControllerResult<ReferenceRecordType>) => ReactNode;
+    error?: ReactNode;
+    loading?: ReactNode;
+    empty?: ReactNode;
+    filter?: FilterPayload;
+    exporter?: Exporter<ReferenceRecordType> | false;
+    offline?: ReactNode;
+    page?: number;
+    perPage?: number;
+    reference: string;
+    sort?: SortPayload;
+    queryOptions?: Omit<UseQueryOptions<ReferenceRecordType[], Error>, 'queryFn' | 'queryKey'>;
+}

package/dist/ra-core/src/controller/field/ReferenceArrayFieldBase.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRecordContext } from '../record';
+import { useReferenceArrayFieldController } from './useReferenceArrayFieldController';
+import { ResourceContextProvider } from '../../core';
+import { ListContextProvider } from '../list';
+/**
+ * A container component that fetches records from another resource specified
+ * by an array of *ids* in current record.
+ *
+ * You must define the fields to be passed to the iterator component as children.
+ *
+ * @example Display all the products of the current order as datagrid
+ * // order = {
+ * //   id: 123,
+ * //   product_ids: [456, 457, 458],
+ * // }
+ * <ReferenceArrayFieldBase label="Products" reference="products" source="product_ids">
+ *     <Datagrid>
+ *         <TextField source="id" />
+ *         <TextField source="description" />
+ *         <NumberField source="price" options={{ style: 'currency', currency: 'USD' }} />
+ *         <EditButton />
+ *     </Datagrid>
+ * </ReferenceArrayFieldBase>
+ *
+ * @example Display all the categories of the current product as a list of chips
+ * // product = {
+ * //   id: 456,
+ * //   category_ids: [11, 22, 33],
+ * // }
+ * <ReferenceArrayFieldBase label="Categories" reference="categories" source="category_ids">
+ *     <SingleFieldList>
+ *         <ChipField source="name" />
+ *     </SingleFieldList>
+ * </ReferenceArrayFieldBase>
+ *
+ * By default, restricts the displayed values to 1000. You can extend this limit
+ * by setting the `perPage` prop.
+ *
+ * @example
+ * <ReferenceArrayFieldBase perPage={10} reference="categories" source="category_ids">
+ *    ...
+ * </ReferenceArrayFieldBase>
+ *
+ * By default, the field displays the results in the order in which they are referenced
+ * (i.e. in the order of the list of ids). You can change this order
+ * by setting the `sort` prop (an object with `field` and `order` properties).
+ *
+ * @example
+ * <ReferenceArrayFieldBase sort={{ field: 'name', order: 'ASC' }} reference="categories" source="category_ids">
+ *    ...
+ * </ReferenceArrayFieldBase>
+ *
+ * Also, you can filter the results to display only a subset of values. Use the
+ * `filter` prop for that.
+ *
+ * @example
+ * <ReferenceArrayFieldBase filter={{ is_published: true }} reference="categories" source="category_ids">
+ *    ...
+ * </ReferenceArrayFieldBase>
+ */
+export const ReferenceArrayFieldBase = (props) => {
+    const { children, render, error, loading, empty, filter, exporter, offline, page = 1, perPage, reference, resource, sort, source, queryOptions, } = props;
+    const record = useRecordContext(props);
+    const controllerProps = useReferenceArrayFieldController({
+        filter,
+        exporter,
+        page,
+        perPage,
+        record,
+        reference,
+        resource,
+        sort,
+        source,
+        queryOptions,
+    });
+    if (!render && !children) {
+        throw new Error("<ReferenceArrayFieldBase> requires either a 'render' prop or 'children' prop");
+    }
+    const { error: controllerError, isPending, isPaused, isPlaceholderData, } = controllerProps;
+    const shouldRenderLoading = isPending && !isPaused && loading !== undefined && loading !== false;
+    const shouldRenderOffline = isPaused &&
+        (isPending || isPlaceholderData) &&
+        offline !== undefined &&
+        offline !== false;
+    const shouldRenderError = !isPending &&
+        !isPaused &&
+        controllerError &&
+        error !== undefined &&
+        error !== false;
+    const shouldRenderEmpty = // there is an empty page component
+     empty &&
+        // there is no error
+        !controllerProps.error &&
+        // the list is not loading data for the first time
+        !controllerProps.isPending &&
+        // the API returned no data (using either normal or partial pagination)
+        (controllerProps.total === 0 ||
+            (controllerProps.total == null &&
+                // @ts-ignore FIXME total may be undefined when using partial pagination but the ListControllerResult type is wrong about it
+                controllerProps.hasPreviousPage === false &&
+                // @ts-ignore FIXME total may be undefined when using partial pagination but the ListControllerResult type is wrong about it
+                controllerProps.hasNextPage === false &&
+                // @ts-ignore FIXME total may be undefined when using partial pagination but the ListControllerResult type is wrong about it
+                controllerProps.data.length === 0)) &&
+        // the user didn't set any filters
+        !Object.keys(controllerProps.filterValues).length;
+    return (_jsx(ResourceContextProvider, { value: reference, children: _jsx(ListContextProvider, { value: controllerProps, children: shouldRenderLoading
+                ? loading
+                : shouldRenderOffline
+                    ? offline
+                    : shouldRenderError
+                        ? error
+                        : shouldRenderEmpty
+                            ? empty
+                            : render
+                                ? render(controllerProps)
+                                : children }) }));
+};

package/dist/ra-core/src/controller/field/ReferenceFieldBase.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import { UseQueryOptions } from '@tanstack/react-query';
+import { RaRecord } from '../../types';
+import { UseReferenceFieldControllerResult } from './useReferenceFieldController';
+/**
+ * Fetch reference record, and render its representation, or delegate rendering to child component.
+ *
+ * The reference prop should be the name of one of the <Resource> components
+ * added as <Admin> child.
+ *
+ * @example // using recordRepresentation
+ * <ReferenceFieldBase source="userId" reference="users" />
+ *
+ * @example // using a Field component to represent the record
+ * <ReferenceFieldBase source="userId" reference="users">
+ *     <TextField source="name" />
+ * </ReferenceFieldBase>
+ *
+ * @example // By default, includes a link to the <Edit> page of the related record
+ * // (`/users/:userId` in the previous example).
+ * // Set the `link` prop to "show" to link to the <Show> page instead.
+ * <ReferenceFieldBase source="userId" reference="users" link="show" />
+ *
+ * @example // You can also prevent `<ReferenceFieldBase>` from adding link to children
+ * // by setting `link` to false.
+ * <ReferenceFieldBase source="userId" reference="users" link={false} />
+ *
+ * @example // Alternatively, you can also pass a custom function to `link`.
+ * // It must take reference and record as arguments and return a string
+ * <ReferenceFieldBase source="userId" reference="users" link={(record, reference) => "/path/to/${reference}/${record}"} />
+ *
+ * @default
+ * In previous versions of React-Admin, the prop `linkType` was used. It is now deprecated and replaced with `link`. However
+ * backward-compatibility is still kept
+ */
+export declare const ReferenceFieldBase: <ReferenceRecordType extends RaRecord = RaRecord>(props: ReferenceFieldBaseProps<ReferenceRecordType>) => import("react/jsx-runtime").JSX.Element;
+export interface ReferenceFieldBaseProps<ReferenceRecordType extends RaRecord = RaRecord, RecordType extends Record<string, any> = Record<string, any>> {
+    children?: ReactNode;
+    render?: (props: UseReferenceFieldControllerResult<ReferenceRecordType>) => ReactNode;
+    className?: string;
+    empty?: ReactNode;
+    error?: ReactNode;
+    loading?: ReactNode;
+    offline?: ReactNode;
+    queryOptions?: Partial<UseQueryOptions<ReferenceRecordType[], Error> & {
+        meta?: any;
+    }>;
+    reference: string;
+    record?: RecordType;
+    source: string;
+}

package/dist/ra-core/src/controller/field/ReferenceFieldBase.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReferenceFieldContextProvider } from './ReferenceFieldContext';
+import { useReferenceFieldController, } from './useReferenceFieldController';
+import { ResourceContextProvider } from '../../core';
+import { RecordContextProvider } from '../record';
+import { useFieldValue } from '../../util';
+/**
+ * Fetch reference record, and render its representation, or delegate rendering to child component.
+ *
+ * The reference prop should be the name of one of the <Resource> components
+ * added as <Admin> child.
+ *
+ * @example // using recordRepresentation
+ * <ReferenceFieldBase source="userId" reference="users" />
+ *
+ * @example // using a Field component to represent the record
+ * <ReferenceFieldBase source="userId" reference="users">
+ *     <TextField source="name" />
+ * </ReferenceFieldBase>
+ *
+ * @example // By default, includes a link to the <Edit> page of the related record
+ * // (`/users/:userId` in the previous example).
+ * // Set the `link` prop to "show" to link to the <Show> page instead.
+ * <ReferenceFieldBase source="userId" reference="users" link="show" />
+ *
+ * @example // You can also prevent `<ReferenceFieldBase>` from adding link to children
+ * // by setting `link` to false.
+ * <ReferenceFieldBase source="userId" reference="users" link={false} />
+ *
+ * @example // Alternatively, you can also pass a custom function to `link`.
+ * // It must take reference and record as arguments and return a string
+ * <ReferenceFieldBase source="userId" reference="users" link={(record, reference) => "/path/to/${reference}/${record}"} />
+ *
+ * @default
+ * In previous versions of React-Admin, the prop `linkType` was used. It is now deprecated and replaced with `link`. However
+ * backward-compatibility is still kept
+ */
+export const ReferenceFieldBase = (props) => {
+    const { children, render, loading, error, empty, offline } = props;
+    const id = useFieldValue(props);
+    const controllerProps = useReferenceFieldController(props);
+    if (!render && !children) {
+        throw new Error("<ReferenceFieldBase> requires either a 'render' prop or 'children' prop");
+    }
+    const { error: controllerError, isPending, isPaused, referenceRecord, } = controllerProps;
+    const shouldRenderLoading = id != null &&
+        !isPaused &&
+        isPending &&
+        loading !== false &&
+        loading !== undefined;
+    const shouldRenderOffline = isPaused && isPending && offline !== false && offline !== undefined;
+    const shouldRenderError = !!controllerError && error !== false && error !== undefined;
+    const shouldRenderEmpty = !isPaused &&
+        (id == null ||
+            (!referenceRecord &&
+                !controllerError &&
+                !isPending &&
+                empty !== false &&
+                empty !== undefined));
+    return (_jsx(ResourceContextProvider, { value: props.reference, children: _jsx(ReferenceFieldContextProvider, { value: controllerProps, children: _jsx(RecordContextProvider, { value: referenceRecord, children: shouldRenderLoading
+                    ? loading
+                    : shouldRenderOffline
+                        ? offline
+                        : shouldRenderError
+                            ? error
+                            : shouldRenderEmpty
+                                ? empty
+                                : render
+                                    ? render(controllerProps)
+                                    : children }) }) }));
+};

package/dist/ra-core/src/controller/field/ReferenceFieldContext.d.ts

@@ -0,0 +1,4 @@
+import type { UseReferenceFieldControllerResult } from './useReferenceFieldController';
+export declare const ReferenceFieldContext: import("react").Context<UseReferenceFieldControllerResult<import("@strato-admin/core").RaRecord<import("@strato-admin/core").Identifier>, Error> | null>;
+export declare const ReferenceFieldContextProvider: import("react").Provider<UseReferenceFieldControllerResult<import("@strato-admin/core").RaRecord<import("@strato-admin/core").Identifier>, Error> | null>;
+export declare const useReferenceFieldContext: () => UseReferenceFieldControllerResult<import("@strato-admin/core").RaRecord<import("@strato-admin/core").Identifier>, Error>;

package/dist/ra-core/src/controller/field/ReferenceFieldContext.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+export const ReferenceFieldContext = createContext(null);
+export const ReferenceFieldContextProvider = ReferenceFieldContext.Provider;
+export const useReferenceFieldContext = () => {
+    const context = useContext(ReferenceFieldContext);
+    if (!context) {
+        throw new Error('useReferenceFieldContext must be used inside a ReferenceFieldContextProvider');
+    }
+    return context;
+};

package/dist/ra-core/src/controller/field/ReferenceManyCountBase.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { type UseReferenceManyFieldControllerParams } from './useReferenceManyFieldController';
+/**
+ * Fetch and render the number of records related to the current one
+ *
+ * Relies on dataProvider.getManyReference() returning a total property
+ *
+ * @example // Display the number of comments for the current post
+ * <ReferenceManyCountBase reference="comments" target="post_id" />
+ *
+ * @example // Display the number of published comments for the current post
+ * <ReferenceManyCountBase reference="comments" target="post_id" filter={{ is_published: true }} />
+ */
+export declare const ReferenceManyCountBase: (props: ReferenceManyCountBaseProps) => import("react/jsx-runtime").JSX.Element;
+export interface ReferenceManyCountBaseProps extends UseReferenceManyFieldControllerParams {
+    timeout?: number;
+    loading?: React.ReactNode;
+    error?: React.ReactNode;
+    offline?: React.ReactNode;
+}

package/dist/ra-core/src/controller/field/ReferenceManyCountBase.js

@@ -0,0 +1,35 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useReferenceManyFieldController, } from './useReferenceManyFieldController';
+import { useTimeout } from '../../util/hooks';
+/**
+ * Fetch and render the number of records related to the current one
+ *
+ * Relies on dataProvider.getManyReference() returning a total property
+ *
+ * @example // Display the number of comments for the current post
+ * <ReferenceManyCountBase reference="comments" target="post_id" />
+ *
+ * @example // Display the number of published comments for the current post
+ * <ReferenceManyCountBase reference="comments" target="post_id" filter={{ is_published: true }} />
+ */
+export const ReferenceManyCountBase = (props) => {
+    const { loading, error, offline, timeout = 1000, ...rest } = props;
+    const oneSecondHasPassed = useTimeout(timeout);
+    const { isPaused, isPending, error: fetchError, total, } = useReferenceManyFieldController({
+        ...rest,
+        page: 1,
+        perPage: 1,
+    });
+    const shouldRenderLoading = isPending && !isPaused && loading !== undefined && loading !== false;
+    const shouldRenderOffline = isPending && isPaused && offline !== undefined && offline !== false;
+    const shouldRenderError = !isPending && fetchError && error !== undefined && error !== false;
+    return (_jsx(_Fragment, { children: shouldRenderLoading
+            ? oneSecondHasPassed
+                ? loading
+                : null
+            : shouldRenderOffline
+                ? offline
+                : shouldRenderError
+                    ? error
+                    : total }));
+};

package/dist/ra-core/src/controller/field/ReferenceManyFieldBase.d.ts

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import { type UseReferenceManyFieldControllerParams } from './useReferenceManyFieldController';
+import type { RaRecord } from '../../types';
+import { ListControllerResult } from '../list';
+/**
+ * Render related records to the current one.
+ *
+ * You must define the fields to be passed to the iterator component as children.
+ *
+ * @example Display all the comments of the current post as a datagrid
+ * <ReferenceManyFieldBase reference="comments" target="post_id">
+ *     <Datagrid>
+ *         <TextField source="id" />
+ *         <TextField source="body" />
+ *         <DateField source="created_at" />
+ *         <EditButton />
+ *     </Datagrid>
+ * </ReferenceManyFieldBase>
+ *
+ * @example Display all the books by the current author, only the title
+ * <ReferenceManyFieldBase reference="books" target="author_id">
+ *     <SingleFieldList>
+ *         <ChipField source="title" />
+ *     </SingleFieldList>
+ * </ReferenceManyFieldBase>
+ *
+ * By default, restricts the displayed values to 25. You can extend this limit
+ * by setting the `perPage` prop.
+ *
+ * @example
+ * <ReferenceManyFieldBase perPage={10} reference="comments" target="post_id">
+ *    ...
+ * </ReferenceManyFieldBase>
+ *
+ * By default, orders the possible values by id desc. You can change this order
+ * by setting the `sort` prop (an object with `field` and `order` properties).
+ *
+ * @example
+ * <ReferenceManyFieldBase sort={{ field: 'created_at', order: 'DESC' }} reference="comments" target="post_id">
+ *    ...
+ * </ReferenceManyFieldBase>
+ *
+ * Also, you can filter the query used to populate the possible values. Use the
+ * `filter` prop for that.
+ *
+ * @example
+ * <ReferenceManyFieldBase filter={{ is_published: true }} reference="comments" target="post_id">
+ *    ...
+ * </ReferenceManyFieldBase>
+ */
+export declare const ReferenceManyFieldBase: <RecordType extends RaRecord = RaRecord, ReferenceRecordType extends RaRecord = RaRecord>(props: ReferenceManyFieldBaseProps<RecordType, ReferenceRecordType>) => import("react/jsx-runtime").JSX.Element;
+export interface ReferenceManyFieldBaseProps<RecordType extends Record<string, any> = Record<string, any>, ReferenceRecordType extends RaRecord = RaRecord> extends UseReferenceManyFieldControllerParams<RecordType, ReferenceRecordType> {
+    children?: ReactNode;
+    render?: (props: ListControllerResult<ReferenceRecordType>) => ReactNode;
+    empty?: ReactNode;
+    error?: ReactNode;
+    loading?: ReactNode;
+    offline?: ReactNode;
+}