Merge pull request #9846 from WiXSL/fix-next-docs

[Doc] Fix typos, anchor and examples

docs/Actions.md

@@ -242,7 +242,7 @@ Check [the useMutation documentation](https://tanstack.com/query/v5/docs/react/r
 - `retryDelay`,
 - `throwOnError`.
 
-In addition to the `useMutation` options, react-admin mutation hooks also accept the `mutationMode` option, letting you switch between `pessimistic` rendering, `optimistic` rendering and `undoable` modes. By default, side effect callbacks (`onSuccess`, `onError`, `onSettled`) are "pessimistic", ie. react-admin executes them after the dataProvider responds. You can switch to "optimistic" to execute them right when the dataProvider is called, without waiting for the response.
+In addition to the `useMutation` options, react-admin mutation hooks also accept the `mutationMode` option, letting you switch between `pessimistic` rendering, `optimistic` rendering and `undoable` modes. By default, side effect callbacks (`onSuccess`, `onError`, `onSettled`) are "pessimistic", i.e. react-admin executes them after the dataProvider responds. You can switch to "optimistic" to execute them right when the dataProvider is called, without waiting for the response.
 
 ```jsx
 const [update, { data, isPending, error }] = useUpdate(
@@ -273,7 +273,7 @@ const ApproveButton = () => {
     return <UpdateButton
         label="Approve"
         data={{ isApproved: true }}
-        mutationOptions={
+        mutationOptions={{
             onSuccess: (data) => {
                 // success side effects go here
                 redirect('/comments');
@@ -283,7 +283,7 @@ const ApproveButton = () => {
                 // failure side effects go here 
                 notify(`Comment approval error: ${error.message}`, { type: 'error' });
             },
-        }
+        }}
     />;
 };
 ```

docs/Admin.md

@@ -633,7 +633,7 @@ React-admin offers predefined layouts for you to use:
     </svg>
 </figure>
 
-- [`<Layout>`](./Layout.md): The default layout. It renders a top app bar and the navigation menu in a side bar.
+- [`<Layout>`](./Layout.md): The default layout. It renders a top app bar and the navigation menu in a sidebar.
 - [`<ContainerLayout>`](./ContainerLayout.md) is centered layout with horizontal navigation.
 - [`<SolarLayout>`](./SolarLayout.md) is a layout with a small icon sidebar, no top bar, and a full-width content area.
 
@@ -790,7 +790,7 @@ React-admin uses [React Query](https://tanstack.com/query/v5/) to fetch, cache a
 * Query results that are no longer used in the current page are labeled as "inactive" and remain in the cache in case they are used again at a later time.
 * By default, "inactive" queries are garbage collected after 5 minutes.
 * Queries that fail are silently retried 3 times, with exponential backoff delay before capturing and displaying an error to the UI.
-* Query results by default are structurally shared to detect if data have actually changed and if not, the data reference remains unchanged to better help with value stabilization with regards to `useMemo` and `useCallback`. 
+* Query results by default are structurally shared to detect if data have actually changed and if not, the data reference remains unchanged to better help with value stabilization in regard to `useMemo` and `useCallback`. 
 
 If you want to override the react-query default query and mutation default options, or use a specific client or mutation cache, you can create your own `QueryClient` instance and pass it to the `<Admin queryClient>` prop:
 

docs/AutocompleteArrayInput.md

@@ -136,7 +136,7 @@ const choices = possibleValues.map(value => ({ id: value, name: ucfirst(value) }
 
 ## `create`
 
-To allow users to add new options, pass a React element as the `create` prop. `<AutocompleteArrayInput>` will then render a "Create" option at the bottom of the choices list. When clicked, it will render the create element.
+To allow users to add new options, pass a React element as the `create` prop. `<AutocompleteArrayInput>` will then render a "Create" option at the bottom of the choices list. When clicked, it will render the `Create` element.
 
 <video controls autoplay playsinline muted loop>
   <source src="./img/autocomplete-array-input-create.webm" type="video/webm"/>

docs/AutocompleteInput.md

@@ -233,7 +233,7 @@ This delay can be customized by setting the `debounce` prop.
 </ReferenceInput>
 ```
 
-**Tip**: [The `signal` Parameter section](./DataProviders.md#the-signal-parameter) explains how to use the [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) interface to abort the last API call and avoid parallel requests.
+**Tip**: [The `signal` Parameter section](./DataProviderWriting.md#the-signal-parameter) explains how to use the [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) interface to abort the last API call and avoid parallel requests.
 
 ## `emptyText`
 

docs/Caching.md

@@ -5,7 +5,7 @@ title: "Caching"
 
 # Caching
 
-Not hitting the server is the best way to improve a web app performance, and its an ecological footprint too (network and datacenter usage account for about 40% of the CO2 emissions in IT). React-admin comes with a built-in cache-first approach called *optimistic rendering*, and it supports caching both at the HTTP level and the application level. 
+Not hitting the server is the best way to improve a web app performance, and its ecological footprint too (network and datacenter usage account for about 40% of the CO2 emissions in IT). React-admin comes with a built-in cache-first approach called *optimistic rendering*, and it supports caching both at the HTTP level and the application level. 
 
 ## Optimistic Rendering
 

docs/ChipField.md

@@ -17,7 +17,7 @@ import { ChipField } from 'react-admin';
 
 ![ChipField](./img/chip-field.png)
 
-This field type is especially useful for one to many relationships, e.g. to display a list of books for a given author:
+This field type is especially useful for one-to-many relationships, e.g. to display a list of books for a given author:
 
 ```jsx
 import { ChipField, SingleFieldList, ReferenceManyField } from 'react-admin';

docs/DataProviderWriting.md

@@ -450,9 +450,9 @@ A good way to test your data provider is to build a react-admin app with compone
 | `getManyReference` | [`<ReferenceManyField>`](./ReferenceManyField.md), [`<ReferenceOneField>`](./ReferenceOneField.md), [`<ReferenceManyInput>`](./ReferenceManyInput.md), [`<ReferenceOneInput>`](./ReferenceOneInput.md) |
 | `create`           | [`<Create>`](./Create.md), [`<CreateBase>`](./CreateBase.md), [`<EditableDatagrid>`](./EditableDatagrid.md), [`<CreateInDialogButton>`](./CreateInDialogButton.md) |
 | `update`           | [`<Edit>`](./Edit.md), [`<EditGuesser>`](./EditGuesser.md), [`<EditBase>`](./EditBase.md), [`<EditableDatagrid>`](./EditableDatagrid.md), [`<EditInDialogButton>`](./EditInDialogButton.md), [`<UpdateButton>`](./UpdateButton.md) |
-| `updateMany`       | [`<BulkUpdateButton>`](./BulkUpdateButton.md) |
-| `delete`           | [`<DeleteButton>`](./DeleteButton.md), [`<EditableDatagrid>`](./EditableDatagrid.md) |
-| `deleteMany`       | [`<BulkDeleteButton>`](./BulkDeleteButton.md) |
+| `updateMany`       | [`<BulkUpdateButton>`](./Buttons.md#bulkupdatebutton) |
+| `delete`           | [`<DeleteButton>`](./Buttons.md#deletebutton), [`<EditableDatagrid>`](./EditableDatagrid.md) |
+| `deleteMany`       | [`<BulkDeleteButton>`](./Buttons.md#bulkdeletebutton) |
 
 A simple react-admin app with one `<Resource>` using [guessers](./Features.md#guessers--scaffolding) for the `list`, `edit`, and `show` pages is a good start.
 
@@ -1208,4 +1208,4 @@ export const dataProvider = withLifecycleCallbacks(baseDataProvider, [
 ]);
 ```
 
-Check the [withLifecycleCallbacks](./withLifecycleCallbacks.md) documentation for more details.
+Check the [withLifecycleCallbacks](./withLifecycleCallbacks.md) documentation for more details.

docs/DataProviders.md

@@ -500,7 +500,7 @@ React-admin uses [React Query](https://tanstack.com/query/v5/) to fetch, cache a
 * Query results that are no longer used in the current page are labeled as "inactive" and remain in the cache in case they are used again at a later time.
 * By default, "inactive" queries are garbage collected after 5 minutes.
 * Queries that fail are silently retried 3 times, with exponential backoff delay before capturing and displaying an error to the UI.
-* Query results by default are structurally shared to detect if data has actually changed and if not, the data reference remains unchanged to better help with value stabilization with regards to `useMemo` and `useCallback`. 
+* Query results by default are structurally shared to detect if data has actually changed and if not, the data reference remains unchanged to better help with value stabilization in regard to `useMemo` and `useCallback`. 
 
 If you want to override the react-query default query and mutation default options, or use a specific client or mutation cache, you can create your own `QueryClient` instance and pass it to the `<Admin queryClient>` prop:
 
@@ -786,7 +786,7 @@ export const loader = ({ request }: LoaderFunctionArgs) => {
 
 The following `dataProvider` extends an existing one and leverages [`withLifecycleCallbacks`](#adding-lifecycle-callbacks) to modify the `dataProvider.create()` and `dataProvider.update()` methods for the `posts` resource only with the [`beforeSave`](./withLifecycleCallbacks.md#beforesave) methods. 
 
-It works as follow:
+It works as follows:
 - it grabs the Cloudinary signature to allow the autentication in the request;
 - it creates a new `FormData` object with the file received from the form;
 - it sends this file to the Cloudinary API; 

docs/Edit.md

@@ -361,7 +361,7 @@ The default `onSuccess` function is:
 
 **Tip**: If you just want to customize the redirect behavior, you can use [the `redirect` prop](#redirect) instead.
 
-**Tip**: When you use `mutationMode="pessimistic"`, the `onSuccess` function receives the response from the `dataProvider.update()` call, which is the created/edited record (see [the dataProvider documentation for details](./DataProviderWriting.md#response-format)). You can use that response in the success side effects: 
+**Tip**: When you use `mutationMode="pessimistic"`, the `onSuccess` function receives the response from the `dataProvider.update()` call, which is the created/edited record (see [the dataProvider documentation for details](./DataProviderWriting.md#update)). You can use that response in the success side effects: 
 
 {% raw %}
 ```jsx
@@ -884,4 +884,4 @@ export const BookEdit = () => {
         </Container>
     );
 };
-```
+```

docs/EditableDatagrid.md

@@ -203,7 +203,7 @@ The `<EditableDatagrid>` component renders the `editForm` elements in a `<table>
 
 ## `mutationMode`
 
-Use the `mutationMode` prop to specify the [mutation mode](./Edit.html#mutationmode) for the edit and delete actions. By default, the `<EditableDatagrid>` uses the `undoable` mutation mode. You can change it to `optimistic` or `pessimistic` if you prefer.
+Use the `mutationMode` prop to specify the [mutation mode](./Edit.md#mutationmode) for the edit and delete actions. By default, the `<EditableDatagrid>` uses the `undoable` mutation mode. You can change it to `optimistic` or `pessimistic` if you prefer.
 
 ```jsx
 <EditableDatagrid mutationMode="pessimistic">

docs/Features.md

@@ -96,7 +96,7 @@ const PostList = () => {
 
 The data provider object is responsible for translating the data provider method calls into HTTP requests, and for translating the HTTP responses into data provider method results.
 
-And by the way, using `useEffect` for data fetching is cumbersome. Instead, you can rely on the [specialized data provider hooks](./Actions.md#dataprovider-method-hooks), such as `useGetList`:
+And by the way, using `useEffect` for data fetching is cumbersome. Instead, you can rely on the [specialized data provider hooks](./Actions.md#query-hooks), such as `useGetList`:
 
 ```jsx
 import { useGetList } from 'react-admin';

docs/FilteringTutorial.md

@@ -427,7 +427,7 @@ export default {
 </video>
 
 
-Saved Queries let users save a combination of filters and sort parameters into a new, personal filter. Saved queries persist between sessions, so users can find their custom queries even after closing and reopening the admin. Saved queries are available both for the Filter Button/Form combo and for the `<FilterList>` Sidebar. It's enabled by default for the Filter Button/Form combo but you have to add it yourself in the `<FilterList>` Sidebar.
+Saved Queries let users save a combination of filters and sort parameters into a new, personal filter. Saved queries persist between sessions, so users can find their custom queries even after closing and reopening the admin. Saved queries are available both for the Filter Button/Form combo and for the `<FilterList>` Sidebar. It's enabled by default for the Filter Button/Form combo, but you have to add it yourself in the `<FilterList>` Sidebar.
 
 `<SavedQueriesList>` is a complement to `<FilterList>` sections for the filter sidebar
 

docs/IfCanAccess.md

@@ -114,7 +114,7 @@ const EditCompanyButton = () => {
 
 `ra-rbac` shows a Not Found page when users try to access a page they don't have the permissions for. It is considered good security practice not to disclose to a potentially malicious user that a page exists if they are not allowed to see it.
 
-However, should you prefer to show an Access Denied screen in those cases, you can do so by specifying a `fallback` component in `<IfCanAccess>`:
+However, should you prefer to show an 'Access Denied' screen in those cases, you can do so by specifying a `fallback` component in `<IfCanAccess>`:
 
 ```tsx
 // in src/posts/PostCreate.tsx

docs/Inputs.md

@@ -325,7 +325,7 @@ Set `helperText` to `false` to remove the empty line below the input. Beware tha
 
 ## `label`
 
-The input label. In i18n apps, the label is passed to the translate function. When omitted, the `source` property is humanized and used as a label. Set `label={false}` to hide the label.
+The input label. In i18n apps, the label is passed to the `translate` function. When omitted, the `source` property is humanized and used as a label. Set `label={false}` to hide the label.
 
 ```tsx
 <TextInput source="title" /> {/* input label is "Title" */}

docs/JsonSchemaForm.md

@@ -117,7 +117,7 @@ For `number` and `integer` fields, you can also specify the `format` to render a
 -   `range`
 -   `radio`
 
-`ra-json-schema-form` comes with the an additional UI widget for `string` fields: `reference`. It's the equivalent of [react-admin's `<ReferenceInput>` component](https://marmelab.com/react-admin/ReferenceInput.html). It fetches the foreign key, and uses a relationship to populate the list of options.
+`ra-json-schema-form` comes with an additional UI widget for `string` fields: `reference`. It's the equivalent of [react-admin's `<ReferenceInput>` component](https://marmelab.com/react-admin/ReferenceInput.html). It fetches the foreign key, and uses a relationship to populate the list of options.
 
 Specify the `reference`, `optionText`, and other options through the `ui:options` UI schema directive:
 

docs/List.md

@@ -950,7 +950,7 @@ The title can be either a string or a React element.
 
 ## `sx`: CSS API
 
-The `<List>` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `sx` property (see [the `sx` documentation](./SX.md) for syntax and examples). This property accepts the following subclasses:
+The `<List>` component accepts the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `sx` property (see [the `sx` documentation](./SX.md) for syntax and examples). This property accepts the following subclasses:
 
 | Rule name             | Description                                                   |
 |-----------------------|---------------------------------------------------------------|
@@ -982,7 +982,7 @@ const PostList = () => (
 
 ## Scaffolding a List page
 
-You can use [`<ListGuesser>`](./ListGuesser.md) to quickly bootstrap an List view on top of an existing API, without adding the fields one by one.
+You can use [`<ListGuesser>`](./ListGuesser.md) to quickly bootstrap a List view on top of an existing API, without adding the fields one by one.
 
 ```jsx
 // in src/App.js
@@ -1079,7 +1079,7 @@ const PostList = () => (
 
 ## Rendering An Empty List
 
-When there is no data, react-admin displays a special page inviting the user to create the first record. This page can be customized using [the `empty` prop](#empty-empty-page-component).
+When there is no data, react-admin displays a special page inviting the user to create the first record. This page can be customized using [the `empty` prop](#empty).
 
 You can set the `empty` props value to `false` to render an empty list instead.
 

docs/Routing.md

@@ -123,7 +123,7 @@ const App = () => (
 export default App;
 ```
 
-## Using A Custom Router 
+## Using A Custom Router
 
 By default, react-admin creates a [HashRouter](https://reactrouter.com/en/6/router-components/hash-router#hashrouter). The hash portion of the URL (i.e. `#/posts/123` in the example) contains the main application route. This strategy has the benefit of working without a server, and with legacy web browsers. 
 

docs/Show.md

@@ -98,7 +98,7 @@ export const PostShow = () => (
 
 ## `aside`
 
-You can pass an aside element to the `<Show>` component. It will be rendered on the right side of the page, below the actions toolbar.
+You can pass an aside element to the `<Show>` component. It will be rendered on the right side of the page, below the action toolbar.
 
 The aside component renders in the same `RecordContext` as the `Show` child component. That means you can display details of the current `record` in the aside component by calling `useRecordContext`:
 

docs/SolarLayout.md

@@ -369,7 +369,7 @@ By default, just like the classic react-admin menu, it contains menu items for e
 | `userMenu`      | Optional | Component |         | Allows to customize the user menu                            |
 | `sx`            | Optional | `SxProps` |         | Style overrides, powered by MUI System                       |
 
-It also accept the props of its root `HTMLDivElement`.
+It also accepts the props of its root `HTMLDivElement`.
 
 In addition, the `SolarMenu` object provides shortcuts to its items components:
 

docs/UpdateButton.md

@@ -213,7 +213,7 @@ The default `onSuccess` function is:
 }
 ```
 
-**Tip**: When you use `mutationMode="pessimistic"`, the `onSuccess` function receives the response from the `dataProvider.update()` call, which is the edited record (see [the dataProvider documentation for details](./DataProviderWriting.md#response-format)). You can use that response in the success side effects: 
+**Tip**: When you use `mutationMode="pessimistic"`, the `onSuccess` function receives the response from the `dataProvider.update()` call, which is the edited record (see [the dataProvider documentation for details](./DataProviderWriting.md#update)). You can use that response in the success side effects: 
 
 {% raw %}
 ```jsx