[pull] master from marmelab:master

CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 5.9.0
+
+* Add support for customization with MUI theme to inputs ([#10772](https://github.com/marmelab/react-admin/pull/10772)) ([Madeorsk](https://github.com/Madeorsk))
+* Add support for customization with MUI theme to main views components and buttons ([#10771](https://github.com/marmelab/react-admin/pull/10771)) ([Madeorsk](https://github.com/Madeorsk))
+* Add support for customization with MUI theme to fields and delete buttons ([#10770](https://github.com/marmelab/react-admin/pull/10770)) ([Madeorsk](https://github.com/Madeorsk))
+* Add `<RecordField>` component ([#10749](https://github.com/marmelab/react-admin/pull/10749)) ([fzaninotto](https://github.com/fzaninotto))
+* Add support for middlewares to `useUpdateMany` ([#10795](https://github.com/marmelab/react-admin/pull/10795)) ([slax57](https://github.com/slax57))
+* Allow resource specific translations for pages and buttons ([#10686](https://github.com/marmelab/react-admin/pull/10686)) ([djhi](https://github.com/djhi))
+* Fix `<AutocompleteInput>` should not break when overriding input slot props ([#10793](https://github.com/marmelab/react-admin/pull/10793)) ([slax57](https://github.com/slax57))
+* Fix bulk action buttons hover style ([#10788](https://github.com/marmelab/react-admin/pull/10788)) ([djhi](https://github.com/djhi))
+* Fix image alignment in ready page in some contexts ([#10780](https://github.com/marmelab/react-admin/pull/10780)) ([Madeorsk](https://github.com/Madeorsk))
+* Fix `useLogoutAccessDenied` should not throw when no `redirectTo` is provided ([#10763](https://github.com/marmelab/react-admin/pull/10763)) ([carloshv93](https://github.com/carloshv93))
+* [Doc] AuthProvider List: Add Appwrite ([#10798](https://github.com/marmelab/react-admin/pull/10798)) ([slax57](https://github.com/slax57))
+* [Doc] DataProvider List: Update Appwrite logo and name ([#10787](https://github.com/marmelab/react-admin/pull/10787)) ([slax57](https://github.com/slax57))
+* [Doc] Add a migration section in `<DataTable>` documentation that shows the codemod ([#10786](https://github.com/marmelab/react-admin/pull/10786)) ([djhi](https://github.com/djhi))
+* [Doc] Mention that `helperText` also supports translation keys ([#10785](https://github.com/marmelab/react-admin/pull/10785)) ([slax57](https://github.com/slax57))
+* [Doc] Add deployment instructions ([#10783](https://github.com/marmelab/react-admin/pull/10783)) ([Madeorsk](https://github.com/Madeorsk))
+* [Doc] Change our `Datagrid` examples to `DataTable` ([#10766](https://github.com/marmelab/react-admin/pull/10766)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* [Demo] Remove duplicate file `segments.ts` ([#10792](https://github.com/marmelab/react-admin/pull/10792)) ([slax57](https://github.com/slax57))
+* [chore] Ensure tests are working in all environments by running them in US english ([#10781](https://github.com/marmelab/react-admin/pull/10781)) ([Madeorsk](https://github.com/Madeorsk))
+
 ## 5.8.4
 
 * Replace `Datagrid` by `DataTable` in Guessers ([#10754](https://github.com/marmelab/react-admin/pull/10754)) ([erwanMarmelab](https://github.com/erwanMarmelab))

README.md

@@ -65,20 +65,22 @@ The `<Resource>` component defines CRUD pages (`list`, `edit`, and `create`) for
 ```jsx
 // in posts.js
 import * as React from "react";
-import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, DateInput, useRecordContext } from 'react-admin';
+import { List, DataTable, Edit, Create, SimpleForm, DateField, EditButton, TextInput, DateInput, useRecordContext } from 'react-admin';
 import BookIcon from '@mui/icons-material/Book';
 export const PostIcon = BookIcon;
 
 export const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <DateField source="published_at" />
-            <TextField source="average_note" />
-            <TextField source="views" />
-            <EditButton />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="published_at" field={DateField} />
+            <DataTable.Col source="average_note" />
+            <DataTable.Col source="views" />
+            <DataTable.Col>
+                <EditButton />
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 

docs/Actions.md

@@ -156,17 +156,17 @@ See the [Success and Error Side Effects](#success-and-error-side-effects) below
 
 {% raw %}
 ```jsx
-import { List, Datagrid, TextField } from 'react-admin';
+import { List, DataTable } from 'react-admin';
 
 const PostList = () => (
     <List
         queryOptions={{ onSettled: (data, error) => console.log(data, error) }}
     >
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <TextField source="body" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="body" />
+        </DataTable>
     </List>
 );
 ```
@@ -319,8 +319,8 @@ To execute some logic after a query or a mutation is complete, use the `onSucces
 - [`useNotify`](./useNotify.md): Return a function to display a notification.
 - [`useRedirect`](./useRedirect.md): Return a function to redirect the user to another page.
 - [`useRefresh`](./useRefresh.md): Return a function to force a rerender of the current view (equivalent to pressing the Refresh button).
-- [`useUnselect`](./useUnselect.md): Return a function to unselect lines in the current `Datagrid` based on the ids passed to it.
-- [`useUnselectAll`](./useUnselectAll.md): Return a function to unselect all lines in the current `Datagrid`.
+- [`useUnselect`](./useUnselect.md): Return a function to unselect lines in the current `<DataTable>` based on the ids passed to it.
+- [`useUnselectAll`](./useUnselectAll.md): Return a function to unselect all lines in the current `<DataTable>`.
 
 ### `onSuccess`
 

docs/AppTheme.md

@@ -273,19 +273,19 @@ const ThemeToggler = () => {
 
 In a custom theme, you can override the style of a component for the entire application using the `components` key.
 
-For instance, to create a custom theme that overrides the style of the `<Datagrid>` component:
+For instance, to create a custom theme that overrides the style of the `<DataTable>` component:
 
 ```jsx
 import { defaultTheme } from 'react-admin';
 import { deepmerge } from '@mui/utils';
 
 const theme = deepmerge(defaultTheme, {
     components: {
-        RaDatagrid: {
+        RaDataTable: {
             styleOverrides: {
               root: {
                   backgroundColor: "Lavender",
-                  "& .RaDatagrid-headerCell": {
+                  "& .RaDataTable-headerCell": {
                       backgroundColor: "MistyRose",
                   },
               }
@@ -306,7 +306,7 @@ There are 2 important gotchas here:
 - Don't forget to merge your custom style overrides with the ones from react-admin's `defaultTheme`, otherwise the application will have the default Material UI theme (most notably, outlined text inputs)
 - Custom style overrides must live under a `root` key. Then, the style override syntax is the same as the one used for the [`sx`](./SX.md) prop.
 
-To guess the name of the subclass to use (like `.RaDatagrid-headerCell` above) for customizing a component, you can use the developer tools of your browser, or check the react-admin documentation for individual components (e.g. the [Datagrid CSS documentation](./Datagrid.md#sx-css-api)).
+To guess the name of the subclass to use (like `.RaDataTable-headerCell` above) for customizing a component, you can use the developer tools of your browser, or check the react-admin documentation for individual components (e.g. the [`<DataTable>` CSS documentation](./DataTable.md#sx-css-api)).
 
 **Tip**: As an alternative, you can also re-export styled components, and use them instead of the react-admin components. Check the [Reusable Components](./SX.md#reusable-components) documentation for an example.
 
@@ -499,11 +499,11 @@ import { defaultTheme } from 'react-admin';
 
 const theme = deepmerge(defaultTheme, {
     components: {
-        RaDatagrid: {
+        RaDataTable: {
             styleOverrides: {
               root: {
                   backgroundColor: "Lavender",
-                  "& .RaDatagrid-headerCell": {
+                  "& .RaDataTable-headerCell": {
                       backgroundColor: "MistyRose",
                   },
               }

docs/ArrayField.md

@@ -9,7 +9,7 @@ title: "The ArrayField Component"
 
 ![ArrayField](./img/array-field.webp)
 
-`<ArrayField>` creates a [`ListContext`](./useListContext.md) with the field value, and renders its children components - usually iterator components like [`<Datagrid>`](./Datagrid.md) or [`<SingleFieldList>`](./SingleFieldList.md).
+`<ArrayField>` creates a [`ListContext`](./useListContext.md) with the field value, and renders its children components - usually iterator components like [`<DataTable>`](./DataTable.md) or [`<SingleFieldList>`](./SingleFieldList.md).
 
 ## Usage
 
@@ -35,13 +35,13 @@ title: "The ArrayField Component"
 }
 ```
 
-Leverage `<ArrayField>` e.g. in a Show view, to display the `tags` as a `<SingleFieldList>` and the `backlinks` as a `<Datagrid>`:
+Leverage `<ArrayField>` e.g. in a Show view, to display the `tags` as a `<SingleFieldList>` and the `backlinks` as a `<DataTable>`:
 
 ```jsx
 import { 
     ArrayField,
     ChipField,
-    Datagrid,
+    DataTable,
     Show,
     SimpleShowLayout,
     SingleFieldList,
@@ -58,11 +58,11 @@ const PostShow = () => (
                 </SingleFieldList>
             </ArrayField>
             <ArrayField source="backlinks">
-                <Datagrid bulkActionButtons={false}>
-                    <TextField source="uuid" />
-                    <TextField source="date" />
-                    <TextField source="url" />
-                </Datagrid>
+                <DataTable bulkActionButtons={false}>
+                    <DataTable.Col source="uuid" />
+                    <DataTable.Col source="date" />
+                    <DataTable.Col source="url" />
+                </DataTable>
             </ArrayField>
         </SimpleShowLayout>
     </Show>
@@ -84,7 +84,7 @@ const PostShow = () => (
 
 ## `children`
 
-`<ArrayField>` renders its `children` component wrapped in a [`<ListContextProvider>`](./useListContext.md). Commonly used child components are [`<Datagrid>`](./Datagrid.md), [`<SingleFieldList>`](./SingleFieldList.md), and [`<SimpleList>`](./SimpleList.md).
+`<ArrayField>` renders its `children` component wrapped in a [`<ListContextProvider>`](./useListContext.md). Commonly used child components are [`<DataTable>`](./DataTable.md), [`<SingleFieldList>`](./SingleFieldList.md), and [`<SimpleList>`](./SimpleList.md).
 
 ```jsx
 {/* using SingleFieldList as child */}
@@ -94,13 +94,13 @@ const PostShow = () => (
     </SingleFieldList>
 </ArrayField>
 
-{/* using Datagrid as child */}
+{/* using DataTable as child */}
 <ArrayField source="backlinks">
-    <Datagrid>
-        <TextField source="uuid" />
-        <TextField source="date" />
-        <TextField source="url" />
-    </Datagrid>
+    <DataTable>
+        <DataTable.Col source="uuid" />
+        <DataTable.Col source="date" />
+        <DataTable.Col source="url" />
+    </DataTable>
 </ArrayField>
 
 {/* using SimpleList as child */}
@@ -159,11 +159,11 @@ You can use the `filter` prop to display only a subset of the items in the array
 {% raw %}
 ```jsx
 <ArrayField source="backlinks" filter={{ date: '2012-08-10T00:00:00.000Z' }}>
-    <Datagrid>
-        <TextField source="uuid" />
-        <TextField source="date" />
-        <TextField source="url" />
-    </Datagrid>
+    <DataTable>
+        <DataTable.Col source="uuid" />
+        <DataTable.Col source="date" />
+        <DataTable.Col source="url" />
+    </DataTable>
 </ArrayField>
 ```
 {% endraw %}
@@ -179,7 +179,7 @@ As `<ArrayField>` creates a [`ListContext`](./useListContext.md), you can use th
 ```jsx
 import { 
     ArrayField,
-    Datagrid,
+    DataTable,
     Pagination,
     Show,
     SimpleShowLayout,
@@ -191,11 +191,11 @@ const PostShow = () => (
         <SimpleShowLayout>
             <TextField source="title" />
             <ArrayField source="backlinks" perPage={5}>
-                <Datagrid>
-                    <TextField source="uuid" />
-                    <TextField source="date" />
-                    <TextField source="url" />
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="uuid" />
+                    <DataTable.Col source="date" />
+                    <DataTable.Col source="url" />
+                </DataTable>
                 <Pagination />
             </ArrayField>
         </SimpleShowLayout>

docs/AuthProviderList.md

@@ -8,6 +8,7 @@ title: "Supported Auth Provider Backends"
 It's very common that your auth logic is so specific that you'll need to write your own `authProvider`. However, the community has built a few open-source Auth Providers that may fit your need:
 
 <div class="providers-list" markdown="1">
+- ![Appwrite Logo](./img/backend-logos/appwrite.svg "Appwrite Logo")**[Appwrite](https://appwrite.io/)**: [marmelab/ra-appwrite](https://github.com/marmelab/ra-appwrite)
 - ![auth0 Logo](./img/backend-logos/auth0.svg "auth0 Logo")**[Auth0 by Okta](https://auth0.com/)**: [marmelab/ra-auth-auth0](https://github.com/marmelab/ra-auth-auth0/blob/main/packages/ra-auth-auth0/Readme.md)
 - ![amplify Logo](./img/backend-logos/amplify.svg "amplify Logo")**[AWS Amplify](https://docs.amplify.aws)**: [MrHertal/react-admin-amplify](https://github.com/MrHertal/react-admin-amplify)
 - ![cognito Logo](./img/backend-logos/aws.png "cognito Logo")**[AWS Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/setting-up-the-javascript-sdk.html)**: [marmelab/ra-auth-cognito](https://github.com/marmelab/ra-auth-cognito/blob/main/packages/ra-auth-cognito/Readme.md)