Merge remote-tracking branch 'origin/master' into next

Author: slax57

CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 5.13.6
+
+* [Doc] Update link to marmelab blog ([#11117](https://github.com/marmelab/react-admin/pull/11117)) ([WiXSL](https://github.com/WiXSL))
+* [Doc] Update `<AutoPersistInStore>` documentation ([#11110](https://github.com/marmelab/react-admin/pull/11110)) ([djhi](https://github.com/djhi))
+* [Doc] Update Soft Delete headless documentation ([#11109](https://github.com/marmelab/react-admin/pull/11109)) ([jonathanarnault](https://github.com/jonathanarnault))
+* [Doc] Fix `Validation` section position ([#11107](https://github.com/marmelab/react-admin/pull/11107)) ([WiXSL](https://github.com/WiXSL))
+* Bump h3 from 1.15.4 to 1.15.5 ([#11116](https://github.com/marmelab/react-admin/pull/11116)) ([dependabot[bot]](https://github.com/apps/dependabot))
+* Bump devalue from 5.5.0 to 5.6.2 ([#11115](https://github.com/marmelab/react-admin/pull/11115)) ([dependabot[bot]](https://github.com/apps/dependabot))
+
+## 5.13.5
+
+* Fix `<Form>` ignores `resetOptions` when record changes ([#11099](https://github.com/marmelab/react-admin/pull/11099)) ([Jszigeti](https://github.com/Jszigeti))
+* Fix `<ColumnsSelector>` cannot hide `<DataTable.Col>` items with no `source` ([#11088](https://github.com/marmelab/react-admin/pull/11088)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Clarify validation prop usage on `<ReferenceInput>` / `<ReferenceArrayInput>` ([#11104](https://github.com/marmelab/react-admin/pull/11104)) ([WiXSL](https://github.com/WiXSL))
+* [Doc] Add tutorial for React Router Framework ([#11100](https://github.com/marmelab/react-admin/pull/11100)) ([djhi](https://github.com/djhi))
+* [Doc] Update `<DatagridAG>` docs following `ra-datagrid-ag` 7.0.0 release ([#11097](https://github.com/marmelab/react-admin/pull/11097)) ([slax57](https://github.com/slax57))
+* [Doc] Update `AdapterDateFns` imports for MUIX v8 ([#11090](https://github.com/marmelab/react-admin/pull/11090)) ([djhi](https://github.com/djhi))
+* [Doc] Document `<FilterValue>` ([#11086](https://github.com/marmelab/react-admin/pull/11086)) ([djhi](https://github.com/djhi))
+* [chore] Fix security vulnerabilities in `qs` and `systeminformation` ([#11103](https://github.com/marmelab/react-admin/pull/11103)) ([slax57](https://github.com/slax57))
+* Bump react-router from 6.28.1 to 6.30.2 ([#11106](https://github.com/marmelab/react-admin/pull/11106)) ([dependabot[bot]](https://github.com/apps/dependabot))
+* Bump storybook from 8.6.11 to 8.6.15 ([#11098](https://github.com/marmelab/react-admin/pull/11098)) ([dependabot[bot]](https://github.com/apps/dependabot))
+
 ## 5.13.4
 
 * Fix `useAugmentedForm` resets the form one too many time ([#11085](https://github.com/marmelab/react-admin/pull/11085)) ([slax57](https://github.com/slax57))

README.md

@@ -2,7 +2,7 @@
 
 A frontend Framework for building single-page applications running in the browser on top of REST/GraphQL APIs, using TypeScript, [React](https://facebook.github.io/react/) and [Material Design](https://material.io/). Open sourced and maintained by [marmelab](https://marmelab.com/).
 
-[Home page](https://marmelab.com/react-admin/) - [Documentation](https://marmelab.com/react-admin/documentation.html) - [Examples](#examples) - [Blog](https://marmelab.com/en/blog/#react-admin) - [Releases](https://github.com/marmelab/react-admin/releases) - [Support](#support)
+[Home page](https://marmelab.com/react-admin/) - [Documentation](https://marmelab.com/react-admin/documentation.html) - [Examples](#examples) - [Blog](https://marmelab.com/blog/tags/react-admin) - [Releases](https://github.com/marmelab/react-admin/releases) - [Support](#support)
 
 [![react-admin-demo](https://marmelab.com/react-admin/img/react-admin-demo-still.png)](https://www.youtube.com/watch?v=bJEo1O1oT6o)
 

cypress/package.json

@@ -7,8 +7,8 @@
         "test": "yarn node ./start.js"
     },
     "devDependencies": {
-        "cypress": "^15.0.0",
+        "cypress": "^15.8.1",
         "cypress-vite": "^1.7.0",
-        "express": "^4.20.0"
+        "express": "^4.22.1"
     }
 }

docs/AdvancedTutorials.md

@@ -5,7 +5,7 @@ title: "Advanced Tutorials"
 
 # Advanced Tutorials
 
-If you want to learn the best practices of react-admin development by example, you've come to the right place. This page lists the advanced tutorials we've published on [the react-admin blog](https://marmelab.com/en/blog/#react-admin).
+If you want to learn the best practices of react-admin development by example, you've come to the right place. This page lists the advanced tutorials we've published on [the react-admin blog](https://marmelab.com/blog/tags/react-admin).
 
 * 2025-01: [Handling Relationships in React Admin](https://marmelab.com/blog/2025/02/06/handling-relationships-in-react-admin.html)
 * 2025-01: [How to build a CMS with React-Admin](https://marmelab.com/blog/2025/01/24/how-to-build-a-cms-with-react-admin.html)

docs/AutoPersistInStore.md

@@ -41,10 +41,11 @@ It works both on create and edit forms.
 
 ## Props
 
-| Prop                  | Required | Type       | Default                                                  | Description                                                           |
+| Prop                  | Required | Type       | Default                            | Description                                                                                 |
 | --------------------- | -------- | ---------- | -------------------------------------------------------- | --------------------------------------------------------------------- |
-| `getStoreKey`         | -        | `function` | -                                                        | Function to use your own store key.                                   |
-| `notificationMessage` | -        | `string`   | "Applied previous unsaved changes" | Notification message to inform users that their previously saved changes have been applied. |
+| `getStoreKey`         | -        | `function` | -                                  | Function to use your own store key.                                                         |
+| `notification`        | -        | `ReactNode` | `<AutoPersist Notification>`       | The element used to show the notification, that allows users to reset the form.             |
+| `notification Message` | -        | `string`   | "Applied previous unsaved changes" | Notification message to inform users that their previously saved changes have been applied. |
 
 ## `getStoreKey`
 
@@ -68,6 +69,43 @@ You can override this key by passing a custom function as the `getStoreKey` prop
 />
 ```
 
+## `notification`
+
+When `<AutoPersistInStore>` component applies the changes from the store to a form, react-admin informs users with a notification.
+This notification also provides them a way to revert the changes from the store.
+
+You can make your own element and pass it using the `notification` prop:
+
+```tsx
+import { Translate, useCloseNotification, useEvent } from 'react-admin';
+import { AutoPersistInStore, useAutoPersistInStoreContext } from '@react-admin/ra-form-layout';
+import { Alert } from '@mui/material';
+
+const MyAutoPersistInStore = () => (
+    <AutoPersistInStore notification={<AutoPersistNotification />} />
+);
+
+const AutoPersistNotification = () => {
+    const closeNotification = useCloseNotification();
+    const { reset } = useAutoPersistInStoreContext();
+
+    const cancel = useEvent((event: React.MouseEvent) => {
+        event.preventDefault();
+        reset();
+        closeNotification();
+    });
+
+    return (
+        <Alert
+            severity="info"
+            action={<Button label="ra.action.cancel" onClick={cancel} />}
+        >
+          <Translate i18nKey="ra-form-layout.auto_persist_in_store.applied_changes" />
+        </Alert>
+    );
+};
+```
+
 ## `notificationMessage`
 
 When `<AutoPersistInStore>` component applies the changes from the store to a form, react-admin informs users with a notification.

docs/AutocompleteArrayInput.md

@@ -126,6 +126,8 @@ If you need to *fetch* the options from another resource, you're actually editin
 </ReferenceArrayInput>
 ```
 
+**Tip**: If you need validation (e.g. `required()`), put the `validate` prop on the child `<AutocompleteArrayInput>`. `<ReferenceArrayInput>` doesn't accept validation props.
+
 You can also pass an *array of strings* for the choices:
 
 ```jsx
@@ -839,4 +841,3 @@ const CreateTag = () => {
 };
 ```
 {% endraw %}
-

docs/AutocompleteInput.md

@@ -764,19 +764,22 @@ const CompanyInput = () => {
 As this is a common task, react-admin provides a shortcut to do the same in a declarative way: [`<ReferenceInput>`](./ReferenceInput.md):
 
 ```jsx
-import { ReferenceInput, AutocompleteInput } from 'react-admin';
+import { ReferenceInput, AutocompleteInput, required } from 'react-admin';
 
 const CompanyInput = () => (
     <ReferenceInput reference="companies" source="company_id">
         <AutocompleteInput 
             label="Company"
             source="company_id"
             optionText="name"
+            validate={required()}
         />
     </ReferenceInput>
 );
 ```
 
+**Tip**: If you need validation (e.g. `required()`), put the `validate` prop on the child input (`<AutocompleteInput>`). `<ReferenceInput>` doesn't accept validation props.
+
 `<ReferenceInput>` is a headless component that:
 
  - fetches a list of records with `dataProvider.getList()` and `dataProvider.getOne()`, using the `reference` prop for the resource,

docs/Community.md

@@ -88,7 +88,7 @@ If your problem is related to a library used by react-admin, you should ask for
 
 The Marmelab blog has more than 70 articles about react-admin:
 
-* [https://marmelab.com/en/blog/#react-admin](https://marmelab.com/en/blog/#react-admin)
+* [https://marmelab.com/blog/tags/react-admin](https://marmelab.com/blog/tags/react-admin)
 
 You'll find tutorials, tips and tricks, version highlights, real-world use cases, and more. Come back often, we publish new articles every week!
 

docs/DatagridAG.md

@@ -247,6 +247,7 @@ If you need to use these features, you can use the [`<DatagridAGClient>`](#datag
 | `cellRenderer`      | Optional | String, Function or Element |                              | Allows to use a custom component to render the cell content                                                                            |
 | `columnDefs`        | Required | Array                       | n/a                          | The columns definitions                                                                                                                |
 | `defaultColDef`     | Optional | Object                      |                              | The default column definition (applied to all columns)                                                                                 |
+| `defaultSort`       | Optional | Object                      |                              | The default sort to apply when clearing all sort                                                                                       |
 | `getAgGridFilters`  | Optional | Function                    |                              | A function mapping react-admin filters to ag-grid filters                                                                              |
 | `getRaFilters`      | Optional | Function                    |                              | A function mapping ag-grid filters to react-admin filters                                                                              |
 | `mutationOptions`   | Optional | Object                      |                              | The mutation options                                                                                                                   |
@@ -301,7 +302,7 @@ In a column definition, you can use the `cellEditor` field to specify a custom c
 
 In addition to that, `<DatagridAG>` supports using [React Admin inputs](./Inputs.md) as `cellEditor`, such as [`<TextInput>`](./TextInput.md) or even [`<ReferenceInput>`](./ReferenceInput.md).
 
-This allows to leverage all the power of react-admin inputs in your grid, for example to edit a reference.
+This allows to leverage all the power of react-admin inputs in your grid, including validation, for example to edit a reference.
 
 To use a React Admin input as `cellEditor`, you need to pass it as a *React Element*:
 
@@ -433,7 +434,36 @@ const StyledListbox = styled('ul')({
 
 **Tip:** Using a custom `cellEditor` works great in combination with a custom [`cellRenderer`](#cellrenderer).
 
-**Note:** React Admin inputs used ad `cellEditor` do not (yet) support form validation.
+You might want to always use React Admin inputs to edit your columns to leverage the validators with builtin i18n support:
+
+```tsx
+import { List, TextInput, ReferenceInput, AutocompleteInput, required } from 'react-admin';
+import { DatagridAG } from '@react-admin/ra-datagrid-ag';
+
+export const CommentList = () => {
+    const columnDefs = [
+        {
+            field: 'title',
+            cellEditor: (
+              <TextInput source="title" validate={required()} />
+            ),
+        },
+        {
+            field: 'post_id',
+            cellEditor: (
+                <ReferenceInput source="post_id" reference="posts">
+                  <AutocompleteInput validate={required()} />
+                </ReferenceInput>
+            ),
+        },
+    ];
+    return (
+        <List>
+            <DatagridAG columnDefs={columnDefs} />
+        </List>
+    );
+};
+```
 
 ### `cellRenderer`
 
@@ -560,6 +590,33 @@ export const PostList = () => {
 
 ![DatagridAG defaultColDef](./img/DatagridAG-PostList.png)
 
+### `defaultSort`
+
+The `defaultSort` prop allows you to define what sort settings to apply when users clear the sort on a column.
+
+{% raw %}
+```tsx
+import React from 'react';
+import { List } from 'react-admin';
+import { DatagridAG } from '@react-admin/ra-datagrid-ag';
+
+export const PostList = () => {
+    const columnDefs = [
+        // Passing null allows users to clear the sort
+        { field: 'title', sortingOrder: ['asc', 'desc', null] },
+        { field: 'published_at', sortingOrder: ['asc', 'desc', null] },
+        { field: 'body', sortingOrder: ['asc', 'desc', null] },
+    ];
+
+    return (
+        <List>
+            <DatagridAG columnDefs={columnDefs} defaultSort={{ field: 'id', order: 'ASC' }} />
+        </List>
+    );
+};
+```
+{% endraw %}
+
 ### `getAgGridFilters`
 
 You can use the `getAgGridFilters` prop to provide a function that transforms the filters from the dataProvider to the ag-grid format.
@@ -1943,7 +2000,7 @@ In a column definition, you can use the `cellEditor` field to specify a custom c
 
 In addition to that, `<DatagridAGClient>` supports using [React Admin inputs](./Inputs.md) as `cellEditor`, such as [`<TextInput>`](./TextInput.md) or even [`<ReferenceInput>`](./ReferenceInput.md).
 
-This allows to leverage all the power of react-admin inputs in your grid, for example to edit a reference.
+This allows to leverage all the power of react-admin inputs in your grid, including validation, for example to edit a reference.
 
 To use a React Admin input as `cellEditor`, you need to pass it as a *React Element*:
 
@@ -2075,7 +2132,36 @@ const StyledListbox = styled('ul')({
 
 **Tip:** Using a custom `cellEditor` works great in combination with a custom [`cellRenderer`](#cellrenderer-1).
 
-**Note:** React Admin inputs used ad `cellEditor` do not (yet) support form validation.
+You might want to always use React Admin inputs to edit your columns to leverage the validators with builtin i18n support:
+
+```tsx
+import { List, TextInput, ReferenceInput, AutocompleteInput, required } from 'react-admin';
+import { DatagridAGClient } from '@react-admin/ra-datagrid-ag';
+
+export const CommentList = () => {
+    const columnDefs = [
+        {
+            field: 'title',
+            cellEditor: (
+              <TextInput source="title" validate={required()} />
+            ),
+        },
+        {
+            field: 'post_id',
+            cellEditor: (
+                <ReferenceInput source="post_id" reference="posts">
+                  <AutocompleteInput validate={required()} />
+                </ReferenceInput>
+            ),
+        },
+    ];
+    return (
+        <List perPage={10000} pagination={false}>
+            <DatagridAGClient columnDefs={columnDefs} />
+        </List>
+    );
+};
+```
 
 ### `cellRenderer`
 

docs/DualListInput.md

@@ -134,6 +134,8 @@ If you need to *fetch* the options from another resource, you're actually editin
 </ReferenceArrayInput>
 ```
 
+**Tip**: If you need validation (e.g. `required()`), put the `validate` prop on the child `<DualListInput>`. `<ReferenceArrayInput>` doesn't accept validation props.
+
 If you have an *array of values* for the options, turn it into an array of objects with the `id` and `name` properties:
 
 ```jsx