Merge branch 'next' into feat/next/select_all

.storybook/main.ts

@@ -13,6 +13,7 @@ const config: StorybookConfig = {
     ],
     addons: [
         '@storybook/addon-webpack5-compiler-babel',
+        '@storybook/addon-storysource',
         '@storybook/addon-actions',
         '@storybook/addon-controls',
     ],
@@ -52,7 +53,7 @@ const config: StorybookConfig = {
             ],
         };
     },
-    webpackFinal: async (config, { configType }) => {
+    webpackFinal: async config => {
         config.module?.rules?.push({
             test: /\.stories\.tsx?$/,
             use: [

CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## 5.4.2
+
+* Fix: Improve AutocompleteInput creation support ([#10391](https://github.com/marmelab/react-admin/pull/10391)) ([djhi](https://github.com/djhi))
+* Fix `useLogin` should invalidate the `getPermissions` cache ([#10392](https://github.com/marmelab/react-admin/pull/10392)) ([slax57](https://github.com/slax57))
+* Fix `<Datagrid>` `rowClick` function cannot expand or select ([#10404](https://github.com/marmelab/react-admin/pull/10404)) ([djhi](https://github.com/djhi))
+* Fix `<FileInput>` triggers `onChange` twice with latest version of `react-dropzone` ([#10402](https://github.com/marmelab/react-admin/pull/10402)) ([slax57](https://github.com/slax57))
+* Fix type of disableClearable prop for AutocompleteInput ([#10393](https://github.com/marmelab/react-admin/pull/10393)) ([smeng9](https://github.com/smeng9))
+* [Doc] Backport `<ReferenceManyToManyField  queryOptions>` and `<ReferenceManyToManyInput  queryOptions  mutationOptions>` doc ([#10403](https://github.com/marmelab/react-admin/pull/10403)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* [Doc] Fix `<DateRangeInput>` import syntax ([#10399](https://github.com/marmelab/react-admin/pull/10399)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* [Doc] Introduce `<TreeWithDetails filter>` prop to render a sub tree ([#10398](https://github.com/marmelab/react-admin/pull/10398)) ([djhi](https://github.com/djhi))
+
+## 5.4.1
+
+* Fix access control basename handling ([#10383](https://github.com/marmelab/react-admin/pull/10383)) ([djhi](https://github.com/djhi))
+* Fix ReferenceManyField executes filter reset filter too often ([#10371](https://github.com/marmelab/react-admin/pull/10371)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Add video tutorial to Access Control documentation ([#10378](https://github.com/marmelab/react-admin/pull/10378)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Fix AutocompleteArrrayInput contains a useless tip ([#10373](https://github.com/marmelab/react-admin/pull/10373)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* [Doc] Update `useUpdate` doc to explain `returnPromise` option ([#10372](https://github.com/marmelab/react-admin/pull/10372)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Fix Supabase (GraphQL) DataProvider link label ([#10370](https://github.com/marmelab/react-admin/pull/10370)) ([zackha](https://github.com/zackha))
+* [TypeScript] Fix `<ReferenceArrayField queryOptions>` param type ([#10389](https://github.com/marmelab/react-admin/pull/10389)) ([dricholm](https://github.com/dricholm))
+* [Storybook] Re-enable storysource addon ([#10363](https://github.com/marmelab/react-admin/pull/10363)) ([slax57](https://github.com/slax57))
+* [Chore] Add a story when `TextInput` trigger a server error ([#10386](https://github.com/marmelab/react-admin/pull/10386)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+
+## 5.4.0
+
+* Introduce `<FilterLiveForm>` ([#10344](https://github.com/marmelab/react-admin/pull/10344)) ([slax57](https://github.com/slax57))
+* Fix: Remove redundant optimization of cache lookup for `useGetMany`(Aggregate) placeholderData ([#10256](https://github.com/marmelab/react-admin/pull/10256)) ([wattroll](https://github.com/wattroll))
+* Fix `<SortButton>` default translation ([#10368](https://github.com/marmelab/react-admin/pull/10368)) ([fzaninotto](https://github.com/fzaninotto))
+* Fix `useCanAccessResources` cannot have react-query options ([#10362](https://github.com/marmelab/react-admin/pull/10362)) ([djhi](https://github.com/djhi))
+* Fix `FilterListItem` story shows wrong way of resetting a filter ([#10358](https://github.com/marmelab/react-admin/pull/10358)) ([fzaninotto](https://github.com/fzaninotto))
+* [TypeScript] Add missing parameter to `add` function type of `<SimpleFormIteratorContextValue>` ([#10359](https://github.com/marmelab/react-admin/pull/10359)) ([Aikain](https://github.com/Aikain))
+* [Demo] Showcase tabs with icons ([#10369](https://github.com/marmelab/react-admin/pull/10369)) ([fzaninotto](https://github.com/fzaninotto))
+* [Chore] Reorganize ra-core/form directory ([#10364](https://github.com/marmelab/react-admin/pull/10364)) ([fzaninotto](https://github.com/fzaninotto))
+* [Chore] Remove `useSafeSetState` hook ([#10341](https://github.com/marmelab/react-admin/pull/10341)) ([geobde](https://github.com/geobde))
+* [Doc] Document `<DateRangeInput>` as a filter ([#10365](https://github.com/marmelab/react-admin/pull/10365)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* [Doc] Fix `useRegisterMutationMiddleware` documentation ([#10360](https://github.com/marmelab/react-admin/pull/10360)) ([djhi](https://github.com/djhi))
+* [Doc] Improve Access Control for Custom Pages ([#10357](https://github.com/marmelab/react-admin/pull/10357)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Fix `<AppBar userMenu>` example usage ([#10356](https://github.com/marmelab/react-admin/pull/10356)) ([fzaninotto](https://github.com/fzaninotto))
+* Build(deps): Bump cross-spawn from 6.0.5 to 6.0.6 ([#10361](https://github.com/marmelab/react-admin/pull/10361)) ([dependabot[bot]](https://github.com/apps/dependabot))
+
 ## 5.3.4
 
 * Fix `<SimpleList>` `ErrorInFetch` story ([#10353](https://github.com/marmelab/react-admin/pull/10353)) ([erwanMarmelab](https://github.com/erwanMarmelab))

docs/ArrayInput.md

@@ -38,6 +38,7 @@ To edit arrays of data embedded inside a record, `<ArrayInput>` creates a list o
 }
 ```
 
+**Tip**: If you need to edit an array of *strings*, like a list of email addresses or a list of tags, you should use a [`<TextArrayInput>`](./TextArrayInput.md) instead.
 
 `<ArrayInput>` expects a single child, which must be a *form iterator* component. A form iterator is a component rendering a field array (the object returned by react-hook-form's [`useFieldArray`](https://react-hook-form.com/docs/usefieldarray)). For instance, [the `<SimpleFormIterator>` component](./SimpleFormIterator.md) displays an array of react-admin Inputs in an unordered list (`<ul>`), one sub-form by list item (`<li>`). It also provides controls for adding and removing a sub-record.
 

docs/AutocompleteArrayInput.md

@@ -14,11 +14,11 @@ It renders using Material UI [Autocomplete](https://mui.com/material-ui/react-au
   Your browser does not support the video tag.
 </video>
 
-
 This input allows editing values that are arrays of scalar values, e.g. `[123, 456]`.
 
 **Tip**: React-admin includes other components allowing the edition of such values:
 
+- [`<TextArrayInput>`](./TextArrayInput.md) lets you edit an array of strings
 - [`<SelectArrayInput>`](./SelectArrayInput.md) renders a dropdown list of choices
 - [`<CheckboxGroupInput>`](./CheckboxGroupInput.md) renders a list of checkbox options
 - [`<DualListInput>`](./DualListInput.md) renders a list of choices that can be moved from one list to another
@@ -560,8 +560,6 @@ In that case, set the `translateChoice` prop to `false`.
 ```
 {% endraw %}
 
-**Tip**: Like many other inputs, `<AutocompleteArrayInput>` accept a `fullWidth` prop.
-
 **Tip**: To use the `disableCloseOnSelect` prop, you must also set `blurOnSelect={false}`, since this is enabled by default.
 
 ## Fetching Choices

docs/AutocompleteInput.md

@@ -14,7 +14,6 @@ It renders using [Material UI's `<Autocomplete>`](https://mui.com/material-ui/re
   Your browser does not support the video tag.
 </video>
 
-
 This input allows editing record fields that are scalar values, e.g. `123`, `'admin'`, etc. 
 
 ## Usage

docs/CheckboxGroupInput.md

@@ -18,6 +18,7 @@ This input allows editing values that are arrays of scalar values, e.g. `[123, 4
 
 **Tip**: React-admin includes other components allowing the edition of such values:
 
+- [`<TextArrayInput>`](./TextArrayInput.md) lets you edit an array of strings
 - [`<SelectArrayInput>`](./SelectArrayInput.md) renders a dropdown list of choices
 - [`<AutocompleteArrayInput>`](./AutocompleteArrayInput.md) renders an autocomplete input of choices
 - [`<DualListInput>`](./DualListInput.md) renders a list of choices that can be moved from one list to another

docs/Community.md

@@ -45,10 +45,16 @@ On our [Youtube channel](https://www.youtube.com/@react-admin), you can find som
 
 <div class="iframe-wrapper">
     <iframe
-        src="https://www.youtube.com/embed?listType=playlist&list=UUx-g3k3eDFyy-3E7vxWVN-Q">
+        src="https://www.youtube.com/embed/videoseries?si=-m56_m4W9dEcJjw5&amp;list=PLBCskKfEEuGvgjdpfvH4ZAIGx4UJAUNwP">
     </iframe>
 </div>
 
+## Bluesky
+
+Follow us on [Bluesky](https://bsky.app/profile/react-admin.bsky.social) to get the latest news about react-admin.
+
+<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:o674lugddxaovsgqijmz4ktu/app.bsky.feed.post/3lbjr4odolc23" data-bluesky-cid="bafyreiefzmsxztuy3btf2vabbhfnuirsf4ck625ldrner4lzwhwvm5oena"><p lang="en">Hi Bluesky community👋React-admin is an open-source framework for building B2B apps.🚀Backed by the team at @marmelab.bsky.social, we’re committed to empowering developers to build faster &amp; smarter.📲 Follow this account to stay in the loop on all things react-admin.marmelab.com/react-admin/<br><br><a href="https://bsky.app/profile/did:plc:o674lugddxaovsgqijmz4ktu/post/3lbjr4odolc23?ref_src=embed">[image or embed]</a></p>&mdash; react-admin (<a href="https://bsky.app/profile/did:plc:o674lugddxaovsgqijmz4ktu?ref_src=embed">@react-admin.bsky.social</a>) <a href="https://bsky.app/profile/did:plc:o674lugddxaovsgqijmz4ktu/post/3lbjr4odolc23?ref_src=embed">November 22, 2024 at 11:23 AM</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
+
 ## Support
 
 If you're stuck with a problem in your react-admin code, you can get help from various channels:

docs/Create.md

@@ -441,7 +441,7 @@ You can do the same for error notifications, by passing a custom `onError`  call
 
 You sometimes need to pre-populate a record based on a *related* record. For instance, to create a comment related to an existing post.
 
-By default, the `<Create>` view starts with an empty `record`. However, if the `location` object (injected by [react-router-dom](https://reacttraining.com/react-router/web/api/location)) contains a `record` in its `state`, the `<Create>` view uses that `record` instead of the empty object. That's how the `<CloneButton>` works under the hood.
+By default, the `<Create>` view starts with an empty `record`. However, if the `location` object (injected by [react-router-dom](https://reactrouter.com/6.28.0/start/concepts#locations)) contains a `record` in its `state`, the `<Create>` view uses that `record` instead of the empty object. That's how the `<CloneButton>` works under the hood.
 
 That means that if you want to create a link to a creation form, presetting *some* values, all you have to do is to set the `state` prop of the `<CreateButton>`:
 

docs/DataProviderList.md

@@ -75,7 +75,7 @@ If you can't find a Data Provider for your backend below, no worries! [Writing a
 * ![strapi Logo](./img/backend-logos/strapi.png "strapi Logo")**[Strapi v3/v4](https://strapi.io/)**: [nazirov91/ra-strapi-rest](https://github.com/nazirov91/ra-strapi-rest)
 * ![strapi Logo](./img/backend-logos/strapi.png "strapi Logo")**[Strapi v4](https://strapi.io/)**: [garridorafa/ra-strapi-v4-rest](https://github.com/garridorafa/ra-strapi-v4-rest)
 * ![supabase Logo](./img/backend-logos/supabase.svg "supabase Logo")**[Supabase](https://supabase.io/)**: [marmelab/ra-supabase](https://github.com/marmelab/ra-supabase/blob/main/packages/ra-supabase/README.md)
-* ![graphql Logo](./img/backend-logos/graphql.svg "graphql Logo")**[Supabase](https://supabase.io/) (GraphQL)**: [@groovestack/ra-data-graphql-supabase](https://github.com/maxschridde1494/ra-data-graphql-supabase)
+* ![graphql Logo](./img/backend-logos/graphql.svg "graphql Logo")**[Supabase (GraphQL)](https://supabase.io/)**: [@groovestack/ra-data-graphql-supabase](https://github.com/maxschridde1494/ra-data-graphql-supabase)
 * ![surrealDB Logo](./img/backend-logos/surrealdb.svg "surrealDB Logo")**[SurrealDB](https://surrealdb.com/)**: [djedi23/ra-surrealdb](https://github.com/djedi23/ra-surrealdb)
 * ![treeql Logo](./img/backend-logos/treeql.png "treeql Logo")**[TreeQL / PHP-CRUD-API](https://treeql.org/)**: [nkappler/ra-data-treeql](https://github.com/nkappler/ra-data-treeql)
 * ![wooCommerce Logo](./img/backend-logos/wooCommerce.png "wooCommerce Logo")**[WooCommerce REST API](https://woocommerce.github.io/woocommerce-rest-api-docs)**: [zackha/ra-data-woocommerce](https://github.com/zackha/ra-data-woocommerce)

docs/DateRangeInput.md

@@ -9,14 +9,20 @@ This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon"
 
 ![DateRangeInput](./img/DateRangeInput.png)
 
-**Note**: `<DateRangeInput>` is a wrapper around the [Material UI X Date Range Picker](https://mui.com/x/react-date-pickers/date-range-picker/), which is a MUI X Pro package. This means that you need to own a [MUI X Pro license](https://mui.com/x/introduction/licensing/#pro-plan) to use it.
+**Note**: `<DateRangeInput>` is a wrapper around the [Material UI X Date Range Picker](https://mui.com/x/react-date-pickers/date-range-picker/), which is a MUI X Pro package. This means that you need to own a [MUI X Pro license](https://mui.com/x/introduction/licensing/#pro-plan) to use it and install the package:
+
+```sh
+npm install --save @mui/x-date-pickers-pro
+# or
+yarn add @mui/x-date-pickers-pro
+```
 
 ## Usage
 
 Use `<DateRangeInput>` inside a form component (`<SimpleForm>`, `<TabbedForm>`, `<LongForm>`, etc.) to allow users to pick a start and an end date.
 
 ```tsx
-import { DateRangeInput } from '@react-admin/ra-form-layout';
+import { DateRangeInput } from '@react-admin/ra-form-layout/DateRangeInput';
 import { Edit, SimpleForm } from 'react-admin';
 
 export const EventEdit = () => (
@@ -56,7 +62,7 @@ export const EventEdit = () => (
 | `sx`          | -        | `SxProps`        | -       | The style to apply to the component.                                                                                                                                                         |
 | `validate`    | -        | `function|Array` | -       | Validation rules for the input. See the [Validation Documentation](./Validation.md#per-input-validation-built-in-field-validators) for details.             |
 
-`<DateRangeInput>` also accept the same props as [MUI X's `<DateRangePicker>`](https://mui.com/x/api/date-pickers/date-range-picker/), except for the `format` prop (renamed `mask`), 
+`<DateRangeInput>` also accept the same props as [MUI X's `<DateRangePicker>`](https://mui.com/x/api/date-pickers/date-range-picker/), except for the `format` prop (renamed `mask`),
 
 **Tip:** Since `<DateRangeInput>` stores its value as a date array, [react-admin's validators](./Validation.md#per-input-validation-built-in-field-validators) like `minValue` or `maxValue` won't work out of the box.
 
@@ -106,7 +112,7 @@ import {
     SimpleForm,
     TextInput,
 } from "react-admin";
-import { DateRangeInput } from '@react-admin/ra-form-layout';
+import { DateRangeInput } from '@react-admin/ra-form-layout/DateRangeInput';
 
 const requiredValues = dates =>
     !dates || isEmpty(dates[0]) || isEmpty(dates[1])
@@ -142,6 +148,44 @@ const EventEdit = () => {
 };
 ```
 
+## Using `<DateRangeInput>` as a Filter
+
+`<DateRangeInput>` can also be used to filter a `<List>`.
+
+However, by default, `<DateRangeInput>` returns `Date` objects with their time set to 00:00:00, which makes the upper bound *exclusive*. Usually, users will expect the upper bound to be *inclusive*.
+
+This can be achieved by providing a `parse` function that sets the time of the upper bound to 23:59:59.
+
+Here is an example:
+
+```tsx
+import { DateRangeInput } from '@react-admin/ra-form-layout/DateRangeInput';
+import { List, Datagrid, NumberField, TextField, DateField } from 'react-admin';
+import { endOfDay } from 'date-fns';
+
+const dateRangeFilterParse = (dates: (Date | null)[]) => {
+    return [dates[0], dates[1] ? endOfDay(dates[1]) : dates[1]];
+};
+
+const eventsFilters = [
+    <DateRangeInput
+        source="date_between"
+        key="date_filter"
+        parse={dateRangeFilterParse}
+    />,
+];
+
+export const EventsList = () => (
+    <List filters={eventsFilters}>
+        <Datagrid>
+            <NumberField source="id" />
+            <TextField source="name" />
+            <DateField source="date" />
+        </Datagrid>
+    </List>
+);
+```
+
 ## Providing your own `LocalizationProvider`
 
 MUI X Pickers need to be wrapped in a [LocalizationProvider](https://mui.com/components/pickers/#localization) to work properly. `<DateRangeInput>` already includes a default `<LocalizationProvider>` using the `date-fns` adapter and the `enUS` locale.
@@ -171,4 +215,4 @@ export const App = () => (
 
 **Note:** React-admin only supports the `date-fns` adapter for now.
 
-**Tip**: React-admin already depends on `date-fns` v3 but your package manager may require you to add it to your dependencies.
+**Tip**: React-admin already depends on `date-fns` v3 but your package manager may require you to add it to your dependencies.

docs/DualListInput.md

@@ -16,6 +16,7 @@ This input allows editing values that are arrays of scalar values, e.g. `[123, 4
 
 **Tip**: React-admin includes other components allowing the edition of such values:
 
+- [`<TextArrayInput>`](./TextArrayInput.md) lets you edit an array of strings
 - [`<AutocompleteArrayInput>`](./AutocompleteArrayInput.md) renders an Autocomplete
 - [`<SelectArrayInput>`](./SelectArrayInput.md) renders a dropdown list of choices
 - [`<CheckboxGroupInput>`](./CheckboxGroupInput.md) renders a list of checkbox options