[BC Break] Add ReferenceOneField

UPGRADE.md

@@ -993,6 +993,29 @@ export const PostList = () => (
 );
 ```
 
+## No More Props Injection In `<ReferenceField>`
+
+`<ReferenceField>` creates a `RecordContext` for the reference record, and this allows using any of react-admin's Field components. It also used to pass many props to the underlying component (including the current `record`), but this is no longer the case. If you need to access the `record` in a child of `<ReferenceField>`, you need to use the `useRecordContext` hook instead.
+
+```diff
+const PostShow = () => (
+    <Show>
+        <SimpleShowLayout>
+            <TextField source="title" />
+            <ReferenceField source="author_id" reference="users">
+                <NameField />
+            </ReferenceField>
+        </SimpleShowLayout>
+    </Show>
+);
+
+-const NameField = ({ record }) => {
++const NameField = () => {
++   const { record } = useRecordContext();
+    return <span>{record?.name}</span>;
+};
+```
+
 ## `useListContext` No Longer Returns An `ids` Prop
 
 The `ListContext` used to return two props for the list data: `data` and `ids`. To render the list data, you had to iterate over the `ids`. 

docs/navigation.html

@@ -73,8 +73,12 @@
   <li {% if page.path contains 'CreateEdit.md' %} class="active" {% endif %}><a class="nav-link" href="./CreateEdit.html"><code>&lt;Create&gt;</code> and <code>&lt;Edit&gt;</code> Views</a></li>
 </ul>
 
-<ul><div>Fields and Inputs</div>
+<ul><div>Fields</div>
+  <li {% if page.path contains 'FieldsForRelationships.md' %} class="active" {% endif %}><a class="nav-link" href="./FieldsForRelationships.html">Fields for Relationships</a></li>
   <li {% if page.path contains 'Fields.md' %} class="active" {% endif %}><a class="nav-link" href="./Fields.html"><code>&lt;Field&gt;</code> Components</a></li>
+</ul>
+
+<ul><div>Inputs</div>
   <li {% if page.path contains 'Inputs.md' %} class="active" {% endif %}><a class="nav-link" href="./Inputs.html"><code>&lt;Input&gt;</code> Components</a></li>
 </ul>
 

examples/crm/src/companies/CompanyAvatar.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar } from '@mui/material';
 import clsx from 'clsx';
+import { useRecordContext } from 'react-admin';
 
 import { Company } from '../types';
 
@@ -34,12 +35,11 @@ const StyledAvatar = styled(Avatar)({
 });
 
 export const CompanyAvatar = ({
-    record,
     size = 'large',
 }: {
-    record?: Company;
     size?: 'small' | 'large';
 }) => {
+    const record = useRecordContext<Company>();
     if (!record) return null;
     return (
         <StyledAvatar

examples/crm/src/companies/CompanyCard.tsx

@@ -72,7 +72,7 @@ export const CompanyCard = ({ record }: { record: Company }) => {
         >
             <Paper className={classes.paper} elevation={elevation}>
                 <div className={classes.identity}>
-                    <CompanyAvatar record={record} />
+                    <CompanyAvatar />
                     <div className={classes.name}>
                         <Typography variant="subtitle2">
                             {record.name}

examples/crm/src/companies/CompanyEdit.tsx

@@ -6,7 +6,6 @@ import {
     SimpleForm,
     TextInput,
     SelectInput,
-    useRecordContext,
     required,
 } from 'react-admin';
 import { Box, CardContent, Divider } from '@mui/material';
@@ -84,19 +83,16 @@ export const CompanyEdit = () => {
     );
 };
 
-const CustomLayout = (props: any) => {
-    const record = useRecordContext(props);
-    return (
-        <CardContent>
-            <Box display="flex">
-                <LogoField record={record as any} />
-                <Box ml={2} flex="1" maxWidth={796}>
-                    {props.children}
-                </Box>
+const CustomLayout = (props: any) => (
+    <CardContent>
+        <Box display="flex">
+            <LogoField />
+            <Box ml={2} flex="1" maxWidth={796}>
+                {props.children}
             </Box>
-        </CardContent>
-    );
-};
+        </Box>
+    </CardContent>
+);
 
 const CustomDivider = () => (
     <Box mb={2}>

examples/crm/src/companies/CompanyShow.tsx

@@ -56,7 +56,7 @@ const CompanyShowContent = () => {
                 <Card>
                     <CardContent>
                         <Box display="flex" mb={1}>
-                            <LogoField record={record as any} />
+                            <LogoField />
                             <Box ml={2} flex="1">
                                 <Typography variant="h5">
                                     {record.name}

examples/crm/src/companies/LogoField.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
+import { useRecordContext } from 'react-admin';
 
 const PREFIX = 'LogoField';
 
@@ -19,14 +20,13 @@ const sizeInPixel = {
 };
 
 export const LogoField = ({
-    record,
     source,
     size = 'medium',
 }: {
-    record?: { logo: string; name: string };
     source?: string;
     size?: 'small' | 'medium';
 }) => {
+    const record = useRecordContext<{ logo: string; name: string }>();
     if (!record) return null;
     return (
         <StyledImage

examples/crm/src/contacts/ContactAside.tsx

@@ -103,7 +103,7 @@ export const ContactAside = ({ record, link = 'edit' }: any) => (
         <Box mb={3}>
             <Typography variant="subtitle2">Tags</Typography>
             <Divider />
-            <TagsListEdit record={record} />
+            <TagsListEdit />
         </Box>
 
         <ReferenceManyField

examples/crm/src/contacts/TagsList.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { ReferenceArrayField, SingleFieldList, ChipField } from 'react-admin';
+import {
+    ReferenceArrayField,
+    SingleFieldList,
+    ChipField,
+    useRecordContext,
+} from 'react-admin';
 
 import { Contact } from '../types';
 
@@ -16,15 +21,20 @@ const StyledReferenceArrayField = styled(ReferenceArrayField)({
     },
 });
 
-const ColoredChipField = ({ record, ...props }: any) =>
-    record ? (
+const ColoredChipField = (props: any) => {
+    const record = useRecordContext();
+    if (!record) {
+        return null;
+    }
+    return (
         <ChipField
             record={record}
             {...props}
             style={{ backgroundColor: record.color, border: 0 }}
             component="span"
         />
-    ) : null;
+    );
+};
 
 export const TagsList = ({ record }: { record: Contact }) => {
     if (!record) return null;

examples/crm/src/contacts/TagsListEdit.tsx

@@ -7,6 +7,7 @@ import {
     useUpdate,
     useGetList,
     Identifier,
+    useRecordContext,
 } from 'react-admin';
 import {
     Chip,
@@ -26,7 +27,8 @@ import EditIcon from '@mui/icons-material/Edit';
 import { colors } from '../tags/colors';
 import { Contact, Tag } from '../types';
 
-export const TagsListEdit = ({ record }: { record: Contact }) => {
+export const TagsListEdit = () => {
+    const record = useRecordContext<Contact>();
     const [open, setOpen] = useState(false);
     const [newTagName, setNewTagName] = useState('');
     const [newTagColor, setNewTagColor] = useState(colors[0]);
@@ -42,9 +44,7 @@ export const TagsListEdit = ({ record }: { record: Contact }) => {
     const { data: tags, isLoading: isLoadingRecordTags } = useGetMany<Tag>(
         'tags',
         { ids: record.tags },
-        {
-            enabled: record.tags && record.tags.length > 0,
-        }
+        { enabled: record && record.tags && record.tags.length > 0 }
     );
     const [update] = useUpdate<Contact>();
     const [create] = useCreate<Tag>();
@@ -123,7 +123,7 @@ export const TagsListEdit = ({ record }: { record: Contact }) => {
         );
     };
 
-    if (!isLoadingRecordTags || isLoadingAllTags) return null;
+    if (isLoadingRecordTags || isLoadingAllTags) return null;
     return (
         <>
             {tags?.map(tag => (

examples/demo/src/visitors/ColoredNumberField.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react';
-import { NumberField, NumberFieldProps } from 'react-admin';
+import { useRecordContext, NumberField, NumberFieldProps } from 'react-admin';
 
-const ColoredNumberField = (props: NumberFieldProps) =>
-    props.record && props.source ? (
-        props.record[props.source] > 500 ? (
-            <span style={{ color: 'red' }}>
-                <NumberField {...props} />
-            </span>
-        ) : (
-            <NumberField {...props} />
-        )
-    ) : null;
+const ColoredNumberField = (props: NumberFieldProps) => {
+    const record = useRecordContext(props);
+    if (!record || !props.source) {
+        return null;
+    }
+    return record[props.source] > 500 ? (
+        <NumberField {...props} sx={{ color: 'red' }} />
+    ) : (
+        <NumberField {...props} />
+    );
+};
 
 ColoredNumberField.defaultProps = NumberField.defaultProps;
 

examples/demo/src/visitors/CustomerLinkField.tsx

@@ -1,15 +1,20 @@
 import * as React from 'react';
-import { Link, FieldProps } from 'react-admin';
+import { Link, FieldProps, useRecordContext } from 'react-admin';
 
 import FullNameField from './FullNameField';
 import { Customer } from '../types';
 
-const CustomerLinkField = (props: FieldProps<Customer>) =>
-    props.record ? (
-        <Link to={`/customers/${props.record.id}`}>
-            <FullNameField {...props} />
+const CustomerLinkField = (props: FieldProps<Customer>) => {
+    const record = useRecordContext();
+    if (!record) {
+        return null;
+    }
+    return (
+        <Link to={`/customers/${record.id}`}>
+            <FullNameField />
         </Link>
-    ) : null;
+    );
+};
 
 CustomerLinkField.defaultProps = {
     source: 'customer_id',

examples/demo/src/visitors/FullNameField.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { memo } from 'react';
 
-import { FieldProps } from 'react-admin';
+import { FieldProps, useRecordContext } from 'react-admin';
 import AvatarField from './AvatarField';
 import { Customer } from '../types';
 
@@ -32,8 +32,8 @@ interface Props extends FieldProps<Customer> {
 }
 
 const FullNameField = (props: Props) => {
-    const { record, size } = props;
-
+    const { size } = props;
+    const record = useRecordContext<Customer>();
     return record ? (
         <Root className={classes.root}>
             <AvatarField

packages/ra-core/src/controller/field/index.ts

@@ -1,3 +1,4 @@
 export * from './getResourceLinkPath';
 export * from './useReferenceArrayFieldController';
 export * from './useReferenceManyFieldController';
+export * from './useReferenceOneFieldController';