Backport Changes from 4.x branch

Makefile

@@ -114,7 +114,7 @@ build-create-react-admin:
 	@echo "Transpiling create-react-admin files...";
 	@cd ./packages/create-react-admin && yarn build
 
-build: build-ra-core build-ra-ui-materialui build-ra-data-fakerest build-ra-data-json-server build-ra-data-localforage build-ra-data-localstorage build-ra-data-simple-rest build-ra-data-graphql build-ra-data-graphql-simple build-ra-i18n-polyglot build-ra-input-rich-text build-data-generator build-ra-language-english build-ra-language-french build-ra-i18n-i18next build-react-admin build-ra-no-code build-create-react-admin  ## compile ES6 files to JS
+build: build-ra-core build-ra-data-fakerest build-ra-ui-materialui build-ra-data-json-server build-ra-data-localforage build-ra-data-localstorage build-ra-data-simple-rest build-ra-data-graphql build-ra-data-graphql-simple build-ra-i18n-polyglot build-ra-input-rich-text build-data-generator build-ra-language-english build-ra-language-french build-ra-i18n-i18next build-react-admin build-ra-no-code build-create-react-admin  ## compile ES6 files to JS
 
 doc: ## compile doc as html and launch doc web server
 	@yarn doc

docs/AccordionForm.md

@@ -375,15 +375,16 @@ This component renders a [Material UI `<Accordion>` component](https://mui.com/c
 
 Here are all the props you can set on the `<AccordionForm.Panel>` component:
 
-| Prop              | Required | Type        | Default | Description                                                                                      |
-| ----------------- | -------- | ----------- | ------- | ------------------------------------------------------------------------------------------------ |
-| `label`           | Required | `string`    | -       | The main label used as the accordion summary. Appears in red when the accordion has errors       |
-| `children`        | Required | `ReactNode` | -       | A list of `<Input>` elements                                                                     |
-| `secondary`       | Optional | `string`    | -       | The secondary label used as the accordion summary                                                |
-| `defaultExpanded` | Optional | `boolean`   | `false` | Set to true to have the accordion expanded by default (except if autoClose = true on the parent) |
-| `disabled`        | Optional | `boolean`   | `false` | If true, the accordion will be displayed in a disabled state.                                    |
-| `square`          | Optional | `boolean`   | `false` | If true, rounded corners are disabled.                                                           |
-| `sx`              | Optional | `Object`    | -       | An object containing the MUI style overrides to apply to the root component.                     |
+| Prop              | Required | Type                    | Default | Description                                                                                            |
+| ----------------- | -------- | ----------------------- | ------- | ------------------------------------------------------------------------------------------------       |
+| `children`        | Required | `ReactNode`             | -       | A list of `<Input>` elements                                                                           |
+| `defaultExpanded` | Optional | `boolean`               | `false` | Set to true to have the accordion expanded by default (except if autoClose = true on the parent)       |
+| `disabled`        | Optional | `boolean`               | `false` | If true, the accordion will be displayed in a disabled state.                                          |
+| `id`              | Optional | `string`                | -       | An id for this Accordion to be used in the [`useFormGroup`](./Upgrade.md#useformgroup-hook-returned-state-has-changed) hook and for CSS classes. |
+| `label`           | Required | `string` or `ReactNode` | -       | The main label used as the accordion summary. Appears in red when the accordion has errors             |
+| `secondary`       | Optional | `string` or `ReactNode` | -       | The secondary label used as the accordion summary                                                      |
+| `square`          | Optional | `boolean`               | `false` | If true, rounded corners are disabled.                                                                 |
+| `sx`              | Optional | `Object`                | -       | An object containing the MUI style overrides to apply to the root component.                           |
 
 ```tsx
 import {
@@ -413,6 +414,8 @@ const CustomerEdit = () => (
 );
 ```
 
+**Warning**: To use an `<AccordionFormPanel>` with the `autoClose` prop and a React node element as a `label`, you **must** specify an `id`.
+
 ## `<AccordionSection>`
 
 Renders children (Inputs) inside a Material UI `<Accordion>` element without a Card style. To be used as child of a `<SimpleForm>` or a `<TabbedForm>` element.
@@ -430,19 +433,20 @@ Prefer `<AccordionSection>` to `<AccordionForm>` to always display a list of imp
 
 Here are all the props you can set on the `<AccordionSection>` component:
 
-| Prop               | Required | Type        | Default | Description                                                   |
-| ------------------ | -------- | ----------- | ------- | ------------------------------------------------------------- |
-| `Accordion`        | Optional | `Component` | -       | The component to use as the accordion.                        |
-| `AccordionDetails` | Optional | `Component` | -       | The component to use as the accordion details.                |
-| `AccordionSummary` | Optional | `Component` | -       | The component to use as the accordion summary.                |
-| `label`            | Required | `string`    | -       | The main label used as the accordion summary.                 |
-| `children`         | Required | `ReactNode` | -       | A list of `<Input>` elements                                  |
-| `fullWidth`        | Optional | `boolean`   | `false` | If true, the Accordion takes the entire form width.           |
-| `className`        | Optional | `string`    | -       | A class name to style the underlying `<Accordion>`            |
-| `secondary`        | Optional | `string`    | -       | The secondary label used as the accordion summary             |
-| `defaultExpanded`  | Optional | `boolean`   | `false` | Set to true to have the accordion expanded by default         |
-| `disabled`         | Optional | `boolean`   | `false` | If true, the accordion will be displayed in a disabled state. |
-| `square`           | Optional | `boolean`   | `false` | If true, rounded corners are disabled.                        |
+| Prop               | Required | Type                    | Default | Description                                                   |
+| ------------------ | -------- | ----------------------- | ------- | ------------------------------------------------------------- |
+| `Accordion`        | Optional | `Component`             | -       | The component to use as the accordion.                        |
+| `AccordionDetails` | Optional | `Component`             | -       | The component to use as the accordion details.                |
+| `AccordionSummary` | Optional | `Component`             | -       | The component to use as the accordion summary.                |
+| `children`         | Required | `ReactNode`             | -       | A list of `<Input>` elements                                  |
+| `className`        | Optional | `string`                | -       | A class name to style the underlying `<Accordion>`            |
+| `defaultExpanded`  | Optional | `boolean`               | `false` | Set to true to have the accordion expanded by default         |
+| `disabled`         | Optional | `boolean`               | `false` | If true, the accordion will be displayed in a disabled state. |
+| `fullWidth`        | Optional | `boolean`               | `false` | If true, the Accordion takes the entire form width.           |
+| `id`               | Optional | `string`                | -       | An id for this Accordion to be used for CSS classes.          |
+| `label`            | Required | `string` or `ReactNode` | -       | The main label used as the accordion summary.                 |
+| `secondary`        | Optional | `string` or `ReactNode` | -       | The secondary label used as the accordion summary             |
+| `square`           | Optional | `boolean`               | `false` | If true, rounded corners are disabled.                        |
 
 ```tsx
 import {

docs/FieldsForRelationships.md

@@ -16,6 +16,8 @@ React-admin handles relationships *regardless of the capacity of the API to mana
 
 React-admin provides helpers to fetch related records, depending on the type of relationship, and how the API implements it.
 
+<iframe src="https://www.youtube-nocookie.com/embed/UeM31-65Wc4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="aspect-ratio: 16 / 9;width:100%;margin-bottom:1em;"></iframe>
+
 ## One-To-Many
 
 When one record has many related records, this is called a one-to-many relationship. For instance, if an author has written several books, `authors` has a one-to-many relationship with `books`. 

docs/Inputs.md

@@ -43,7 +43,8 @@ All input components accept the following props:
 | `source`        | Required | `string`                  | -       | Name of the entity property to use for the input value                                                                                                              |
 | `className`     | Optional | `string`                  | -       | Class name (usually generated by JSS) to customize the look and feel of the field element itself                                                                    |
 | `defaultValue`  | Optional | `any`                     | -       | Default value of the input.                                                                                                                                         |
-| `disabled`      | Optional | `boolean`                 | -       | If true, the input is disabled.                                                                                                                                     |
+| `readOnly`      | Optional | `boolean`                 | `false`       | If true, the input is in read-only mode.                                                                                                                                     |
+| `disabled`      | Optional | `boolean`                 | `false`       | If true, the input is disabled.                                                                                                                                     |
 | `format`        | Optional | `Function`                | `value => value == null ? '' : value` | Callback taking the value from the form state, and returning the input value.                                                                                       |
 | `fullWidth`     | Optional | `boolean`                 | `true`  | If `false`, the input will not expand to fill the form width                                                                                                             |
 | `helperText`    | Optional | `string`                  | -       | Text to be displayed under the input (cannot be used inside a filter)                                                                                                          |
@@ -150,21 +151,29 @@ export const PostCreate = () => (
 );
 ```
 
+## `readOnly`
+
+The `readOnly` prop set to true makes the element not mutable, meaning the user can not edit the control.
+
+```tsx
+<TextInput source="title" readOnly />
+```
+
+Contrary to disabled controls, read-only controls are still focusable and are submitted with the form.
+
 ## `disabled`
 
-If `true`, the input is disabled and the user can't change the value.
+The `disabled` prop set to true makes the element not mutable, focusable, or even submitted with the form.
 
 ```tsx
 <TextInput source="title" disabled />
 ```
 
-**Tip**: The form framework used by react-admin, react-hook-form, [considers](https://github.com/react-hook-form/react-hook-form/pull/10805) that a `disabled` input shouldn't submit any value. So react-hook-form sets the value of all `disabled` inputs to `undefined`. As a consequence, a form with a `disabled` input is always considered `dirty` (i.e. react-hook-form considers that the form values and the initial record values are different), and it triggers [the `warnWhenUnsavedChanges` feature](./Forms.md#warning-about-unsaved-changes) when leaving the form, even though the user changed nothing. The workaround is to set the `disabled` prop on the underlying input component, as follows:
+Contrary to read-only controls, disabled controls can not receive focus and are not submitted with the form.
 
-{% raw %}
-```jsx
-<TextInput source="title" InputProps={{ disabled: true }} />
-```
-{% endraw %}
+**Warning:** Note that `disabled` inputs are **not** included in the form values, and hence may trigger `warnWhenUnsavedChanges` if the input previously had a value in the record.
+
+**Tip:** To include the input in the form values, you can use `readOnly` instead of `disabled`.
 
 ## `format`
 

docs/Layout.md

@@ -369,7 +369,7 @@ This property accepts the following subclasses:
 
 To override the style of `<Layout>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaLayout` key.
 
-**Tip**: If you need to override global styles (like the default font size or family), you should [write a custom theme](./AppTheme.md) rather than override the `<Layout sx>` prop. And if you need to tweak the default layout to add a right column or move the menu to the top, you're probably better off [writing your own layout component](./Layout.md#writing-a-layout-from-scratch). 
+**Tip**: If you need to override global styles (like the default font size or family), you should [write a custom theme](./AppTheme.md#writing-a-custom-theme) rather than override the `<Layout sx>` prop. And if you need to tweak the default layout to add a right column or move the menu to the top, you're probably better off [writing your own layout component](./Layout.md#writing-a-layout-from-scratch). 
 
 ## Adding A Custom Context
 

docs/ReferenceArrayField.md

@@ -7,7 +7,15 @@ title: "The ReferenceArrayField Component"
 
 Use `<ReferenceArrayField>` to display a list of related records, via a one-to-many relationship materialized by an array of foreign keys.
 
-![ReferenceArrayField](./img/reference-array-field.png)
+<iframe src="https://www.youtube-nocookie.com/embed/UeM31-65Wc4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="aspect-ratio: 16 / 9;width:100%;margin-bottom:1em;"></iframe>
+
+`<ReferenceArrayField>` fetches a list of referenced records (using the `dataProvider.getMany()` method), and puts them in a [`ListContext`](./useListContext.md). It then renders each related record, using its [`recordRepresentation`](./Resource.md#recordrepresentation), in a [`<ChipField>`](./ChipField.md). 
+
+**Tip**: If the relationship is materialized by a foreign key on the referenced resource, use [the `<ReferenceManyField>` component](./ReferenceManyField.md) instead.
+
+**Tip**: To edit the records of a one-to-many relationship, use [the `<ReferenceArrayInput>` component](./ReferenceArrayInput.md).
+
+## Usage
 
 For instance, let's consider a model where a `post` has many `tags`, materialized to a `tags_ids` field containing an array of ids:
 
@@ -35,41 +43,30 @@ A typical `post` record therefore looks like this:
 }
 ```
 
-In that case, use `<ReferenceArrayField>` to display the post tags names as follows:
+In that case, use `<ReferenceArrayField>` to display the post tag names as Chips as follows:
 
 ```jsx
-<ReferenceArrayField label="Tags" reference="tags" source="tag_ids" />
-```
-
-`<ReferenceArrayField>` fetches a list of referenced records (using the `dataProvider.getMany()` method), and puts them in a [`ListContext`](./useListContext.md). It then renders each related record, using its [`recordRepresentation`](./Resource.md#recordrepresentation), in a [`<ChipField>`](./ChipField.md). 
-
-**Tip**: If the relationship is materialized by a foreign key on the referenced resource, use [the `<ReferenceManyField>` component](./ReferenceManyField.md) instead.
-
-## Usage
-
-`<ReferenceArrayField>` expects a `reference` attribute, which specifies the resource to fetch for the related records. It also expects a `source` attribute, which defines the field containing the list of ids to look for in the referenced resource.
-
-For instance, if each post contains a list of tag ids (e.g. `{ id: 1234, title: 'Lorem Ipsum', tag_ids: [1, 23, 4] }`), here is how to fetch the list of tags for each post in a list, and display the `name` for each `tag` in a `<ChipField>`:
-
-```jsx
-import * as React from "react";
 import { List, Datagrid, ReferenceArrayField, TextField } from 'react-admin';
 
 export const PostList = () => (
     <List>
         <Datagrid>
             <TextField source="id" />
             <TextField source="title" />
-            <ReferenceArrayField label="Tags" reference="tags" source="tag_ids" />
+            <ReferenceArrayField reference="tags" source="tag_ids" label="Tags" />
             <EditButton />
         </Datagrid>
     </List>
 );
 ```
 
+![ReferenceArrayField](./img/reference-array-field.png)
+
+`<ReferenceArrayField>` expects a `reference` attribute, which specifies the resource to fetch for the related records. It also expects a `source` attribute, which defines the field containing the list of ids to look for in the referenced resource.
+
 `<ReferenceArrayField>` fetches the `tag` resources related to each `post` resource by matching `post.tag_ids` to `tag.id`. By default, it renders one string by related record, via a [`<SingleFieldList>`](./SingleFieldList.md) with a [`<ChipField>`](./ChipField.md) child using the resource [`recordRepresentation`](./Resource.md#recordrepresentation) as source
 
-Configure the `<Resource recordRepresentation>` to render related records in a meaningul way. For instance, for the `tags` resource, if you want the `<ReferenceArrayField>` to display the tag `name`:
+Configure the `<Resource recordRepresentation>` to render related records in a meaningful way. For instance, for the `tags` resource, if you want the `<ReferenceArrayField>` to display the tag `name`:
 
 ```jsx
 <Resource name="tags" list={TagList} recordRepresentation="name" />