Merge pull request #11176 from marmelab/merge-master-5.14.3

[chore] Merge master 5.14.3 -> next

Author: slax57

.github/workflows/codeql-analysis.yml

@@ -30,15 +30,15 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v3
       # Override language selection by uncommenting this and choosing your languages
       # with:
       #   languages: go, javascript, csharp, python, cpp, java
 
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      uses: github/codeql-action/autobuild@v3
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -52,4 +52,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v3

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 5.14.3
+
+* Add default empty component and i18n messages to `ListGuesser` ([#11165](https://github.com/marmelab/react-admin/pull/11165)) ([WiXSL](https://github.com/WiXSL))
+* Fix `<Edit>`, `<ReferenceField>` and `<List>` to better support offline mode ([#11161](https://github.com/marmelab/react-admin/pull/11161)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Add DataTableInput dedicated page and cross references ([#11162](https://github.com/marmelab/react-admin/pull/11162)) ([WiXSL](https://github.com/WiXSL))
+* [TypeScript] Fix withLifecycleCallback return type for augmented data providers ([#11170](https://github.com/marmelab/react-admin/pull/11170)) ([fzaninotto](https://github.com/fzaninotto))
+* [TypeScript] Fix ReferenceManyField queryOptions type doesn't support error and success callbacks ([#11166](https://github.com/marmelab/react-admin/pull/11166)) ([fzaninotto](https://github.com/fzaninotto))
+* Bump rollup from 2.79.2 to 2.80.0 ([#11175](https://github.com/marmelab/react-admin/pull/11175)) ([dependabot[bot]](https://github.com/apps/dependabot))
+* Bump storybook from 8.6.15 to 8.6.17 ([#11174](https://github.com/marmelab/react-admin/pull/11174)) ([dependabot[bot]](https://github.com/apps/dependabot))
+* Bump devalue from 5.6.2 to 5.6.3 ([#11168](https://github.com/marmelab/react-admin/pull/11168)) ([dependabot[bot]](https://github.com/apps/dependabot))
+* Bump systeminformation from 5.29.1 to 5.31.1 ([#11167](https://github.com/marmelab/react-admin/pull/11167)) ([dependabot[bot]](https://github.com/apps/dependabot))
+
 ## 5.14.2
 
 * Fix `<ReferenceFieldBase>` does not work offline ([#11163](https://github.com/marmelab/react-admin/pull/11163)) ([fzaninotto](https://github.com/fzaninotto))

Makefile

@@ -39,6 +39,15 @@ run-crm: ## run the crm example
 build-crm: ## build the crm example
 	@yarn build-crm
 
+run-offline: ## run the offline example (dev mode)
+	@yarn run-offline
+
+build-offline: ## build the offline example
+	@yarn build-offline
+
+preview-offline: ## preview the offline example
+	@yarn preview-offline
+
 build-ra-core:
 	@echo "Transpiling ra-core files...";
 	@cd ./packages/ra-core && yarn build

docs/AutocompleteInput.md

@@ -15,7 +15,7 @@ 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. 
+This input allows editing record fields that are scalar values, e.g. `123`, `'admin'`, etc.
 
 ## Usage
 
@@ -32,8 +32,9 @@ import { AutocompleteInput } from 'react-admin';
 ```
 
 By default, the possible choices are built from the `choices` prop, using:
-  - the `id` field as the option value,
-  - the `name` field as the option text
+
+- the `id` field as the option value,
+- the `name` field as the option text
 
 The form value for the source must be the selected value, e.g.
 
@@ -47,11 +48,13 @@ The form value for the source must be the selected value, e.g.
 
 **Tip**: React-admin includes other components to edit such values:
 
- - [`<SelectInput>`](./SelectInput.md) renders a dropdown
- - [`<RadioButtonGroupInput>`](./RadioButtonGroupInput.md) renders a list of radio buttons
+- [`<SelectInput>`](./SelectInput.md) renders a dropdown
+- [`<RadioButtonGroupInput>`](./RadioButtonGroupInput.md) renders a list of radio buttons
 
 **Tip**: If you need to let users select more than one item in the list, check out the [`<AutocompleteArrayInput>`](./AutocompleteArrayInput.md) component.
 
+**Tip**: If users need to compare multiple fields before choosing (e.g. team, region, SLA, status), use [`<DataTableInput>`](./DataTableInput.md).
+
 ## Props
 
 | Prop                       | Required | Type                                            | Default                                    | Description                                                                                                                                                                                                         |
@@ -152,6 +155,7 @@ To allow users to add new options, pass a React element as the `create` prop. `<
 </video>
 
 {% raw %}
+
 ```jsx
 import { 
     Create, 
@@ -218,6 +222,7 @@ const CreateAuthor = () => {
     );
 };
 ```
+
 {% endraw %}
 
 **Tip**: In development with `React.StrictMode`, you may run into an issue where the `<AutocompleteInput>` menu reopens after clicking the create item when the [`openOnFocus`](https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-openOnFocus) prop is set to `true` which is the default with React-admin. If that bothers you, set the `openOnFocus` prop to `false`.
@@ -315,7 +320,7 @@ If the input isn't required (using `validate={required()}`), and you need a choi
 
 The `emptyText` prop accepts either a string or a React Element.
 
-And if you want to hide that empty choice, make the input required. 
+And if you want to hide that empty choice, make the input required.
 
 ```jsx
 <AutocompleteInput source="author_id" choices={choices} validate={required()} />
@@ -331,15 +336,15 @@ You can override this value with the `emptyValue` prop.
 <AutocompleteInput source="author_id" choices={choices} emptyValue={0} />
 ```
 
-**Tip**: While you can set `emptyValue` to a non-string value (e.g. `0`), you cannot use `null` or `undefined`, as it would turn the `<AutocompleteInput>` into an [uncontrolled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). If you need the empty choice to be stored as `null` or `undefined`, use [the `parse` prop](./Inputs.md#parse) to convert the default empty value ('') to `null` or `undefined`, or use [the `sanitizeEmptyValues` prop](./SimpleForm.md#sanitizeemptyvalues) on the Form component. 
+**Tip**: While you can set `emptyValue` to a non-string value (e.g. `0`), you cannot use `null` or `undefined`, as it would turn the `<AutocompleteInput>` into an [uncontrolled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). If you need the empty choice to be stored as `null` or `undefined`, use [the `parse` prop](./Inputs.md#parse) to convert the default empty value ('') to `null` or `undefined`, or use [the `sanitizeEmptyValues` prop](./SimpleForm.md#sanitizeemptyvalues) on the Form component.
 
 ## `filterToQuery`
 
 When used inside a [`<ReferenceInput>`](./ReferenceInput.md), whenever users type a string in the autocomplete input, `<AutocompleteInput>` calls `dataProvider.getList()` using the string as filter, to return a filtered list of possible options from the reference resource. This filter is built using the `filterToQuery` prop.
 
 By default, the filter is built using the `q` parameter. This means that if the user types the string 'lorem', the filter will be `{ q: 'lorem' }`.
 
-You can customize the filter by setting the `filterToQuery` prop. It should be a function that returns a filter object. 
+You can customize the filter by setting the `filterToQuery` prop. It should be a function that returns a filter object.
 
 ```jsx
 const filterToQuery = searchText => ({ name_ilike: `%${searchText}%` });
@@ -408,6 +413,7 @@ type OnChange = (
 In the following example, the `onChange` prop is used to update the `language` field whenever the user selects a new author:
 
 {% raw %}
+
 ```tsx
 import * as React from 'react';
 import {
@@ -454,11 +460,12 @@ const BookCreate = () => (
     </Create>
 );
 ```
+
 {% endraw %}
 
 ## `onCreate`
 
-Use the `onCreate` prop to allow users to create new options on the fly. This is equivalent to MUI's `<AutoComplete freeSolo>` prop. 
+Use the `onCreate` prop to allow users to create new options on the fly. This is equivalent to MUI's `<AutoComplete freeSolo>` prop.
 
 <video controls playsinline muted>
   <source src="./img/AutocompleteInput-onCreate.mp4" type="video/mp4"/>
@@ -690,9 +697,11 @@ In that case, set the `translateChoice` prop to `false`.
 `<AutocompleteInput>` renders a [Material UI `<Autocomplete>` component](https://mui.com/material-ui/react-autocomplete/) and it accepts the `<Autocomplete>` props:
 
 {% raw %}
+
 ```jsx
 <AutocompleteInput source="category" size="large" />
 ```
+
 {% endraw %}
 
 ## Fetching Choices
@@ -719,11 +728,11 @@ const CountryInput = () => {
 
 The `isPending` prop is used to display a loading indicator while the data is being fetched.
 
-However, most of the time, if you need to populate a `<AutocompleteInput>` with choices fetched from another resource, it's because you are trying to set a foreign key. In that case, you should use [`<ReferenceInput>`](./ReferenceInput.md) to fetch the choices instead (see next section). 
+However, most of the time, if you need to populate a `<AutocompleteInput>` with choices fetched from another resource, it's because you are trying to set a foreign key. In that case, you should use [`<ReferenceInput>`](./ReferenceInput.md) to fetch the choices instead (see next section).
 
 ## Selecting a Foreign Key
 
-If you use `<AutocompleteInput>` to set a foreign key for a many-to-one or a one-to-one relationship, you'll have to [fetch choices](#fetching-choices), as explained in the previous section. You'll also have to fetch the record corresponding to the current value of the foreign key, as it may not be in the list of choices. 
+If you use `<AutocompleteInput>` to set a foreign key for a many-to-one or a one-to-one relationship, you'll have to [fetch choices](#fetching-choices), as explained in the previous section. You'll also have to fetch the record corresponding to the current value of the foreign key, as it may not be in the list of choices.
 
 For example, if a `contact` has one `company` via the `company_id` foreign key, a contact form can let users select a company as follows:
 
@@ -781,18 +790,18 @@ const CompanyInput = () => (
 **Tip**: If you need validation (e.g. `required()`), put the `validate` prop on the child input (`<AutocompleteInput>`). `<ReferenceInput>` doesn't accept validation props.
 
 `<ReferenceInput>` is a headless component that:
- 
- - fetches a list of records with `dataProvider.getList()` and `dataProvider.getOne()`, using the `reference` prop for the resource,
- - puts the result of the fetch in the `ChoiceContext` as the `choices` prop, as well as the `isPending` state,
- - and renders its child component
+
+- fetches a list of records with `dataProvider.getList()` and `dataProvider.getOne()`, using the `reference` prop for the resource,
+- puts the result of the fetch in the `ChoiceContext` as the `choices` prop, as well as the `isPending` state,
+- and renders its child component
 
 When rendered as a child of `<ReferenceInput>`, `<AutocompleteInput>` reads that `ChoiceContext` to populate its own `choices` and `isPending` props. It also sends the current input prop to the `useGetList` hook, so that the list of choices is filtered as the user types.
 
 In fact, you can simplify the code even further:
 
 - `<ReferenceInput>` puts all its props inside the `ChoiceContext`, including `source`, so `<AutocompleteInput>` doesn't need to repeat it.
-- You can also put the `label` prop on the `<ReferenceInput>` rather than `<AutocompleteInput>` so that it looks just like [`<ReferenceField>`](./ReferenceField.md) (for easier memorization). 
-- `<AutocompleteInput>` uses the [`recordRepresentation`](./Resource.md#recordrepresentation) to determine how to represent the related choices. In the example above, the `companies` resource uses `name` as its `recordRepresentation`, so `<AutocompleteInput>` will default to `optionText="name"`. 
+- You can also put the `label` prop on the `<ReferenceInput>` rather than `<AutocompleteInput>` so that it looks just like [`<ReferenceField>`](./ReferenceField.md) (for easier memorization).
+- `<AutocompleteInput>` uses the [`recordRepresentation`](./Resource.md#recordrepresentation) to determine how to represent the related choices. In the example above, the `companies` resource uses `name` as its `recordRepresentation`, so `<AutocompleteInput>` will default to `optionText="name"`.
 - `<ReferenceInput>`'s default child is `<AutocompleteInput>`, so you can omit it entirely.
 
 The code for the `<CompanyInput>` component can be reduced to:
@@ -893,6 +902,7 @@ The `<AutocompleteInput>` can allow users to create a new choice if either the `
 Use the `onCreate` prop when you only require users to provide a simple string and a `prompt` is enough. You can return either the new choice directly or a Promise resolving to the new choice.
 
 {% raw %}
+
 ```js
 import { AutocompleteInput, Create, SimpleForm, TextInput } from 'react-admin';
 
@@ -920,11 +930,13 @@ const PostCreate = () => {
     );
 }
 ```
+
 {% endraw %}
 
 Use the `create` prop when you want a more polished or complex UI. For example a Material UI `<Dialog>` asking for multiple fields because the choices are from a referenced resource.
 
 {% raw %}
+
 ```js
 import {
     AutocompleteInput,
@@ -991,13 +1003,15 @@ const CreateCategory = () => {
     );
 };
 ```
+
 {% endraw %}
 
 **Tip:** As showcased in this example, react-admin provides a convenient hook for accessing the filter the user has already input in the `<AutocompleteInput>`: `useCreateSuggestionContext`.
 
 The `Create %{item}` option will only be displayed once the user has already set a filter (by typing in some input). If you expect your users to create new items often, you can make this more user-friendly by adding a placeholder text like this:
 
 {% raw %}
+
 ```diff
 const PostCreate = () => {
     const categories = [
@@ -1026,4 +1040,5 @@ const PostCreate = () => {
     );
 }
 ```
+
 {% endraw %}