Merge pull request #9235 from WiXSL/fix-general-docs-typos

[Doc] Fix docs anchors and typos

Author: slax57

docs/AccordionForm.md

@@ -520,7 +520,7 @@ Check [the `<AutoSave>` component](./AutoSave.md) documentation for more details
 
 ## Role-Based Access Control (RBAC)
 
-Fine-grained permissions control can be added by using the [`<AccordionForm>`](./AuthRBAC.md#accordionform), [`<AccordionFormPanel>`](./AuthRBAC.md#accordionformpanel) and [`<AccordionSection>`](./AuthRBAC.md#accordionsection) components provided by the `@react-admin/ra-enterprise` package. 
+Fine-grained permissions control can be added by using the [`<AccordionForm>`](./AuthRBAC.md#accordionform), [`<AccordionFormPanel>`](./AuthRBAC.md#accordionform) and [`<AccordionSection>`](./AuthRBAC.md#accordionsection) components provided by the `@react-admin/ra-enterprise` package. 
 
 {% raw %}
 ```tsx

docs/AppBar.md

@@ -100,7 +100,7 @@ export const MyAppBar = () => (
 
 ![App bar with a settings button](./img/AppBar-children.png)
 
-**Tip**: Whats the `<TitlePortal>`? It's a placeholder for the page title, that components in the page can fill using [the `<Title>` component](./Title.md). `<Title>` uses a [React Portal](https://react.dev/reference/react-dom/createPortal) under the hood. `<TitlePortal>` takes all the available space in the app bar, so it "pushes" the following children to the right.
+**Tip**: What's the `<TitlePortal>`? It's a placeholder for the page title, that components in the page can fill using [the `<Title>` component](./Title.md). `<Title>` uses a [React Portal](https://react.dev/reference/react-dom/createPortal) under the hood. `<TitlePortal>` takes all the available space in the app bar, so it "pushes" the following children to the right.
 
 **Tip**: `<TitlePortal>` renders a [Material-ui `<Typography>`](https://mui.com/material-ui/react-typography/) element that you can customize by passing your own props:
 
@@ -135,7 +135,7 @@ const MyAppBar = () => (
 
 ## `color`
 
-React-admin's `<AppBar>` renders an Material UI `<AppBar>`, which supports a `color` prop to set the app bar color depending on the theme. By default, the app bar color is set to the `secondary` theme color.
+React-admin's `<AppBar>` renders a Material UI `<AppBar>`, which supports a `color` prop to set the app bar color depending on the theme. By default, the app bar color is set to the `secondary` theme color.
 
 This means you can set the app bar color to 'default', 'inherit', 'primary', 'secondary', 'transparent', or any string.
 

docs/ArrayField.md

@@ -24,7 +24,7 @@ title: "The ArrayField Component"
         {
             uuid: '34fdf393-f449-4b04-a423-38ad02ae159e',
             date: '2012-08-10T00:00:00.000Z',
-            url: 'http://example.com/foo/bar.html',
+            url: 'https://example.com/foo/bar.html',
         },
         {
             uuid: 'd907743a-253d-4ec1-8329-404d4c5e6cf1',

docs/AutocompleteInput.md

@@ -747,7 +747,7 @@ const PostCreate = () => {
 ```
 {% endraw %}
 
-Use the `create` prop when you want a more polished or complex UI. For example an Material UI `<Dialog>` asking for multiple fields because the choices are from a referenced resource.
+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

docs/Buttons.md

@@ -640,7 +640,7 @@ const PostEditActions = () => (
 );
 
 export const PostEdit = () => (
-    <Edit actions={<PostEditActions>}>
+    <Edit actions={<PostEditActions />}>
         <SimpleForm>
             <TextInput source="title" />
             <TextInput source="body" />

docs/CheckForApplicationUpdate.md

@@ -122,13 +122,13 @@ If you just want to customize the notification texts, including the button, chec
 
 ## `url`
 
-You can customize the URL fetched to detect updates by providing the `url` prop. By default it's the current URL.
+You can customize the URL fetched to detect updates by providing the `url` prop. By default, it's the current URL.
 
 ```tsx
 // in src/MyLayout.tsx
 import { CheckForApplicationUpdate, Layout, LayoutProps } from 'react-admin';
 
-const MY_APP_ROOT_URL = 'http://admin.mycompany.com';
+const MY_APP_ROOT_URL = 'https://admin.mycompany.com';
 
 export const MyLayout = ({ children, ...props }: LayoutProps) => (
     <Layout {...props}>
@@ -143,4 +143,4 @@ export const MyLayout = ({ children, ...props }: LayoutProps) => (
 You can customize the texts of the default notification by overriding the following keys:
 
 * `ra.notification.application_update_available`: the notification text
-* `ra.action.update_application`: the reload button text
+* `ra.action.update_application`: the reload button text

docs/CreateInDialogButton.md

@@ -65,7 +65,7 @@ In the above example, `<CreateInDialogButton>` is used to create a new employee
 
 `<CreateInDialogButton>` accepts the following props:
 
-* `inline`: set to true to display only an Material UI `<IconButton>` instead of the full `<Button>`. The label will still be available as a `<Tooltip>` though.
+* `inline`: set to true to display only a Material UI `<IconButton>` instead of the full `<Button>`. The label will still be available as a `<Tooltip>` though.
 * `icon`: allows to override the default icon.
 * `label`: allows to override the default button label. I18N is supported.
 * `ButtonProps`: object containing props to pass to Material UI's `<Button>`.

docs/CreateReactAdmin.md

@@ -19,7 +19,7 @@ yarn create react-admin your-admin-name
 
 The terminal will then ask you to choose:
 - a data provider
-- a auth provider
+- an auth provider
 - the names of the resources to add
 - the package manager to use to install the dependencies
 

docs/CreateReactApp.md

@@ -71,7 +71,7 @@ Your app is now up and running, you can start tweaking it.
 
 If your users might keep the application open for a long time, it's a good idea to add the [`<CheckForApplicationUpdate>`](./CheckForApplicationUpdate.md) component. It will check whether a more recent version of your application is available and prompt users to reload their browser tab.
 
-To determine whether your application has been updated, it fetches the current page at a regular interval, builds an hash of the response content (usually the HTML) and compares it with the previous hash.
+To determine whether your application has been updated, it fetches the current page at a regular interval, builds a hash of the response content (usually the HTML) and compares it with the previous hash.
 
 To enable it, start by creating a custom layout:
 
@@ -105,4 +105,4 @@ const App = () => (
 );
 
 export default App;
-```
+```

docs/Edit.md

@@ -103,7 +103,7 @@ export const PostEdit = () => (
 
 Common buttons used as Edit actions are:
 
-- [`<CreateButton>`](./CreateButton.md) to create a new record
+- [`<CreateButton>`](./Buttons.md#createbutton) to create a new record
 - [`<ListButton>`](./Buttons.md#listbutton) to go back to the list
 - [`<ShowButton>`](./Buttons.md#showbutton) to go to the show page
 - [`<UpdateButton>`](./UpdateButton.md) to trigger a change in the data

docs/EditInDialogButton.md

@@ -58,7 +58,7 @@ const CompanyShow = () => (
 
 It accepts the following props:
 
-* `inline`: set to true to display only an Material UI `<IconButton>` instead of the full `<Button>`. The label will still be available as a `<Tooltip>` though.
+* `inline`: set to true to display only a Material UI `<IconButton>` instead of the full `<Button>`. The label will still be available as a `<Tooltip>` though.
 * `icon`: allows to override the default icon.
 * `label`: allows to override the default button label. I18N is supported.
 * `ButtonProps`: object containing props to pass to Material UI's `<Button>`.

docs/Features.md

@@ -741,7 +741,7 @@ When users submit a form, or delete a record, the UI reflects their change immed
 
 This undo feature is enabled by default, and requires no particular setup on the server side. In fact, react-admin delays the call to the data provider for mutations, to give users a "grace" period. That's why the actual call to `dataProvider.update()` occurs 5 seconds after the user submits an update form - even though the UI reflects the changes immediately.
 
-You can disable this feature page by page by choosing a different [mutationMode](./Edit.md#mutationmode).
+You can disable this feature page by page, by choosing a different [mutationMode](./Edit.md#mutationmode).
 
 ## Roles & Permissions
 
@@ -1157,7 +1157,7 @@ For instance, the Saved Queries feature lets users **save a combination of filte
 </video>
 
 
-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 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.
 
 ```diff
 import { FilterList, FilterListItem, List, Datagrid } from 'react-admin';
@@ -1373,7 +1373,7 @@ React-admin is **fully internationalized**.
 </video>
 
 
-The default interface messages (for buttons, tooltips, input labels, etc) are in English. You can translate them to any of [the 30+ languages supported by react-admin](./TranslationLocales.md) by importing the appropriate translation package. For instance, to translate to French:
+The default interface messages (for buttons, tooltips, input labels, etc.) are in English. You can translate them to any of [the 30+ languages supported by react-admin](./TranslationLocales.md) by importing the appropriate translation package. For instance, to translate to French:
 
 ```jsx
 import { Admin } from 'react-admin';

docs/Inputs.md

@@ -54,7 +54,7 @@ All input components accept the following props:
 
 React-admin uses [react-hook-form](https://react-hook-form.com/) to control form inputs. Each input component also accepts all react-hook-form [useController](https://react-hook-form.com/docs/usecontroller) hook options.
 
-Additional props are passed down to the underlying component (usually an Material UI component). For instance, when setting the `variant` prop on a `<TextInput>` component, the underlying Material UI `<TextField>` receives it, and renders it with a different variant. Refer to the documentation of each Input component to see the underlying Material UI component and its props.
+Additional props are passed down to the underlying component (usually a Material UI component). For instance, when setting the `variant` prop on a `<TextInput>` component, the underlying Material UI `<TextField>` receives it, and renders it with a different variant. Refer to the documentation of each Input component to see the underlying Material UI component and its props.
 
 ## Which Input Component to Use?
 
@@ -596,7 +596,7 @@ import { FormDataConsumer } from 'react-admin';
 
 Material UI offers [3 variants for text fields](https://mui.com/material-ui/react-text-field/#basic-textfield): `outlined`, `filled`, and `standard`. The default react-admin theme uses the `filled` variant.
 
-Most Input components pass their additional props down to the root component, which is often an Material UI Field component. This means you can pass a `variant` prop to override the variant of a single input:
+Most Input components pass their additional props down to the root component, which is often a Material UI Field component. This means you can pass a `variant` prop to override the variant of a single input:
 
 ```tsx
 <TextInput source="name" variant="outlined" />
@@ -761,7 +761,7 @@ Now the component will render with a label:
 
 ### Using Material UI Field Components
 
-Instead of HTML `input` elements, you can use an Material UI component like `TextField`. To bind Material UI components to the form values, use the `useController()` hook:
+Instead of HTML `input` elements, you can use a Material UI component like `TextField`. To bind Material UI components to the form values, use the `useController()` hook:
 
 ```tsx
 // in LatLongInput.js
@@ -885,7 +885,7 @@ const LatLngInput = (props: BoundedTextFieldProps) => {
 };
 ```
 
-Here is another example, this time using an Material UI `Select` component:
+Here is another example, this time using a Material UI `Select` component:
 
 ```tsx
 // in SexInput.js

docs/Layout.md

@@ -211,7 +211,7 @@ export const MyError = ({
 };
 ```
 
-**Tip:** [React's Error Boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) are used internally to display the Error Page whenever an error occurs. Error Boundaries only catch errors during rendering, in lifecycle methods, and in constructors of the components tree. This implies in particular that errors during event callbacks (such as 'onClick') are not concerned. Also note that the Error Boundary component is only set around the main container of React Admin. In particular, you won't see it for errors thrown by the [sidebar Menu](./Menu.md), nor the [AppBar](#customizing-the-appbar-content). This ensures the user is always able to navigate away from the Error Page.
+**Tip:** [React's Error Boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) are used internally to display the Error Page whenever an error occurs. Error Boundaries only catch errors during rendering, in lifecycle methods, and in constructors of the components tree. This implies in particular that errors during event callbacks (such as 'onClick') are not concerned. Also note that the Error Boundary component is only set around the main container of React Admin. In particular, you won't see it for errors thrown by the [sidebar Menu](./Menu.md), nor the [AppBar](#adding-a-custom-context). This ensures the user is always able to navigate away from the Error Page.
 
 ## `menu`
 

docs/List.md

@@ -946,7 +946,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 (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)). 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 (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses:
 
 | Rule name             | Description                                                   |
 |-----------------------|---------------------------------------------------------------|

docs/ListTutorial.md

@@ -514,8 +514,8 @@ On Mobile, `<Datagrid>` doesn't work well - the screen is too narrow. You should
 
 To use `<Datagrid>` on desktop and `<SimpleList>` on mobile, use the `useMediaQuery` hook:
 
-```jsx
-// in src/posts.js
+```tsx
+// in src/posts.tsx
 import * as React from 'react';
 import { useMediaQuery, Theme } from '@mui/material';
 import { List, SimpleList, Datagrid, TextField, ReferenceField } from 'react-admin';

docs/LongForm.md

@@ -355,7 +355,7 @@ export const TagEdit = () => (
 
 The children of `<LongForm>` must be `<LongForm.Section>` elements.
 
-This component adds a section title (using a `<Typography variant="h4">`), then renders each child inside a [Material UI `<Stack>`](https://mui.com/material-ui/react-stack/), and finally adds an Material UI `<Divider>` at the bottom of the section.
+This component adds a section title (using a `<Typography variant="h4">`), then renders each child inside a [Material UI `<Stack>`](https://mui.com/material-ui/react-stack/), and finally adds a Material UI `<Divider>` at the bottom of the section.
 
 It accepts the following props:
 
@@ -470,7 +470,7 @@ Check [the `<AutoSave>` component](./AutoSave.md) documentation for more details
 
 ## Role-Based Access Control (RBAC)
 
-Fine-grained permissions control can be added by using the [`<LongForm>`](./AuthRBAC.md#longform) and [`<LongFormSection>`](./AuthRBAC.md#longformsection) components provided by the `@react-admin/ra-enterprise` package. 
+Fine-grained permissions control can be added by using the [`<LongForm>`](./AuthRBAC.md#longform) and [`<LongFormSection>`](./AuthRBAC.md#longform) components provided by the `@react-admin/ra-enterprise` package. 
 
 {% raw %}
 ```tsx

docs/NextJs.md

@@ -115,7 +115,7 @@ This implies the creation of a new page in the Next.js app. Create a new file at
 - App Router: `src/app/admin/page.tsx`
 - Pages Router: `src/pages/admin/index.tsx`
 
-No matter which system you choose, the file should contains the same code:
+No matter which system you choose, the file should contain the same code:
 
 ```tsx
 import { NextPage } from "next";
@@ -225,4 +225,4 @@ const AdminApp = () => (
 export default AdminApp;
 ```
 
-Your react-admin app now uses the Supabase API to fetch and update data.
+Your react-admin app now uses the Supabase API to fetch and update data.

docs/NumberField.md

@@ -119,7 +119,7 @@ import { NumberField }  from 'react-admin';
 
 For information, the default `transform` function is:
 
-```jsx
+```tsx
 const defaultTransform = value => {
     if (!value || typeof value === 'number') {
         return value;
@@ -129,4 +129,4 @@ const defaultTransform = value => {
         return value;
     }
 };
-```
+```

docs/Pagination.md

@@ -53,7 +53,7 @@ const PostPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100]}
 
 ## Infinite Scroll
 
-On mobile devices, the `<Pagination>` component is not very user friendly. The expected user experience is to reveal more records when the user scrolls to the bottom of the list. This UX is also useful on desktop, for lists with a large number of records.
+On mobile devices, the `<Pagination>` component is not very user-friendly. The expected user experience is to reveal more records when the user scrolls to the bottom of the list. This UX is also useful on desktop, for lists with a large number of records.
 
 <video controls autoplay playsinline muted loop width="100%">
   <source src="./img/infinite-book-list.webm" poster="./img/infinite-book-list.webp" type="video/webm">
@@ -86,4 +86,4 @@ const BookList = () => (
 
 `<InfiniteList>` uses a special pagination component, `<InfinitePagination>`, which doesn't display any pagination buttons. Instead, it displays a loading indicator when the user scrolls to the bottom of the list. But you cannot use this `<InfinitePagination>` inside a regular `<List>` component.
 
-For more information, see [the `<InfiniteList>` documentation](./InfiniteList.md).
+For more information, see [the `<InfiniteList>` documentation](./InfiniteList.md).

docs/Permissions.md

@@ -253,7 +253,7 @@ export const UserCreate = () => {
 }
 ```
 
-**Tip**: If you use RBAC, use [`ra-rbac`'s `<SimpleForm>` component](./AuthRBAC.md#simpleform) instead. It render its children only if the user has the required permissions.
+**Tip**: If you use RBAC, use [`ra-rbac`'s `<SimpleForm>` component](./AuthRBAC.md#simpleform) instead. It renders its children only if the user has the required permissions.
 
 ```jsx
 import { Create, TextInput } from 'react-admin';

docs/Realtime.md

@@ -209,7 +209,7 @@ To create your own translations, you can use the TypeScript types to see the str
 
 Here is an example of how to customize translations in your app:
 
-```jsx
+```tsx
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
 import frenchMessages from 'ra-language-french';

docs/RecordRepresentation.md

@@ -5,7 +5,7 @@ title: "The RecordRepresentation Component"
 
 Render the record representation, leveraging the [`recordRepresentation`](./Resource.md#recordrepresentation) prop of the parent `<Resource>` component.
 
-You can also uses its hook version: [`<useGetRecordRepresentation>`](./useGetRecordRepresentation.md).
+You can also use its hook version: [`<useGetRecordRepresentation>`](./useGetRecordRepresentation.md).
 
 ## Usage