[SimpleList] deprecate linkType, and implement rowClick as for the DataGrid

.github/ISSUE_TEMPLATE/Bug_report.md

@@ -22,6 +22,8 @@ about: Something isn't working as expected. Please tell us!
 <!-- If you are able to illustrate the bug or feature request with an example, please provide a sample application via one of the following means: -->
 
 * Preferably, a sandbox forked from 
+  - https://codesandbox.io/p/github/marmelab/react-admin-sandbox/main (v5)
+
   - https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple (v5)
   - https://stackblitz.com/github/marmelab/react-admin/tree/4.x/examples/simple (v4)
 * A link to a GitHub repo with the minimal codebase to reproduce the issue

docs/ArrayInput.md

@@ -79,6 +79,8 @@ Check [the `<SimpleFormIterator>` documentation](./SimpleFormIterator.md) for de
 
 **Tip**: If you need to edit an array of *related* records, i.e. if the `items` above actually come from another resource, you should use a [`<ReferenceManyInput>`](./ReferenceManyInput.md) instead.
 
+**Note**: Using [`shouldUnregister`](https://react-hook-form.com/docs/useform#shouldUnregister) should be avoided when using `<ArrayInput>` (which internally uses `useFieldArray`) as the unregister function gets called after input unmount/remount and reorder. This limitation is mentioned in the react-hook-form [documentation](https://react-hook-form.com/docs/usecontroller#props). If you are in such a situation, you can use the [`transform`](https://marmelab.com/react-admin/Edit.html#transform) prop to manually clean the submitted values.
+
 ## Props
 
 `<ArrayInput>` accepts the [common input props](./Inputs.md#common-input-props) (except `format` and `parse`).

docs/Authentication.md

@@ -416,7 +416,7 @@ export const dataProvider = addRefreshAuthToDataProvider(baseDataProvider, refre
 
 ## Authorization
 
-Access control and permissions allow you to restrict certain pages to specific users. React-admin provides powerful primitives for implementing authorization logic. For detailed guidance, check out the [Authorization](./Authorization.md) documentation.
+Access control and permissions allow you to restrict certain pages to specific users. React-admin provides powerful primitives for implementing authorization logic. For detailed guidance, check out the [Authorization](./Permissions.md) documentation.
 
 <video controls autoplay muted loop>
   <source src="./img/AccessControl.mp4" type="video/mp4"/>

docs/AutocompleteArrayInput.md

@@ -60,8 +60,8 @@ The form value for the source must be an array of the selected values, e.g.
 |----------------------------|----------|-----------------------|--------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `choices`                  | Required | `Object[]`            | -                        | List of choices                                                   |
 | `create`                   | Optional | `Element`             | `-`                      | A React Element to render when users want to create a new choice                                                                       |
-| `createLabel`              | Optional | `string`              | `ra.action. create`       | The label for the menu item allowing users to create a new choice. Used when the filter is empty                                       |
-| `createItemLabel`          | Optional | `string`              | `ra.action .create_item` | The label for the menu item allowing users to create a new choice. Used when the filter is not empty                                                    |
+| `createLabel`              | Optional | `string`              | -                        | The label used as hint to let users know they can create a new choice. Displayed when the filter is empty.                                       |
+| `createItemLabel`          | Optional | `string`              | `ra.action .create_item` | The label for the menu item allowing users to create a new choice. Used when the filter is not empty.                                                    |
 | `debounce`                 | Optional | `number`              | `250`                    | The delay to wait before calling the setFilter function injected when used in a ReferenceArray Input.                                                         |
 | `emptyValue`               | Optional | `any`                 | `''`                     | The value to use for the empty element                                                                                                                  |
 | `filterToQuery`            | Optional | `string` => `Object`  | `q => ({ q })`           | How to transform the searchText into a parameter for the data provider                                                                                  |
@@ -159,7 +159,7 @@ const choices = [
 const UserCreate = () => (
     <Create>
         <SimpleForm>
-            <SelectArrayInput
+            <AutocompleteArrayInput
                 source="roles"
                 choices={choices}
                 create={<CreateRole />}
@@ -216,6 +216,37 @@ If you just need to ask users for a single string to create the new option, you
 
 If you're in a `<ReferenceArrayInput>` or `<ReferenceManyToManyInput>`, the `handleSubmit` will need to create a new record in the related resource. Check the [Creating New Choices](#creating-new-choices) for an example. 
 
+## `createLabel`
+
+When you set the `create` or `onCreate` prop, `<AutocompleteArrayInput>` lets users create new options.
+You can use the `createLabel` prop to render an additional (disabled) menu item at the bottom of the list, that will only appear when the input is empty, inviting users to start typing to create a new option.
+
+```jsx
+<AutocompleteArrayInput
+    source="roles"
+    choices={choices}
+    create={<CreateRole />}
+    createLabel="Start typing to create a new item"
+/>
+```
+
+## `createItemLabel`
+
+If you set the `create` or `onCreate` prop, `<AutocompleteArrayInput>` lets users create new options. When the text entered by the user doesn't match any option, the input renders a "Create XXX" menu item at the bottom of the list.
+
+You can customize the label of that menu item by setting a custom translation for the `ra.action.create_item` key in the translation files.
+
+Or, if you want to customize it just for this `<AutocompleteArrayInput>`, use the `createItemLabel` prop:
+
+```jsx
+<AutocompleteArrayInput
+    source="roles"
+    choices={choices}
+    create={<CreateRole />}
+    createItemLabel="Add a new role: %{item}"
+/>
+```
+
 ## `debounce`
 
 When used inside a [`<ReferenceArrayInput>`](./ReferenceArrayInput.md), `<AutocompleteArrayInput>` will call `dataProvider.getList()` with the current input value as filter after a delay of 250ms. This is to avoid calling the API too often while users are typing their query.

docs/AutocompleteInput.md

@@ -60,8 +60,8 @@ The form value for the source must be the selected value, e.g.
 |--------------------------- |----------|---------------------- |---------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `choices`                  | Optional | `Object[]`            | `-`                                                                 | List of items to autosuggest. Required if not inside a ReferenceInput.                                                                                                                                              |
 | `create`                   | Optional | `Element`             | `-`                                                                 | A React Element to render when users want to create a new choice                                                                                                                                                    |
-| `createLabel`              | Optional | `string`              | `ra.action .create`                                                 | The label for the menu item allowing users to create a new choice. Used when the filter is empty                                                                                                                    |
-| `createItemLabel`          | Optional | `string`              | `ra.action .create_item`                                            | The label for the menu item allowing users to create a new choice. Used when the filter is not empty                                                                                                                |
+| `createLabel`              | Optional | `string`              | -                                                                   | The label used as hint to let users know they can create a new choice. Displayed when the filter is empty.                                                                                                                    |
+| `createItemLabel`          | Optional | `string`              | `ra.action .create_item`                                            | The label for the menu item allowing users to create a new choice. Used when the filter is not empty.                                                                                                                |
 | `debounce`                 | Optional | `number`              | `250`                                                               | The delay to wait before calling the setFilter function injected when used in a ReferenceInput.                                                                                                                     |
 | `emptyText`                | Optional | `string`              | `''`                                                                | The text to use for the empty element                                                                                                                                                                               |
 | `emptyValue`               | Optional | `any`                 | `''`                                                                | The value to use for the empty element                                                                                                                                                                              |
@@ -226,7 +226,7 @@ If you just need to ask users for a single string to create the new option, you
 ## `createLabel`
 
 When you set the `create` or `onCreate` prop, `<AutocompleteInput>` lets users create new options.
-You can use the `createLabel` prop to render an additional menu item at the bottom of the list, that will only appear when the input is empty, inviting users to start typing to create a new option.
+You can use the `createLabel` prop to render an additional (disabled) menu item at the bottom of the list, that will only appear when the input is empty, inviting users to start typing to create a new option.
 
 ![Create Label](./img/AutocompleteInput-createLabel.png)
 

docs/DataProviderList.md

@@ -20,6 +20,7 @@ If you can't find a Data Provider for your backend below, no worries! [Writing a
 * ![corebos Logo](./img/backend-logos/corebos.png "corebos Logo")**[coreBOS](https://corebos.com/)**: [React-Admin coreBOS Integration](https://github.com/coreBOS/reactadminportal)
 * ![directus Logo](./img/backend-logos/directus.svg "directus Logo")**[Directus](https://directus.io/)**: [marmelab/ra-directus](https://github.com/marmelab/ra-directus/blob/main/packages/ra-directus/Readme.md)
 * ![django Logo](./img/backend-logos/django.png "django Logo")**[Django Rest Framework](https://www.django-rest-framework.org/)**: [bmihelac/ra-data-django-rest-framework](https://github.com/bmihelac/ra-data-django-rest-framework)
+* ![Eicrud Logo](./img/backend-logos/eicrud.svg "EiCrud Logo")**[Eicrud](https://github.com/eicrud/eicrud)**: [danyalutsevich/ra-data-eicrud](https://github.com/danyalutsevich/ra-data-eicrud)
 * ![eve Logo](./img/backend-logos/eve.png "eve Logo")**[Eve](https://docs.python-eve.org/en/stable/)**: [smeng9/ra-data-eve](https://github.com/smeng9/ra-data-eve)
 * ![Express Mangoose Logo](./img/backend-logos/github.svg "Express Mangoose Logo")**[Express & Mongoose](https://github.com/NathanAdhitya/express-mongoose-ra-json-server)**: [NathanAdhitya/express-mongoose-ra-json-server](https://github.com/NathanAdhitya/express-mongoose-ra-json-server)
 * ![Express Sequelize Logo](./img/backend-logos/github.svg "Express Sequelize Logo")**[Express & Sequelize](https://github.com/lalalilo/express-sequelize-crud)**: [express-sequelize-crud](https://github.com/lalalilo/express-sequelize-crud)

docs/DatagridAG.md

@@ -107,7 +107,38 @@ Here are the important things to note:
 
 -   You need to import the ag-grid stylesheets `ag-grid.css` and `ag-theme-alpine.css`.
 -   The columns are defined using the `columnDefs` prop. See [the dedicated doc section](#columndefs) for more information.
--   [`<InfiniteList>`](./InfiniteList.md) is not supported.
+
+### Usage Inside An `<InfiniteList>`
+
+`<DatagridAG>` also supports being used as a child of a react-admin [`<InfiniteList>`](./InfiniteList.md).
+
+It only requires setting the `pagination` prop to `false`, because `<DatagridAG>` will itself detect when it needs to fetch more data, and the `<InfiniteList>` default pagination component would conflict with this behavior.
+
+```tsx
+import '@ag-grid-community/styles/ag-grid.css';
+import '@ag-grid-community/styles/ag-theme-alpine.css';
+import React from 'react';
+import { InfiniteList } from 'react-admin';
+import { DatagridAG } from '@react-admin/ra-datagrid-ag';
+
+export const PostList = () => {
+    const columnDefs = [
+        { field: 'title' },
+        { field: 'published_at' },
+        { field: 'body' },
+    ];
+    return (
+        <InfiniteList pagination={false}>
+            <DatagridAG columnDefs={columnDefs} />
+        </InfiniteList>
+    );
+};
+```
+
+<video controls autoplay playsinline muted loop>
+  <source src="https://react-admin-ee.marmelab.com/assets/DatagridAG-infinite.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
 
 ### Filter Syntax
 

docs/DateInput.md

@@ -26,7 +26,18 @@ import { DateInput } from 'react-admin';
 <DateInput source="published_at" />
 ```
 
-The field value must be a string with the pattern `YYYY-MM-DD` (ISO 8601), e.g. `'2022-04-30'`.
+The field value must be a string using the pattern `YYYY-MM-DD` (ISO 8601), e.g. `'2022-04-30'`. The returned input value will also be in this format, regardless of the browser locale.
+
+`<DateInput>` also accepts values that can be converted to a `Date` object, such as:
+
+- a localized date string (e.g. `'30/04/2022'`),
+- an ISO date string (e.g. `'2022-04-30T00:00:00.000Z'`),
+- a `Date` object, or
+- a Linux timestamp (e.g. `1648694400000`).
+
+In these cases, `<DateInput>` will automatically convert the value to the `YYYY-MM-DD` format. 
+
+**Note**: This conversion may change the date because of timezones. For example, the date string `'2022-04-30T00:00:00.000Z'` in Europe may be displayed as `'2022-04-29'` in Honolulu. If this is not what you want, pass your own [`parse`](./Inputs.md#parse) function to `<DateInput>`.
 
 ## Props
 

docs/Demos.md

@@ -265,7 +265,7 @@ Atomic CRM is a complete CRM app allowing to manage contacts, companies, deals,
 
 The source shows how to implement the following features:
 
-- [Horizontal navigation](https://github.com/marmelab/react-admin/blob/master/examples/crm/src/Layout.tsx)
+- [Horizontal navigation](https://github.com/marmelab/react-admin/blob/master/examples/crm/src/layout/Layout.tsx)
 - [Custom exporter](https://github.com/marmelab/react-admin/blob/master/examples/crm/src/contacts/ContactList.tsx)
 - [Trello-like Kanban board for the deals pipeline](https://github.com/marmelab/react-admin/blob/master/examples/crm/src/deals/DealListContent.tsx)
 - [Custom d3.js / Nivo Chart in the dashboard](https://github.com/marmelab/react-admin/blob/master/examples/crm/src/dashboard/DealsChart.tsx)

docs/FileInput.md

@@ -143,7 +143,7 @@ If `multiple` is set to `false` and additional files are dropped, all files besi
 
 ## `options`
 
-`<FileInput>` accepts an `options` prop into which you can pass all the [react-dropzone properties](https://react-dropzone.netlify.com/#proptypes).
+`<FileInput>` accepts an `options` prop into which you can pass all the [react-dropzone properties](https://react-dropzone.js.org/#src).
 
 ## `placeholder`
 

docs/Forms.md

@@ -363,6 +363,8 @@ import { FormDataConsumer } from 'react-admin';
 
 **Note**: By default, `react-hook-form` submits values of unmounted input components. In the above example, the `shouldUnregister` prop of the `<SimpleForm>` component prevents that from happening. That way, when end users hide an input, its value isn't included in the submitted data.
 
+**Note**: `shouldUnregister` should be avoided when using `<ArrayInput>` (which internally uses `useFieldArray`) as the unregister function gets called after input unmount/remount and reorder. This limitation is mentioned in the react-hook-form [documentation](https://react-hook-form.com/docs/usecontroller#props). If you are in such a situation, you can use the [`transform`](https://marmelab.com/react-admin/Edit.html#transform) prop to manually clean the submitted values.
+
 ## Transforming Form Values Before Submitting
 
 Sometimes, you may want to alter the form values before sending them to the `dataProvider`. For those cases, use the `transform` prop either on the view component (`<Create>` or `<Edit>`) or on the `<SaveButton>` component. 

docs/ImageInput.md

@@ -138,7 +138,7 @@ If `multiple` is set to `false` and additional files are dropped, all files besi
 
 ## `options`
 
-`<ImageInput>` accepts an `options` prop into which you can pass all the [react-dropzone properties](https://react-dropzone.netlify.com/#proptypes).
+`<ImageInput>` accepts an `options` prop into which you can pass all the [react-dropzone properties](https://react-dropzone.js.org/#src).
 
 ## `placeholder`
 

docs/Inputs.md

@@ -707,6 +707,8 @@ import { FormDataConsumer } from 'react-admin';
 
 **Note**: By default, `react-hook-form` submits values of unmounted input components. In the above example, the `shouldUnregister` prop of the `<SimpleForm>` component prevents that from happening. That way, when end users hide an input, its value isn't included in the submitted data.
 
+**Note**: `shouldUnregister` should be avoided when using `<ArrayInput>` (which internally uses `useFieldArray`) as the unregister function gets called after input unmount/remount and reorder. This limitation is mentioned in the react-hook-form [documentation](https://react-hook-form.com/docs/usecontroller#props). If you are in such a situation, you can use the [`transform`](https://marmelab.com/react-admin/Edit.html#transform) prop to manually clean the submitted values.
+
 ## Overriding The Input Variant
 
 Material UI offers [3 variants for text fields](https://mui.com/material-ui/react-text-field/#basic-textfield): `outlined`, `filled`, and `standard`. The default react-admin theme uses the `filled` variant.

docs/NextJs.md

@@ -212,6 +212,7 @@ async function handler(request: Request) {
                 request.headers.get('content-type') ?? 'application/json',
             // supabase authentication
             apiKey: process.env.SUPABASE_SERVICE_ROLE ?? '',
+            Authorization: "Bearer " + process.env.SUPABASE_SERVICE_ROLE ?? '',
         },
     };
 
@@ -260,6 +261,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       ["content-type"]: req.headers["content-type"] ?? "application/json",
       // supabase authentication
       apiKey: process.env.SUPABASE_SERVICE_ROLE ?? '',
+      Authorization: "Bearer " + process.env.SUPABASE_SERVICE_ROLE ?? '',
     },
   };
   if (req.body) {

docs/Readme.md

@@ -43,7 +43,7 @@ import simpleRestProvider from "ra-data-simple-rest";
 const root = createRoot(document.getElementById("root"));
 root.render(
   <Admin dataProvider={simpleRestProvider("http://localhost:3000")}>
-    <Resource name="posts" list={ListGuesser} edit={EditHuesser} />
+    <Resource name="posts" list={ListGuesser} edit={EditGuesser} />
   </Admin>
 );
 ```