Merge pull request #10540 from marmelab/merge-master-5.6.1

Merge master 5.6.1 on next

.env.template

@@ -0,0 +1 @@
+GITHUB_ACCESS_TOKEN=your_github_access_token

.github/workflows/test.yml

@@ -170,7 +170,7 @@ jobs:
     runs-on: ubuntu-latest
     name: GreenFrame
     needs: [e-commerce]
-    if: github.event_name == 'push' && github.ref_type == 'tag' && github.ref_name == 'refs/tags/v*' && !contains('beta', github.ref_name) && !contains('alpha', github.ref_name)
+    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
@@ -225,7 +225,7 @@ jobs:
   update-sandbox-repository:
     runs-on: ubuntu-latest
     # Only run on new tags that target a release (not latest nor next) and avoid alpha and beta tags
-    if: github.event_name == 'push' && github.ref_type == 'tag' && github.ref_name == 'refs/tags/v*' && !contains('beta', github.ref_name) && !contains('alpha', github.ref_name)
+    if: github.event_name == 'push' && github.ref_type == 'tag' && contains(github.ref, 'refs/tags/v') && !contains('beta', github.ref) && !contains('alpha', github.ref)
     needs: [typecheck, simple-example-typecheck, unit-test, e2e-test]
     steps:
         - name: Checkout

.gitignore

@@ -23,3 +23,4 @@ cypress/screenshots
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+.env

CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 5.6.1
+
+* Fix create-react-admin package manager detection ([#10534](https://github.com/marmelab/react-admin/pull/10534)) ([djhi](https://github.com/djhi))
+* Fix create-react-admin does not ignore auth-provider when specified and using supabase ([#10533](https://github.com/marmelab/react-admin/pull/10533)) ([djhi](https://github.com/djhi))
+* Fix `<NumberInput>` and `<AutocompleteInput>` do not forward the event when calling `onBlur` ([#9730](https://github.com/marmelab/react-admin/pull/9730)) ([yanchesky](https://github.com/yanchesky))
+* [Doc] Fix dialogs `title` doc ([#10536](https://github.com/marmelab/react-admin/pull/10536)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* [Doc] Fix `<DatagridAGClient>` access control's doc ([#10535](https://github.com/marmelab/react-admin/pull/10535)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* [Doc] Promote composition with `<ListLiveUpdate>` instead of `<ListLive>` ([#10531](https://github.com/marmelab/react-admin/pull/10531)) ([djhi](https://github.com/djhi))
+* [Doc] Fix some videos do not play in Firefox for MacOS users ([#10524](https://github.com/marmelab/react-admin/pull/10524)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+
+## 5.6.0
+
+* Add `<LoginWithEmail>` to facilitate login with email ([#10518](https://github.com/marmelab/react-admin/pull/10518)) ([fzaninotto](https://github.com/fzaninotto))
+* Add B&W Theme ([#10523](https://github.com/marmelab/react-admin/pull/10523)) ([fzaninotto](https://github.com/fzaninotto))
+* Make `create-react-admin` non interactive by default and support `ra-supabase` ([#10511](https://github.com/marmelab/react-admin/pull/10511)) ([djhi](https://github.com/djhi))
+* Support `<ReferenceOneField emptyContent>` ([#10450](https://github.com/marmelab/react-admin/pull/10450)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* Update `<ArrayInput>` to throw an error when using outdated `disabled` prop ([#10529](https://github.com/marmelab/react-admin/pull/10529)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Add `HorizontalMenu` doc ([#10528](https://github.com/marmelab/react-admin/pull/10528)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* [Doc] Add `<FormFillerButton>` documentation ([#10527](https://github.com/marmelab/react-admin/pull/10527)) ([djhi](https://github.com/djhi))
+* [chore] Fix CI jobs that run on new tag ([#10525](https://github.com/marmelab/react-admin/pull/10525)) ([slax57](https://github.com/slax57))
+
 ## 5.5.4
 
 * Fix `<FilerLiveForm>` does not allow to clear filters ([#10522](https://github.com/marmelab/react-admin/pull/10522)) ([djhi](https://github.com/djhi))

Makefile

@@ -176,3 +176,6 @@ update-sandbox: ## Push the local version of the simple example to the sandbox r
 
 check-documentation-videos-format: ## Check the documentation format
 	./scripts/check-documentation-videos-format.sh
+
+release: ## Start the release process and publish the packages to npm using lerna
+	./scripts/release.sh

docs/ArrayInput.md

@@ -84,7 +84,7 @@ Check [the `<SimpleFormIterator>` documentation](./SimpleFormIterator.md) for de
 
 ## Props
 
-`<ArrayInput>` accepts the [common input props](./Inputs.md#common-input-props) (except `format` and `parse`).
+`<ArrayInput>` accepts the [common input props](./Inputs.md#common-input-props) (except `disabled`, `readOnly`, `format` and `parse`).
 
 ## Global validation
 
@@ -109,3 +109,27 @@ You need to return an errors object shaped like this:
 ```
 
 **Tip:** You can find a sample `validate` function that handles arrays in the [Form Validation documentation](./Validation.md#global-validation).
+
+## Disabling The Input
+
+`<ArrayInput>` does not support the `disabled` and `readOnly` props.
+
+If you need to disable the input, set the `<SimpleFormIterator disabled>` prop, and make the child inputs `readOnly`:
+
+```jsx
+const OrderEdit = () => (
+    <Edit>
+        <SimpleForm>
+            <TextInput source="customer" />
+            <DateInput source="date" />
+            <ArrayInput source="items">
+                <SimpleFormIterator inline disabled>
+                    <TextInput source="name" readOnly/>
+                    <NumberInput source="price" readOnly />
+                    <NumberInput source="quantity" readOnly />
+                </SimpleFormIterator>
+            </ArrayInput>
+        </SimpleForm>
+    </Edit>
+);
+```

docs/ContainerLayout.md

@@ -85,7 +85,9 @@ const MyLayout = ({ children }) => (
 
 ## `menu`
 
-By default, `<ContainerLayout>` renders one menu item per resource in the admin. To reorder the menu, omit resources, or add custom pages, pass a custom menu element to the `menu` prop. This element should be [a `<HorizontalMenu>` component](#horizontalmenu) with `<HorizontalMenu.Item>` children. Each child should have a `value` corresponding to the [application location](https://react-admin-ee.marmelab.com/documentation/ra-navigation#concepts) of the target, and can have a `to` prop corresponding to the target location if different from the app location.
+By default, `<ContainerLayout>` renders one menu item per resource in the admin. To reorder the menu, omit resources, or add custom pages, pass a custom menu element to the `menu` prop.
+This element should be [a `<HorizontalMenu>` component](#horizontalmenu) with `<HorizontalMenu.DashboardItem>` or `<HorizontalMenu.Item>` children.
+Each child should have a `value` corresponding to the [application location](https://react-admin-ee.marmelab.com/documentation/ra-navigation#concepts) of the target, and can have a `to` prop corresponding to the target location if different from the app location.
 
 ```jsx
 import {
@@ -104,10 +106,14 @@ import {
 
 const Menu = () => (
     <HorizontalMenu>
-        <HorizontalMenu.Item label="Dashboard" to="/" value="" />
+        <HorizontalMenu.DashboardItem label="Dashboard" value="" />
         <HorizontalMenu.Item label="Songs" to="/songs" value="songs" />
         <HorizontalMenu.Item label="Artists" to="/artists" value="artists" />
         <HorizontalMenu.Item label="Custom" to="/custom" value="custom" />
+        <HorizontalMenu.Item label="Business" value="business">
+            <HorizontalMenu.Item label="Sales" value="sales" >
+            <HorizontalMenu.Item label="Customers" value="customers" >
+        </HorizontalMenu.Item>
     </HorizontalMenu>
 );
 
@@ -225,7 +231,6 @@ export const MyLayout = ({ children }) => (
 ```
 {% endraw %}
 
-## `<HorizontalMenu>`
 
 This component renders a horizontal menu, to be used in the AppBar of the [`<ContainerLayout>`](#containerLayout).
 

docs/CreateDialog.md

@@ -210,35 +210,31 @@ Unlike the `<Create>` components, with Dialog components the title will be displ
 Here is an example:
 
 ```tsx
-import React from 'react';
 import {
     List,
+    ListActions,
     Datagrid,
     SimpleForm,
     TextInput,
     DateInput,
     required,
 } from 'react-admin';
-import {
-    CreateDialog,
-} from '@react-admin/ra-form-layout';
+import { CreateDialog } from '@react-admin/ra-form-layout';
 
 const CustomerList = () => (
     <>
-        <List hasCreate>
+        <List actions={<ListActions hasCreate />}>
             <Datagrid>
                 ...
-                <ShowButton />
             </Datagrid>
         </List>
-        <ShowDialog title={<CustomerShowTitle />}>
-            <SimpleShowLayout>
-                <TextField source="id" />
-                <TextField source="first_name" />
-                <TextField source="last_name" />
-                <DateField source="date_of_birth" label="born" />
-            </SimpleShowLayout>
-        </ShowDialog>
+        <CreateDialog title="Create a new customer">
+            <SimpleForm>
+                <TextInput source="first_name" validate={required()} />
+                <TextInput source="last_name" validate={required()} />
+                <DateInput source="date_of_birth" />
+            </SimpleForm>
+        </CreateDialog>
     </>
 );
 ```
@@ -464,9 +460,7 @@ const EmployerEdit = () => (
 
 ## Warn When There Are Unsaved Changes
 
-If you'd like to trigger a warning when the user tries to close the dialog with unsaved changes, there are two cases to consider.
-
-In that case, you can leverage the [warnWhenUnsavedChanges](./Form.md#warnwhenunsavedchanges) feature provided by React Admin forms.
+If you'd like to trigger a warning when the user tries to close the dialog with unsaved changes, you can leverage the [warnWhenUnsavedChanges](./Form.md#warnwhenunsavedchanges) feature provided by React Admin forms.
 
 Add the `warnWhenUnsavedChanges` prop to your Form like so:
 

docs/CreateInDialogButton.md

@@ -293,9 +293,7 @@ You can also hide the title by passing `null`:
 
 ## Warn When There Are Unsaved Changes
 
-If you'd like to trigger a warning when the user tries to close the dialog with unsaved changes, there are two cases to consider.
-
-In that case, using the `warnWhenUnsavedChanges` prop directly on the form won't work, because this feature relies on the router's location, but both components do not use routing.
+If you'd like to trigger a warning when the user tries to close the dialog with unsaved changes, using the `warnWhenUnsavedChanges` prop directly on the form won't work, because this feature relies on the router's location, but both components do not use routing.
 
 Instead, you can use the `<WarnWhenUnsavedChangesInDialog>` component provided by `ra-form-layout`.
 

docs/DataFetchingGuide.md

@@ -414,7 +414,7 @@ Once your data provider has enabled realtime features, you can use these hooks a
 - [`useLockOnCall`](./useLockOnCall.md)
 - [`useGetListLive`](./useGetListLive.md)
 - [`useGetOneLive`](./useGetOneLive.md)
-- [`<ListLive>`](./ListLive.md)
+- [`<ListLiveUpdate>`](./ListLiveUpdate.md)
 - [`<EditLive>`](./EditLive.md)
 - [`<ShowLive>`](./ShowLive.md)
 - [`<MenuLive>`](./MenuLive.md)

docs/DataProviderLive.md

@@ -61,7 +61,7 @@ Once your data provider has enabled realtime features, you can use these hooks a
 - [`useLockOnCall`](./useLockOnCall.md)
 - [`useGetListLive`](./useGetListLive.md)
 - [`useGetOneLive`](./useGetOneLive.md)
-- [`<ListLive>`](./ListLive.md)
+- [`<ListLiveUpdate>`](./ListLiveUpdate.md)
 - [`<EditLive>`](./EditLive.md)
 - [`<ShowLive>`](./ShowLive.md)
 - [`<MenuLive>`](./MenuLive.md)

docs/DatagridAG.md

@@ -2851,7 +2851,7 @@ const CarList = () => {
 
 ### Access Control
 
-`<DatagridAG>` has built-in [access control](./Permissions.me#access-control). If the `authProvider` implements the `canAccess` method, users will only be allowed to edit rows of, say, resource `'cars'` if `canAccess({ action: 'edit', resource: 'cars' })` returns `true`.
+`<DatagridAGClient>` has built-in [access control](./Permissions.me#access-control). If the `authProvider` implements the `canAccess` method, users will only be allowed to edit rows of, say, resource `'cars'` if `canAccess({ action: 'edit', resource: 'cars' })` returns `true`.
 
 **Note:** the access control check can only be done at the resource level and not at the record level.
 

docs/EditDialog.md

@@ -236,8 +236,9 @@ const MyEditDialog = () => (
 
 ## `title`
 
-Unlike the `<Create>` components, with Dialog components the title will be displayed in the `<Dialog>`, not in the `<AppBar>`.
-If you pass a custom title component, it will render in the same `RecordContext` as the dialog's child component. That means you can display non-editable details of the current `record` in the title component.
+Unlike the `<Edit>` components, with Dialog components the title will be displayed in the `<Dialog>`, not in the `<AppBar>`.
+If you pass a custom title component, it will render in the same `RecordContext` as the dialog's child component.
+That means you can display non-editable details of the current `record` in the title component.
 Here is an example:
 
 ```tsx
@@ -501,9 +502,7 @@ const EmployerEdit = () => (
 
 ## Warn When There Are Unsaved Changes
 
-If you'd like to trigger a warning when the user tries to close the dialog with unsaved changes, there are two cases to consider.
-
-In that case, you can leverage the [warnWhenUnsavedChanges](./Form.md#warnwhenunsavedchanges) feature provided by React Admin forms.
+If you'd like to trigger a warning when the user tries to close the dialog with unsaved changes, you can leverage the [warnWhenUnsavedChanges](./Form.md#warnwhenunsavedchanges) feature provided by React Admin forms.
 
 Add the `warnWhenUnsavedChanges` prop to your Form like so:
 

docs/EditInDialogButton.md

@@ -302,7 +302,8 @@ const EditButton = () => (
 ## `title`
 
 Unlike the `<Edit>` components, with Dialog components the title will be displayed in the `<Dialog>`, not in the `<AppBar>`.
-Still, for `<EditInDialogButton>`, if you pass a custom title component, it will render in the same `RecordContext` as the dialog's child component. That means you can display non-editable details of the current `record` in the title component.
+If you pass a custom title component, it will render in the same `RecordContext` as the dialog's child component.
+That means you can display non-editable details of the current `record` in the title component.
 Here is an example:
 
 ```tsx
@@ -383,9 +384,7 @@ const EmployerEdit = () => (
 
 ## Warn When There Are Unsaved Changes
 
-If you'd like to trigger a warning when the user tries to close the dialog with unsaved changes, there are two cases to consider.
-
-In that case, using the `warnWhenUnsavedChanges` prop directly on the form won't work, because this feature relies on the router's location, but both components do not use routing.
+If you'd like to trigger a warning when the user tries to close the dialog with unsaved changes, using the `warnWhenUnsavedChanges` prop directly on the form won't work, because this feature relies on the router's location, but both components do not use routing.
 
 Instead, you can use the `<WarnWhenUnsavedChangesInDialog>` component provided by `ra-form-layout`.
 

docs/Features.md

@@ -1164,28 +1164,27 @@ Check the following low-level hooks for more details:
 
 React-admin provides **live updates** via specialized hooks and components. This means that when a user edits a resource, the other users working on the same resource see the changes in real time whether they are in a list, a show view, or an edit view.
 
-For instance, replace `<List>` with `<ListLive>` to have a list refreshing automatically when an element is added, updated, or deleted:
+For instance, include a `<ListLiveUpdate>` within a `<List>` to have a list refreshing automatically when an element is added, updated, or deleted:
 
 ```diff
 import {
--   List,
+    List,
     Datagrid,
     TextField,
     NumberField,
     Datefield,
 } from 'react-admin';
-+import { ListLive } from '@react-admin/ra-realtime';
++import { ListLiveUpdate } from '@react-admin/ra-realtime';
 
 const PostList = () => (
--   <List>
-+   <ListLive>
+    <List>
         <Datagrid>
             <TextField source="title" />
             <NumberField source="views" />
             <DateField source="published_at" />
         </Datagrid>
--   </List>
-+   </ListLive>
++       <ListLiveUpdate />
+    </List>
 );
 ```
 
@@ -1202,7 +1201,7 @@ This feature leverages the following hooks:
 
 And the following components:
 
-- [`<ListLive>`](./ListLive.md)
+- [`<ListLiveUpdate>`](./ListLiveUpdate.md)
 - [`<EditLive>`](./EditLive.md)
 - [`<ShowLive>`](./ShowLive.md)