Merge pull request #8330 from marmelab/docs-glitches

[Doc] Fix anchors and typos

docs/Admin.md

@@ -537,7 +537,7 @@ You might want to dynamically define the resources when the app starts. To do so
 
 ### Using a Function As `<Admin>` Child
 
-The `<Admin>` component accepts a function as one of its children and this function can return a Promise. If you also defined an `authProvider`, the child function will receive the result of a call to `authProvider.getPermissions()` (you can read more about this in the [Auth Provider](./Authentication.md#authorization) chapter).
+The `<Admin>` component accepts a function as one of its children and this function can return a Promise. If you also defined an `authProvider`, the child function will receive the result of a call to `authProvider.getPermissions()` (you can read more about this in the [Auth Provider](./Authentication.md#enabling-auth-features) chapter).
 
 For instance, getting the resource from an API might look like:
 

docs/ArrayInput.md

@@ -38,7 +38,7 @@ To edit arrays of data embedded inside a record, `<ArrayInput>` creates a list o
 
 ## Usage
 
-`<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/api/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.
+`<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/api/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.
 
 ```jsx
 import { 

docs/AutocompleteArrayInput.md

@@ -129,7 +129,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. `<SelectInput>` will then render a menu item at the bottom of the list, which will render the passed element when clicked.
+To allow users to add new options, pass a React element as the `create` prop. `<AutocompleteArrayInput>` will then render a menu item at the bottom of the list, which will render the passed element when clicked.
 
 {% raw %}
 ```jsx

docs/Buttons.md

@@ -316,7 +316,7 @@ The ripple effect can cause [performance issues](https://github.com/marmelab/rea
 
 It's worth noting that removing the ripple will cause accessibility issues, including a lack of focus states during tab navigating for components like `BooleanInput` and `CheckboxGroupInput`. 
 
-Note: The `disableRipple` was set to `true` in React Admin for a time, but was reimplement due to accessibility concerns. If you'd like to reimplement the static ripple colour effect, you can use the [React Admin's previous implementation](https://github.com/marmelab/react-admin/blob/994079cbca810a2e74d85329e684811645b04ae2/packages/ra-ui-materialui/src/defaultTheme.ts#L31) as a starting point. [The MUI docs](https://mui.com/material-ui/api/button-base/#props) also gives details on how to reimplement focus styles using the `Mui-focusVisible` class.
+Note: The `disableRipple` was set to `true` in React Admin for a time, but was reimplemented due to accessibility concerns. If you'd like to reimplement the static ripple colour effect, you can use the [React Admin's previous implementation](https://github.com/marmelab/react-admin/blob/994079cbca810a2e74d85329e684811645b04ae2/packages/ra-ui-materialui/src/defaultTheme.ts#L31) as a starting point. [The MUI docs](https://mui.com/material-ui/api/button-base/#props) also gives details on how to reimplement focus styles using the `Mui-focusVisible` class.
 
 ## Miscellaneous
 
@@ -451,3 +451,5 @@ To override the style of all instances of `<MenuItemLink>` using the [MUI style
 | `& .RaUserMenu-avatar`     | Applied to the underlying `MuiAvatar` component when `useGetIdentity().avatar` is `true`                                                 |
 
 To override the style of all instances of `<UserMenu>` using the [MUI style overrides](https://mui.com/customization/globals/#css), use the `RaUserMenu` key.
+
+See [The theming documentation](./Theming.md#usermenu-customization) for more details.

docs/Ecosystem.md

@@ -37,7 +37,7 @@ See the [Available Translation](./TranslationLocales.md) page.
 
 ## Authentication Providers
 
-See the [Auth Provider](./Authentication.md#available-providers) page. Here is a list of additional packages:
+See the [Auth Provider List](./AuthProviderList.md) page. Here is a list of additional packages:
 
 ## Authorization Management
 

docs/EditGuesser.md

@@ -5,7 +5,7 @@ title: "The EditGuesser Component"
 
 # `<EditGuesser>`
 
-Use `<EditGuesser>` to quickly bootstrap a Edit view on top of an existing API, without adding the innputs one by one.
+Use `<EditGuesser>` to quickly bootstrap an Edit view on top of an existing API, without adding the innputs one by one.
 
 Just like [`<Edit>`](./Edit.md), `<EditGuesser>` fetches the data. It then analyzes the response, and guesses the inputs it should use to display a basic `<SimpleForm>` with the data. It also dumps the components it has guessed in the console, so you can copy it into your own code.
 
@@ -32,4 +32,4 @@ Then browse to the edition page for that resource, open the console, copy the co
 
 React-admin provides guessers for the Edit view (`<EditGuesser>`), the List view ([`<ListGuesser>`](./ListGuesser.md)), and the Show view ([`<ShowGuesser>`](./ShowGuesser.md)).
 
-**Tip**: Do not use the guessers in production. They are slower than manually-defined components, because they have to infer types based on the content. Besides, the guessers are not always perfect.
+**Tip**: Do not use the guessers in production. They are slower than manually-defined components, because they have to infer types based on the content. Besides, the guessers are not always perfect.

docs/EditTutorial.md

@@ -291,7 +291,7 @@ export const BookEdit = () => {
 
 ### `<EditContext>` Exposes Data And Callbacks
 
-Instead of passing the `record` and `onSubmit` callback to the `<SimpleForm>` element, react-admin prefers putting them in an [`<EditContext>`](./EditContext.md) context. This allows any descendant element to "pull" the data and callback from the context.
+Instead of passing the `record` and `onSubmit` callback to the `<SimpleForm>` element, react-admin prefers putting them in an [`<EditContext>`](./useEditContext.md) context. This allows any descendant element to "pull" the data and callback from the context.
 
 {% raw %}
 ```diff
@@ -886,4 +886,4 @@ Users often need to edit data from several resources in the same form. React-adm
 
 ![EditInDialogButton](https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.gif)
 
-![ReferenceManyInput](./img/reference-many-input.gif)
+![ReferenceManyInput](./img/reference-many-input.gif)

docs/FileInput.md

@@ -5,7 +5,7 @@ title: "The FileInput Component"
 
 # `<FileInput>`
 
-`<FileInput>` allows editing and uploading file attachments (pdfs, csv, images, etc). It is powered by [react-dropzone](https://github.com/okonet/react-dropzone).
+`<FileInput>` allows editing and uploading file attachments (pdfs, csv, images, etc.). It is powered by [react-dropzone](https://github.com/okonet/react-dropzone).
 
 ![FileInput](./img/file-input.png)
 

docs/Form.md

@@ -80,7 +80,7 @@ export const PostCreate = () => (
 
 ## `id`
 
-Normally, a submit button only works when placed inside a `<form>` tag. However, you can place a submit button outside of the form if the submit button `form` matches the form `id`.
+Normally, a submit button only works when placed inside a `<form>` tag. However, you can place a submit button outside the form if the submit button `form` matches the form `id`.
 
 Set this form `id` via the `id` prop.
 

docs/ImageInput.md

@@ -5,7 +5,7 @@ title: "The ImageInput Component"
 
 # `<ImageInput>`
 
-`<ImageInput>` allows editing and uploading images (png, jpg, gif, etc). It is powered by [react-dropzone](https://github.com/okonet/react-dropzone).
+`<ImageInput>` allows editing and uploading images (png, jpg, gif, etc.). It is powered by [react-dropzone](https://github.com/okonet/react-dropzone).
 
 ![ImageInput](./img/image-input.png)
 
@@ -45,7 +45,7 @@ After modification by the user, the value is stored as an array of objects with
 * `src`: An [object URL](https://developer.mozilla.org/fr/docs/Web/API/URL/createObjectURL) for the `File`, e.g. 'blob:https://example.com/1e67e00e-860d-40a5-89ae-6ab0cbee6273'
 * `rawFile`: [The `File` object](https://developer.mozilla.org/fr/docs/Web/API/File) itself
 
-It is the responsibility of your `dataProvider` to send the file to the server (encoded in Base64, or using multipart upload) and to transform the `src` property. See [the Data Provider documentation](./DataProviders.html#handling-file-uploads) for an example.
+It is the responsibility of your `dataProvider` to send the file to the server (encoded in Base64, or using multipart upload) and to transform the `src` property. See [the Data Provider documentation](./DataProviders.md#handling-file-uploads) for an example.
 
 Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.
 

docs/MultiLevelMenu.md

@@ -113,7 +113,7 @@ const MyMenu = () => (
 );
 ```
 
-Check [the `<MultiLevelMenu.Item>` section](#MultiLevelMenuitem) for more information.
+Check [the `<MultiLevelMenu.Item>` section](#multilevelmenuitem) for more information.
 
 ## `initialOpen`
 

docs/Reference.md

@@ -174,7 +174,7 @@ title: "Reference"
 * [`useGetMany`](./useGetMany.md)
 * [`useGetManyReference`](./useGetManyReference.md)
 * [`useGetOne`](./useGetOne.md)
-* [`useGetPermissions`](./Authentication.md#usegetpermissions-hook)
+* [`useGetPermissions`](./WithPermissions.md)
 * [`useHasLock`](https://marmelab.com/ra-enterprise/modules/ra-realtime#locks-on-content)<img class="icon" src="./img/premium.svg" />
 * [`useHasLocks`](https://marmelab.com/ra-enterprise/modules/ra-realtime#locks-on-content)<img class="icon" src="./img/premium.svg" />
 * [`useInput`](./useInput.md)

docs/Show.md

@@ -325,7 +325,7 @@ const PostShow = () => (
 
 ## Displaying Fields Depending On User Permissions
 
-If you want to display some fields only to users with specific permissions, use the `usePermissions` hook and JSX conditions to show or hide fields.
+If you want to display some fields only to users with specific permissions, use the [`usePermissions`](./usePermissions.md) hook and JSX conditions to show or hide fields.
 
 Here's an example inside a `Show` view with a `SimpleShowLayout` and a custom `actions` component:
 
@@ -388,7 +388,7 @@ export const UserShow = () => {
 ```
 {% endraw %}
 
-For more details about permissions, check out the [authProvider documentation](./Authentication.md#authorization).
+For more details about permissions, check out the [authProvider documentation](./Authentication.md).
 
 ## Adding `meta` To The DataProvider Call
 

docs/Theming.md

@@ -433,7 +433,7 @@ export const PostList = () => (
 ```
 {% endraw %}
 
-**Tip**: if you don't want to create a custom component to apply conditional formatting, you can also use [the `<WithRecord>` component](./WithRecord.md)].
+**Tip**: if you don't want to create a custom component to apply conditional formatting, you can also use [the `<WithRecord>` component](./WithRecord.md).
 
 ## `useMediaQuery` Hook
 

docs/TranslationSetup.md

@@ -82,7 +82,7 @@ const App = () => (
 );
 ```
 
-That's all it takes to have a multilingual UI. As an added benefit, once a user has chosen a locale different than the default one, the react-admin app will always render using that locale (thanks to [the Store](./Store.md)).
+That's all it takes to have a multilingual UI. As an added benefit, once a user has chosen a locale different from the default one, the react-admin app will always render using that locale (thanks to [the Store](./Store.md)).
 
 ## Using The Browser Locale
 

docs/Tutorial.md

@@ -299,7 +299,7 @@ Let's get back to `<Datagrid>`. It reads the data fetched by `<List>`, then rend
 
 [![Users List](./img/tutorial_users_list_selected_columns.png)](./img/tutorial_users_list_selected_columns.png)
 
-In react-admin, most configuration is achieved via components. `<Datagrid>` could have taken a `columns` prop expecting a configuration object. But by using the `children` prop instead, it opens the door to much powerful customization - for instance, changing the column type, or using your own component for a given column.
+In react-admin, most configuration is achieved via components. `<Datagrid>` could have taken a `columns` prop expecting a configuration object. But by using the `children` prop instead, it opens the door to a much powerful customization - for instance, changing the column type, or using your own component for a given column.
 
 ## Using Field Types
 
@@ -498,7 +498,7 @@ The post list now displays the user names on each line.
 
 [![Post List With User Names](./img/tutorial_list_user_name.png)](./img/tutorial_list_user_name.png)
 
-The `<ReferenceField>` component fetches the reference data, creates a `RecordContext` with the result, and renders the record representation (or its its children).
+The `<ReferenceField>` component fetches the reference data, creates a `RecordContext` with the result, and renders the record representation (or its children).
 
 **Tip**: Look at the network tab of your browser again: react-admin deduplicates requests for users, and aggregates them in order to make only *one* HTTP request to the `/users` endpoint for the whole Datagrid. That's one of many optimizations that keep the UI fast and responsive.