Merge branch 'master' into update-vite

Author: djhi

CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 5.8.0
+
+* Add `<InPlaceEditor>` for edit-in-place ([#10690](https://github.com/marmelab/react-admin/pull/10690)) ([fzaninotto](https://github.com/fzaninotto))
+* Add `<DataTable>` component ([#10597](https://github.com/marmelab/react-admin/pull/10597)) ([fzaninotto](https://github.com/fzaninotto))
+* Add `<AuthLayout>` to share layout of login page with register & forgot password pages ([#10640](https://github.com/marmelab/react-admin/pull/10640)) ([djhi](https://github.com/djhi))
+* Add support for defaultProps override via theme ([#10655](https://github.com/marmelab/react-admin/pull/10655)) ([djhi](https://github.com/djhi))
+* Add support for MUI v7 ([#10639](https://github.com/marmelab/react-admin/pull/10639)) ([djhi](https://github.com/djhi))
+* Add ability to configure `<Loading>` timeout ([#10689](https://github.com/marmelab/react-admin/pull/10689)) ([WiXSL](https://github.com/WiXSL))
+* Improve `<DeleteButton>` and `<UpdateButton>` confirmation wording using record representation ([#10654](https://github.com/marmelab/react-admin/pull/10654)) ([djhi](https://github.com/djhi))
+* [Doc] Rewrite `<AutocompleteArrayInput>` create doc example ([#10700](https://github.com/marmelab/react-admin/pull/10700)) ([Cimanel](https://github.com/Cimanel))
+* [chore] create-react-admin: Remove sourcemaps from production build ([#10693](https://github.com/marmelab/react-admin/pull/10693)) ([slax57](https://github.com/slax57))
+* Bump json-graphql-server to 3.2.0 ([#10713](https://github.com/marmelab/react-admin/pull/10713)) ([fzaninotto](https://github.com/fzaninotto))
+* Bump react-router from 7.1.1 to 7.5.3 ([#10712](https://github.com/marmelab/react-admin/pull/10712)) ([fzaninotto](https://github.com/fzaninotto))
+
+## 5.7.4
+
+* Fix `<FilterLiveForm>` compatibility with react-hook-form 7.55.0, part 2 ([#10697](https://github.com/marmelab/react-admin/pull/10697)) ([slax57](https://github.com/slax57))
+* Fix `<SelectInput>` shows gap in border when using no label with outlined variant ([#10692](https://github.com/marmelab/react-admin/pull/10692)) ([fzaninotto](https://github.com/fzaninotto))
+* Fix `canAccess` is called even when `disableAuthentication` is `true` ([#10691](https://github.com/marmelab/react-admin/pull/10691)) ([slax57](https://github.com/slax57))
+* [Doc] improve AutocompleteInput create example ([#10696](https://github.com/marmelab/react-admin/pull/10696)) ([Cimanel](https://github.com/Cimanel))
+* [Demo] Fix unneeded check in CRM demo ([#10694](https://github.com/marmelab/react-admin/pull/10694)) ([afilp](https://github.com/afilp))
+* [chore] ESLint: (re)enable import rules ([#10685](https://github.com/marmelab/react-admin/pull/10685)) ([slax57](https://github.com/slax57))
+
 ## 5.7.3
 
 * Fix `<ShowGuesser>` print incorrect code for reference arrays ([#10682](https://github.com/marmelab/react-admin/pull/10682)) ([djhi](https://github.com/djhi))

cypress/e2e/list.cy.js

@@ -254,7 +254,7 @@ describe('List Page', () => {
                 .should(el => expect(el).to.have.attr('aria-expanded', 'true'))
                 .should(el => expect(el).to.have.attr('aria-label', 'Close'));
 
-            cy.get('#13-expand').should(el =>
+            cy.get('#posts-13-expand').should(el =>
                 expect(el).to.contain(
                     'Curabitur eu odio ullamcorper, pretium sem at, blandit libero. Nulla sodales facilisis libero, eu gravida tellus ultrices nec. In ut gravida mi. Vivamus finibus tortor tempus egestas lacinia. Cras eu arcu nisl. Donec pretium dolor ipsum, eget feugiat urna iaculis ut.'
                 )
@@ -269,7 +269,7 @@ describe('List Page', () => {
                 .should(el => expect(el).to.have.attr('aria-expanded', 'true'))
                 .should(el => expect(el).to.have.attr('aria-label', 'Close'));
 
-            cy.get('#13-expand').should(el => expect(el).to.exist);
+            cy.get('#posts-13-expand').should(el => expect(el).to.exist);
             cy.wait(500); // Ensure animations are done
 
             cy.get('[aria-label="Expand"]')
@@ -278,7 +278,7 @@ describe('List Page', () => {
                 .should(el => expect(el).to.have.attr('aria-expanded', 'true'))
                 .should(el => expect(el).to.have.attr('aria-label', 'Close'));
 
-            cy.get('#12-expand').should(el => expect(el).to.exist);
+            cy.get('#posts-12-expand').should(el => expect(el).to.exist);
 
             let all_labels = [13, 12, 11, 10, 9, 8, 7, 6, 4, 2];
 
@@ -294,7 +294,9 @@ describe('List Page', () => {
             cy.get('[aria-label="Expand"]').eq(0).click();
 
             all_labels.forEach(label => {
-                cy.get(`#${label}-expand`).should(el => expect(el).to.exist);
+                cy.get(`#posts-${label}-expand`).should(
+                    el => expect(el).to.exist
+                );
             });
         });
     });

cypress/support/ListPage.js

@@ -13,8 +13,8 @@ export default url => ({
         nextPage: "button[aria-label='Go to next page']",
         previousPage: "button[aria-label='Go to previous page']",
         pageNumber: n => `button[aria-label='Go to page ${n}']`,
-        recordRows: '.datagrid-body tr',
-        viewsColumn: '.datagrid-body tr td:nth-child(8)',
+        recordRows: '.datatable-body tr.RaDataTable-row',
+        viewsColumn: '.datatable-body tr td:nth-child(8)',
         datagridHeaders: 'th',
         sortBy: name => `th span[data-field="${name}"]`,
         svg: (name, criteria = '') =>

docs/AppTheme.md

@@ -356,6 +356,24 @@ const theme = deepmerge(defaultTheme, {
 });
 ```
 
+This also works with many React Admin components. For instance, here's how to change the icon for all `<SaveButton>`:
+
+```tsx
+import { defaultTheme } from 'react-admin';
+import { deepmerge } from '@mui/utils';
+import CheckIcon from '@mui/icons-material/Check';
+
+const theme = deepmerge(defaultTheme, {
+    components: {
+        RaSaveButton: {
+            defaultProps: {
+                icon: <CheckIcon />,
+            },
+        },
+    }
+});
+```
+
 ## Customizing The Sidebar Width
 
 You can specify the `Sidebar` width by setting the `width` and `closedWidth` properties on your custom Material UI theme:
@@ -423,10 +441,11 @@ A `theme` object can contain the following keys:
 
 **Tip**: Check [Material UI default theme documentation](https://mui.com/material-ui/customization/default-theme/) to see the default values and meaning for these keys.
 
-```jsx
+```tsx
 import { lime, purple } from '@mui/material/colors';
+import type { ThemeOptions } from '@mui/material';
 
-const theme = {
+const theme: ThemeOptions = {
   palette: {
     primary: {
       main: '#FF5733',
@@ -514,10 +533,10 @@ const myTheme = deepmerge(defaultTheme, {
 Here is the default theme:
 
 ```tsx
-import { RaThemeOptions } from './types';
+import type { ThemeOptions } from '@mui/material';
 import { deepmerge } from '@mui/utils';
 
-const defaultThemeInvariants = {
+const defaultThemeInvariants: ThemeOptions = {
     typography: {
         h6: {
             fontWeight: 400,
@@ -578,7 +597,7 @@ const defaultThemeInvariants = {
     },
 };
 
-export const defaultLightTheme: RaThemeOptions = deepmerge(
+export const defaultLightTheme: ThemeOptions = deepmerge(
     defaultThemeInvariants,
     {
         palette: {
@@ -607,7 +626,7 @@ export const defaultLightTheme: RaThemeOptions = deepmerge(
     }
 );
 
-export const defaultDarkTheme: RaThemeOptions = deepmerge(
+export const defaultDarkTheme: ThemeOptions = deepmerge(
     defaultThemeInvariants,
     {
         palette: {
@@ -623,5 +642,4 @@ export const defaultDarkTheme: RaThemeOptions = deepmerge(
 );
 
 export const defaultTheme = defaultLightTheme;
-
 ```

docs/Architecture.md

@@ -246,7 +246,11 @@ const DeleteButton = () => {
                 loading={isPending}
                 title="ra.message.delete_title"
                 content="ra.message.delete_content"
-                translateOptions={{
+                titleTranslateOptions={{
+                    name: resource,
+                    id: record.id,
+                }}
+                contentTranslateOptions={{
                     name: resource,
                     id: record.id,
                 }}

docs/AutocompleteArrayInput.md

@@ -714,20 +714,23 @@ Use the `create` prop when you want a more polished or complex UI. For example a
 import {
     AutocompleteArrayInput,
     Create,
+    CreateBase,
     ReferenceArrayInput,
     SimpleForm,
     TextInput,
     useCreate,
     useCreateSuggestionContext
 } from 'react-admin';
 
+import CloseIcon from '@mui/icons-material/Close';
 import {
     Box,
     BoxProps,
     Button,
     Dialog,
-    DialogActions,
     DialogContent,
+    DialogTitle,
+    IconButton,
     TextField,
 } from '@mui/material';
 
@@ -746,43 +749,45 @@ const PostCreate = () => {
 
 const CreateTag = () => {
     const { filter, onCancel, onCreate } = useCreateSuggestionContext();
-    const [value, setValue] = React.useState(filter || '');
-    const [create] = useCreate();
-
-    const handleSubmit = event => {
-        event.preventDefault();
-        create(
-            'tags',
-            {
-                data: {
-                    title: value,
-                },                
-            },
-            {
-                onSuccess: (data) => {
-                    setValue('');
-                    onCreate(data);
-                },
-            }
-        );
+   
+    const onTagCreate = tag => {
+        onCreate(tag);
     };
 
     return (
         <Dialog open onClose={onCancel}>
-            <form onSubmit={handleSubmit}>
-                <DialogContent>
-                    <TextField
-                        label="New tag"
-                        value={value}
-                        onChange={event => setValue(event.target.value)}
-                        autoFocus
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <Button type="submit">Save</Button>
-                    <Button onClick={onCancel}>Cancel</Button>
-                </DialogActions>
-            </form>
+            <DialogTitle sx={{ m: 0, p: 2 }}>Create Author</DialogTitle>
+            <IconButton
+                aria-label="close"
+                onClick={onCancel}
+                sx={theme => ({
+                    position: 'absolute',
+                    right: 8,
+                    top: 8,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
+            <DialogContent sx={{ p: 0 }}>
+                <CreateBase
+                    redirect={false}
+                    resource="tags"
+                    mutationOptions={{
+                        onSuccess: tag => {
+                            onTagCreate(tag);
+                        },
+                    }}
+                >
+                    <SimpleForm defaultValues={{ name: filter }}>
+                        <TextInput
+                            source="name"
+                            helperText={false}
+                            autoFocus
+                        />
+                    </SimpleForm>
+                </CreateBase>
+            </DialogContent>
         </Dialog>
     );
 };