Merge branch 'next' into resource-specific-translations

Author: djhi

.github/workflows/test.yml

@@ -166,43 +166,6 @@ jobs:
       - name: Build crm
         run: make build-crm
 
-  greenframe:
-    runs-on: ubuntu-latest
-    name: GreenFrame
-    needs: [e-commerce]
-    if: github.event_name == 'push' && github.ref_type == 'tag' && contains(github.ref, 'refs/tags/v') && !contains('beta', github.ref) && !contains('alpha', github.ref)
-    steps:
-      # To use this repository's private action,
-      # you must check out the repository
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 2 # Fetch HEAD^ to enable git comparison
-      - name: Use Node.js LTS
-        uses: actions/setup-node@v4
-        with:
-          node-version: '22.x'
-          cache: 'yarn'
-      - name: Install dependencies
-        run: yarn
-      - name: Download demo build
-        uses: actions/download-artifact@v4
-        with:
-          name: demo-build
-      - name: Unzip demo build
-        run: unzip -o -u demo-build.zip
-      - name: Run e-commerce
-        # Run the demo in production mode
-        run: cd ./examples/demo/dist && python3 -m http.server 4173 &
-      - name: Install GreenFrame CLI
-        run: curl https://assets.greenframe.io/install.sh | bash
-        shell: bash
-      - name: Run GreenFrame Analysis
-        env:
-          GREENFRAME_SECRET_TOKEN: ${{secrets.GREENFRAME_SECRET_TOKEN}}
-        run: greenframe analyze -C .greenframe.yml --branchName master
-        shell: bash
-
   create-react-admin:
     runs-on: ubuntu-latest
     name: create-react-admin

CHANGELOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+## 5.8.4
+
+* Replace `Datagrid` by `DataTable` in Guessers ([#10754](https://github.com/marmelab/react-admin/pull/10754)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* Fix `<DataTable>` crashes when its data is not a React primitive ([#10777](https://github.com/marmelab/react-admin/pull/10777)) ([djhi](https://github.com/djhi))
+* Fix(show/edit): Avoid a redirect loop when `useGetOne` returns an error in `shadcn-admin-kit` ([#10776](https://github.com/marmelab/react-admin/pull/10776)) ([jonathanarnault](https://github.com/jonathanarnault))
+* Fix disabled `<BooleanInput>` ([#10773](https://github.com/marmelab/react-admin/pull/10773)) ([Madeorsk](https://github.com/Madeorsk))
+* Fix: avoid an infinite loop when loading the demo apps for the first time ([#10769](https://github.com/marmelab/react-admin/pull/10769)) ([jonathanarnault](https://github.com/jonathanarnault))
+* Fix `<SaveButton>` is not enabled when the form is prefilled (from `<CloneButton>` for instance) ([#10765](https://github.com/marmelab/react-admin/pull/10765)) ([djhi](https://github.com/djhi))
+* [chore] Add spinner while installing dependencies in `create-react-admin` ([#10778](https://github.com/marmelab/react-admin/pull/10778)) ([djhi](https://github.com/djhi))
+* [Doc] Rename `convertRaMessagesToI18next` to `convertRaTranslationsToI18next` ([#10774](https://github.com/marmelab/react-admin/pull/10774)) ([Madeorsk](https://github.com/Madeorsk))
+* [Doc] Fix videos in `<DataTable>` docs ([#10775](https://github.com/marmelab/react-admin/pull/10775)) ([Madeorsk](https://github.com/Madeorsk))
+
+## 5.8.3
+
+* Fix potential prototype-polluting assignment in `ra-data-local-storage` ([#10758](https://github.com/marmelab/react-admin/pull/10758)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Document that `optionValue` only works with the `choices` prop ([#10760](https://github.com/marmelab/react-admin/pull/10760)) ([slax57](https://github.com/slax57))
+* [Doc] Fix typo in `<SelectInput>` disabled choice example ([#10753](https://github.com/marmelab/react-admin/pull/10753)) ([notz](https://github.com/notz))
+* [Doc] Fix create-react-admin instructions when using yarn ([#10752](https://github.com/marmelab/react-admin/pull/10752)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* [Doc] Update `<AutoPersistInStore>` implementation explanation ([#10751](https://github.com/marmelab/react-admin/pull/10751)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* [Doc] Add a new third-party component `huyanhvn/react-admin-clipboard-field` ([#10736](https://github.com/marmelab/react-admin/pull/10736)) ([huyanhvn](https://github.com/huyanhvn))
+
+## 5.8.2
+
+* Fix `<AutocompleteInput>` with `optionValue` and create raises a React warning ([#10747](https://github.com/marmelab/react-admin/pull/10747)) ([slax57](https://github.com/slax57))
+* Fix `useInfiniteListController` does not return response `meta` ([#10746](https://github.com/marmelab/react-admin/pull/10746)) ([slax57](https://github.com/slax57))
+* Fix `create-react-admin --help` does not show help consistently ([#10744](https://github.com/marmelab/react-admin/pull/10744)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* Fix compatibility of unit tests with react-hook-form 7.56.x ([#10742](https://github.com/marmelab/react-admin/pull/10742)) ([slax57](https://github.com/slax57))
+* Fix outlined inputs when label is false ([#10740](https://github.com/marmelab/react-admin/pull/10740)) ([fzaninotto](https://github.com/fzaninotto))
+* Fix `<SelectArrayInput>` sanitizes unused props ([#10739](https://github.com/marmelab/react-admin/pull/10739)) ([ghadabezine](https://github.com/ghadabezine))
+* Fix `Arrayinput` multiple reset ([#10716](https://github.com/marmelab/react-admin/pull/10716)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* Fix MUI7 compatibility by not using deprecated system props ([#10680](https://github.com/marmelab/react-admin/pull/10680)) ([smeng9](https://github.com/smeng9))
+* [Doc] Fix remaining `<AutocompleteArrayInput>` and `<SelectArrayInput>` `create` examples ([#10741](https://github.com/marmelab/react-admin/pull/10741)) ([slax57](https://github.com/slax57))
+* [Doc] Document how to pass extra options to create-react-admin when using npm create ([#10737](https://github.com/marmelab/react-admin/pull/10737)) ([slax57](https://github.com/slax57))
+* [tips] Backport last AgGrid tips ([#10731](https://github.com/marmelab/react-admin/pull/10731)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+
+## 5.8.1
+
+* Fix `<Confirm>` ignore simple string `title` and `content` props ([#10723](https://github.com/marmelab/react-admin/pull/10723)) ([djhi](https://github.com/djhi))
+* Fix `<AutocompleteInput>` and `<SelectInput>` renders undefined instead of the `createLabel` when `optionText` is a function or a `recordRepresentation` is set ([#10715](https://github.com/marmelab/react-admin/pull/10715)) ([slax57](https://github.com/slax57))
+* [Doc] Fix documentation build ([#10730](https://github.com/marmelab/react-admin/pull/10730)) ([djhi](https://github.com/djhi))
+* [Doc] Fix documentation deployment for previous versions navigation ([#10725](https://github.com/marmelab/react-admin/pull/10725)) ([djhi](https://github.com/djhi))
+* [DOC] Rewrite select array input create doc ([#10711](https://github.com/marmelab/react-admin/pull/10711)) ([Cimanel](https://github.com/Cimanel))
+* [DOC] selectInput create example + storie ([#10710](https://github.com/marmelab/react-admin/pull/10710)) ([Cimanel](https://github.com/Cimanel))
+* [Demo] Fix theme switching ([#10732](https://github.com/marmelab/react-admin/pull/10732)) ([djhi](https://github.com/djhi))
+* [chore] Upgrade vite ([#10660](https://github.com/marmelab/react-admin/pull/10660)) ([djhi](https://github.com/djhi))
+* Bump vite from 6.2.6 to 6.2.7 ([#10726](https://github.com/marmelab/react-admin/pull/10726)) ([dependabot[bot]](https://github.com/apps/dependabot))
+
 ## 5.8.0
 
 * Add `<InPlaceEditor>` for edit-in-place ([#10690](https://github.com/marmelab/react-admin/pull/10690)) ([fzaninotto](https://github.com/fzaninotto))

docs/Architecture.md

@@ -219,9 +219,9 @@ Although this drawback exists, we accept it because the use of composition in re
 
 ## Hooks
 
-When you find that you cannot tweak a react-admin component using props, you can always turn to the lower-level API: hooks. In fact, react-admin is built on top of a headless library called `ra-core`, which primarily consists of hooks. These hooks hide the framework's implementation details, allowing you to focus on your business logic. It's perfectly normal to use react-admin hooks in your own components if the default UI doesn't meet your specific requirements.
+When you find that you cannot tweak a react-admin component using props, you can always turn to the lower-level API: hooks. In fact, the core of react-admin is a headless library called `ra-core`, which primarily consists of hooks. These hooks hide the framework's implementation details, allowing you to focus on your business logic. It's perfectly normal to use react-admin hooks in your own components if the default UI doesn't meet your specific requirements.
 
-For example, the `<DeleteWithConfirmButton>` button renders a confirmation dialog when clicked and then calls the `dataProvider.delete()` method for the current record. If you want the same feature but with a different UI, you can use the `useDeleteWithConfirmController` hook:
+For example, the `<DeleteButton>` button used in `pessimistic` mode renders a confirmation dialog when clicked and then calls the `dataProvider.delete()` method for the current record. If you want the same feature but with a different UI, you can use the `useDeleteWithConfirmController` hook:
 
 {% raw %}
 ```jsx
@@ -269,7 +269,7 @@ The fact that hook names often end with `Controller` is intentional and reflects
 - The view logic is managed by React components (e.g. `<List>`).
 - The model logic is left to the developer, and react-admin simply defines the interface that the model must expose through its Providers.
 
-React-admin exposes [dozens of hooks](./Reference.md#hooks) to assist you in building your own components. You can even construct an entire react-admin application without relying on the Material UI components and use a different UI kit if desired. This flexibility allows you to tailor the application to your specific needs and preferences.
+React-admin exposes [dozens of hooks](./Reference.md#hooks) to assist you in building your own components. You can even construct an entire react-admin application without relying on the Material UI components and use a different UI kit if desired (see for instance [shadcn-admin-kit](https://github.com/marmelab/shadcn-admin-kit), a library for building admin apps with Shadcn UI). This flexibility allows you to tailor the application to your specific needs and preferences.
 
 ## Context: Pull, Don't Push
 

docs/AutoPersistInStore.md

@@ -5,16 +5,16 @@ title: "The AutoPersistInStore Component"
 
 # `<AutoPersistInStore>`
 
-This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon" src="./img/premium.svg" alt="React Admin Enterprise Edition icon" /> component prevents data loss in forms by automatically saving the form data in the store when users navigate away from the page. When users return to the page, it reapplies the saved data to the form.
+This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon" src="./img/premium.svg" alt="React Admin Enterprise Edition icon" /> component prevents data loss in forms by automatically saving the form data in the store when users update it. When users return to the page, it reapplies the saved data to the form.
 
 <video controls autoplay playsinline muted loop>
   <source src="./img/AutoPersistInStore.mp4" type="video/mp4"/>
   Your browser does not support the video tag.
 </video>
 
-The temporary form data is only saved when the user navigates away from the page, and it is removed when the user submits the form or closes the tab. Users can opt out of the prefilling by clicking the "Cancel" button in the notification.
+The temporary form data is saved on change, and it is removed when the user submits the form or closes the tab. Users can opt out of the prefilling by clicking the "Cancel" button in the notification.
 
-Saved data is not sent to the server. It is only persisted using the [store](./Store.md) and is removed when the user logs out. 
+Saved data is not sent to the server. It is only persisted using the [store](./Store.md) and is removed when the user logs out.
 
 ## Usage
 
@@ -35,15 +35,15 @@ const PostEdit = () => (
 );
 ```
 
-The component will automatically save the form data in the store on unmount and reapply it when the form is mounted again.
+The component will automatically save the form data in the store on change and reapply it when the form is mounted again.
 
 It works both on create and edit forms.
 
 ## Props
 
-| Prop                  | Required | Type       | Default                                                  | Description                                                   |
-| --------------------- | -------- | ---------- | -------------------------------------------------------- | ------------------------------------------------------------- |
-| `getStoreKey`         | -        | `function` | -                                                        | Function to use your own store key.                           |
+| 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`
@@ -68,10 +68,9 @@ You can override this key by passing a custom function as the `getStoreKey` prop
 />
 ```
 
-
 ## `notificationMessage`
 
-When `<AutoPersistInStore>` component applies the changes from the store to a form, react-admin informs users with a notification. 
+When `<AutoPersistInStore>` component applies the changes from the store to a form, react-admin informs users with a notification.
 
 The default notification message is `ra-form-layout.auto_persist_in_store.applied_changes`, which is translated using the i18n provider (the default English translation is `Applied previous unsaved changes`).
 

docs/AutocompleteArrayInput.md

@@ -147,65 +147,68 @@ To allow users to add new options, pass a React element as the `create` prop. `<
 
 {% raw %}
 ```jsx
-import { CreateRole } from './CreateRole';
-
-const choices = [
-    { id: 'admin', name: 'Admin' },
-    { id: 'u001', name: 'Editor' },
-    { id: 'u002', name: 'Moderator' },
-    { id: 'u003', name: 'Reviewer' },
-];
+import {
+    AutocompleteArrayInput,
+    Create,
+    CreateBase,
+    ReferenceArrayInput,
+    SimpleForm,
+    TextInput,
+    useCreateSuggestionContext
+} from 'react-admin';
+import CloseIcon from '@mui/icons-material/Close';
+import {
+    Dialog,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+} from '@mui/material';
 
 const UserCreate = () => (
     <Create>
         <SimpleForm>
-            <AutocompleteArrayInput
-                source="roles"
-                choices={choices}
-                create={<CreateRole />}
-            />
+            <ReferenceArrayInput source="roles" reference="roles">
+                <AutocompleteArrayInput create={<CreateRole />} />
+            </ReferenceArrayInput>
         </SimpleForm>
     </Create>
 );
 
-// in ./CreateRole.js
-import { useCreateSuggestionContext } from 'react-admin';
-import {
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    TextField,
-} from '@mui/material';
-
 const CreateRole = () => {
     const { filter, onCancel, onCreate } = useCreateSuggestionContext();
-    const [value, setValue] = React.useState(filter || '');
-
-    const handleSubmit = event => {
-        event.preventDefault();
-        const newOption = { id: value, name: value };
-        choices.push(newOption);
-        setValue('');
-        onCreate(newOption);
-    };
 
     return (
         <Dialog open onClose={onCancel}>
-            <form onSubmit={handleSubmit}>
-                <DialogContent>
-                    <TextField
-                        label="Role name"
-                        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 Role</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="roles"
+                    mutationOptions={{
+                        onSuccess: onCreate,
+                    }}
+                >
+                    <SimpleForm defaultValues={{ name: filter }}>
+                        <TextInput
+                            source="name"
+                            helperText={false}
+                            autoFocus
+                        />
+                    </SimpleForm>
+                </CreateBase>
+            </DialogContent>
         </Dialog>
     );
 };
@@ -492,6 +495,8 @@ const choices = [
 <AutocompleteArrayInput source="roles" choices={choices} optionValue="_id" />
 ```
 
+**Note:** `optionValue` is only supported when the choices are provided directly via the `choices` prop. If you use `<AutocompleteArrayInput>` inside a `<ReferenceArrayInput>`, the `optionValue` is always set to `id`, as the choices are records fetched from the related resource, and [records should always have an `id` field](./FAQ.md#can-i-have-custom-identifiersprimary-keys-for-my-resources).
+
 ## `shouldRenderSuggestions`
 
 When dealing with a large amount of `choices` you may need to limit the number of suggestions that are rendered in order to maintain acceptable performance. `shouldRenderSuggestions` is an optional prop that allows you to set conditions on when to render suggestions. An easy way to improve performance would be to skip rendering until the user has entered 2 or 3 characters in the search box. This lowers the result set significantly and might be all you need (depending on your data set).
@@ -718,20 +723,14 @@ import {
     ReferenceArrayInput,
     SimpleForm,
     TextInput,
-    useCreate,
     useCreateSuggestionContext
 } from 'react-admin';
-
 import CloseIcon from '@mui/icons-material/Close';
 import {
-    Box,
-    BoxProps,
-    Button,
     Dialog,
     DialogContent,
     DialogTitle,
     IconButton,
-    TextField,
 } from '@mui/material';
 
 const PostCreate = () => {
@@ -749,10 +748,6 @@ const PostCreate = () => {
 
 const CreateTag = () => {
     const { filter, onCancel, onCreate } = useCreateSuggestionContext();
-   
-    const onTagCreate = tag => {
-        onCreate(tag);
-    };
 
     return (
         <Dialog open onClose={onCancel}>
@@ -774,9 +769,7 @@ const CreateTag = () => {
                     redirect={false}
                     resource="tags"
                     mutationOptions={{
-                        onSuccess: tag => {
-                            onTagCreate(tag);
-                        },
+                        onSuccess: onCreate,
                     }}
                 >
                     <SimpleForm defaultValues={{ name: filter }}>