Merge pull request marmelab#7049 from marmelab/doc-fix-anchors

[4.0.0-alpha.2] Fix docs anchors

UPGRADE.md

@@ -6,7 +6,7 @@ Custom routes used to be provided to the `Admin` component through the `customRo
 
 As we upgraded to react-router v6 (more on that later), we had to come up with another way to support custom routes.
 
-Meet the `<CustomRoutes>` component. You you can pass it as a child of `<Admin>`, just like a `<Resource>`. It accepts react-router `<Route>` as its children (and only that). You can specify whether the custom routes it contains should be rendered with the `<Layout>` or not by setting the `noLayout` prop. It's `false` by default.
+Meet the `<CustomRoutes>` component. You can pass it as a child of `<Admin>`, just like a `<Resource>`. It accepts react-router `<Route>` as its children (and only that). You can specify whether the custom routes it contains should be rendered with the `<Layout>` or not by setting the `noLayout` prop. It's `false` by default.
 
 ```diff
 -import { Admin, Resource, RouteWithoutLayout } from 'react-admin';
@@ -902,7 +902,7 @@ const MyList = () => (
 
 The `<List>` component renders a Pagination component when there are records to display, and an Empty component otherwise. You can customize these components by passing your own with the `pagination`and `empty`props. 
 
-`<List>` used to inject `ListContext` props (`data`, `isLoaded`, etc.) to these Pagination component. In v4, the component rendered by `<List>` no longer receive these props. They must grab them from the ListContext instead.
+`<List>` used to inject `ListContext` props (`data`, `isLoaded`, etc.) to the Pagination component. In v4, the component rendered by `<List>` no longer receive these props. They must grab them from the ListContext instead.
 
 This means you'll have to do a few changes if you use a custom Pagination component in a List:
 

docs/Actions.md

@@ -787,7 +787,7 @@ const ApproveButton = ({ record }) => {
     const redirect = useRedirect();
     const [approve, { isLoading }] = useUpdate(
         'comments',
-        { id: record.id, data: { isApproved: true } }
+        { id: record.id, data: { isApproved: true } },
         {
             onSuccess: (data) => {
                 // success side effects go here

docs/CreateEdit.md

@@ -437,7 +437,7 @@ The default `onSuccess` function is:
 }
 ```
 
-To learn more about built-in side effect hooks like `useNotify`, `useRedirect` and `useRefresh`, check the [Querying the API documentation](./Actions.md#handling-side-effects-in-usedataprovider).
+To learn more about built-in side effect hooks like `useNotify`, `useRedirect` and `useRefresh`, check the [Querying the API documentation](./Actions.md#success-and-error-side-effects).
 
 **Tip**: When you use `mutationMode="pessimistic"`, the `onSuccess` function receives the response from the dataProvider call (`dataProvider.create()` or `dataProvider.update()`), which is the created/edited record (see [the dataProvider documentation for details](./DataProviders.md#response-format)). You can use that response in the success side effects: 
 
@@ -2178,7 +2178,7 @@ export const UserEdit = ({ permissions }) =>
 
 ### Changing The Success or Failure Notification Message
 
-Once the `dataProvider` returns successfully after save, users see a generic notification ("Element created" / "Element updated"). You can customize this message by passing a custom success side effect function as [the `<Edit onSuccess>` prop](#onsuccess):
+Once the `dataProvider` returns successfully after save, users see a generic notification ("Element created" / "Element updated"). You can customize this message by passing a custom success side effect function as [the `<Edit onSuccess>` prop](#changing-the-success-or-failure-notification-message):
 
 ```jsx
 import { Edit, useNotify, useRedirect } from 'react-admin';

docs/Ecosystem.md

@@ -21,7 +21,7 @@ See the [List](./ListTutorial.md#third-party-components) page.
 
 ## Show Related Components
 
-See the [Show](./Show.md#third-party-components) page.
+See the [Show](./ShowTutorial.md#third-party-components) page.
 
 ## Fields
 

docs/List.md

@@ -169,7 +169,7 @@ React-admin provides several List layout components:
 - [`<SimpleList>`](./SimpleList.md) displays records in a list without many details
 - [`<SingleFieldList>`](./SingleFieldList.md) displays records inline, showing one field per record 
 - [`<EditableDatagrid>`](./EditableDatagrid.md) displays records in a table AND lets users edit them inline
-- [`<Tree>`](./Tree.md) displays records in a tree structure
+- [`<Tree>`](./TreeWithDetails.md) displays records in a tree structure
 - [`<Calendar>`](./Calendar.md) displays event records in a calendar
 
 To use an alternative layout, switch the `<List>` child component:
@@ -502,7 +502,7 @@ You can also display filters as a sidebar:
 
 ![`<FilterList>` sidebar](./img/filter-sidebar.gif)
 
-For more details about customizing filters, see the [Filtering the List](./FilteringTheList.md) section. 
+For more details about customizing filters, see the [Filtering the List](./FilteringTutorial.md#filtering-the-list) section. 
 
 ## `filter`: Permanent Filter
 
@@ -579,7 +579,7 @@ export const PostList = () => (
 );
 ```
 
-See [Paginating the List](#PaginationTutorial.md) for details.
+See [Paginating the List](./ListTutorial.md#building-a-custom-pagination) for details.
 
 ## `perPage`: Pagination Size 
 
@@ -654,7 +654,7 @@ export const PostList = () => (
 
 `sort` defines the *default* sort order ; the list remains sortable by clicking on column headers.
 
-For more details on list sort, see the [Sorting The List](#sorting-the-list) section below. 
+For more details on list sort, see the [Sorting The List](./ListTutorial.md#sorting-the-list) section below. 
 
 ## `title`
 

docs/ListTutorial.md

@@ -462,7 +462,7 @@ You can also handle the loading state inside a custom list layout by grabbing th
 
 One of the most important features of the List page is the ability to search for a dedicated record. In this documentation, we use the term "filter" for the cpontrols allowing to search the list.
 
-React-admin rovides 2 possible UIs for filters, and lets you you your own if they're not sufficient.
+React-admin rovides 2 possible UIs for filters, and lets your own if they're not sufficient.
 
 The first filter UI is called "the Filer/Form Combo". 
 

docs/Reference.md

@@ -22,9 +22,9 @@ title: "Reference"
 * [`<BreadcrumbItem>`](https://marmelab.com/ra-enterprise/modules/ra-navigation#the-breadcrumbitem-component)<img class="icon" src="./img/premium.svg" />
 * [`<BooleanField>`](./Fields.md#booleanfield)
 * [`<BooleanInput>`](./Inputs.md#booleaninput-and-nullablebooleaninput)
-* [`<BulkDeleteButton>`](./List.md#bulkactionbuttons)
-* [`<BulkExportButton>`](./List.md#bulkactionbuttons)
-* [`<BulkUpdateButton>`](./List.md#bulkactionbuttons)
+* [`<BulkDeleteButton>`](./Buttons.md#bulkdeletebutton)
+* [`<BulkExportButton>`](./Buttons.md#bulkexportbutton)
+* [`<BulkUpdateButton>`](./Buttons.md#bulkupdatebutton)
 * [`<Calendar>`](https://marmelab.com/ra-enterprise/modules/ra-calendar#calendar)<img class="icon" src="./img/premium.svg" />
 * [`<CheckboxGroupInput>`](./Inputs.md#checkboxgroupinput)
 * [`<ChipField>`](./Fields.md#chipfield)
@@ -36,12 +36,12 @@ title: "Reference"
 * [`<CreateButton>`](./Buttons.md#createbutton)
 * [`<CreateDialog>`](https://marmelab.com/ra-enterprise/modules/ra-form-layout#createdialog--editdialog)<img class="icon" src="./img/premium.svg" />
 * [`<DashboardMenuItem>`](./Theming.md#using-a-custom-menu)
-* [`<Datagrid>`](./List.md#the-datagrid-component)
-* [`<DatagridBody>`](./List.md#body-element)
-* [`<DatagridRow>`](./List.md#body-element)
+* [`<Datagrid>`](./Datagrid.md)
+* [`<DatagridBody>`](./Datagrid.md#body)
+* [`<DatagridRow>`](./Datagrid.md#body)
 * `<DatagridCell>`
 * `<DatagridHeaderCell>`
-* [`<DatagridHeader>`](./List.md#header-element)
+* [`<DatagridHeader>`](./Datagrid.md#header)
 * [`<DateField>`](./Fields.md#datefield)
 * [`<DateInput>`](./Inputs.md#dateinput)
 * [`<DateTimeInput>`](./Inputs.md#datetimeinput)
@@ -59,10 +59,10 @@ title: "Reference"
 * [`<FileInput>`](./Inputs.md#fileinput)
 * [`<Filter>`](./List.md#filters-filter-inputs)
 * [`<FilterButton>`](./Buttons.md#filterbutton)
-* [`<FilterForm>`](./List.md#custom-filter-form)
-* [`<FilterList>`](./List.md#the-filterlist-sidebar)
-* [`<FilterListItem>`](./List.md#the-filterlist-sidebar)
-* [`<FilterLiveSearch>`](./List.md#live-search)
+* [`<FilterForm>`](./FilterForm.md)
+* [`<FilterList>`](./FilterList.md)
+* [`<FilterListItem>`](./FilterList.md#children)
+* [`<FilterLiveSearch>`](./FilterLiveSearch.md)
 * [`<FilterWithSave>`](https://marmelab.com/ra-enterprise/modules/ra-preferences#savedquerieslist-and-filterwithsave-store-user-queries-in-preferences)<img class="icon" src="./img/premium.svg" />
 * [`<FormDataConsumer>`](./Inputs.md#linking-two-inputs)
 * [`<FormTab>`](./CreateEdit.md#the-tabbedform-component)
@@ -77,9 +77,9 @@ title: "Reference"
 * [`<LinearProgress>`](./Theming.md#linearprogress)
 * [`<Logout>`](./Theming.md#using-a-custom-logout-button)
 * [`linkToRecord`](./Fields.md#linking-to-other-records)
-* [`<List>`](./List.md#the-list-component)
-* [`<ListBase>`](./List.md#the-listbase-component)
-* [`<ListGuesser>`](./List.md#the-listguesser-component)
+* [`<List>`](./List.md#usage)
+* [`<ListBase>`](./ListBase.md#usage)
+* [`<ListGuesser>`](./ListGuesser.md#usage)
 * [`<ListButton>`](./Buttons.md#listbutton)
 * [`<MarkdownField>`](https://marmelab.com/ra-enterprise/modules/ra-markdown#markdownfield)<img class="icon" src="./img/premium.svg" />
 * [`<MarkdownInput>`](https://marmelab.com/ra-enterprise/modules/ra-markdown#markdowninput)<img class="icon" src="./img/premium.svg" />
@@ -112,7 +112,7 @@ title: "Reference"
 * `<SaveButton>`
 * [`<SavedFilterList>`](https://marmelab.com/ra-enterprise/modules/ra-preferences#savedquerieslist-and-filterwithsave-store-user-queries-in-preferences)<img class="icon" src="./img/premium.svg" />
 * [`<Search>`](https://marmelab.com/ra-enterprise/modules/ra-search#the-search-component)<img class="icon" src="./img/premium.svg" />
-* [`<SearchInput>`](./List.md#full-text-search)
+* [`<SearchInput>`](./FilteringTutorial.md#searchinput)
 * [`<SelectArrayInput>`](./Inputs.md#selectarrayinput)
 * [`<SelectColumnsButton>`](https://marmelab.com/ra-enterprise/modules/ra-preferences#selectcolumnsbutton-store-datagrid-columns-in-preferences)<img class="icon" src="./img/premium.svg" />
 * [`<SelectField>`](./Fields.md#selectfield)
@@ -124,9 +124,9 @@ title: "Reference"
 * [`<SidebarOpenPreferenceSync>`](https://marmelab.com/ra-enterprise/modules/ra-preferences#sidebaropenpreferencesync-store-the-sidebar-openclose-state-in-preferences)<img class="icon" src="./img/premium.svg" />
 * [`<SimpleForm>`](./CreateEdit.md#the-simpleform-component)
 * [`<SimpleFormIterator>`](./Inputs.md#arrayinput)
-* [`<SimpleList>`](./List.md#the-simplelist-component)
+* [`<SimpleList>`](./SimpleList.md)
 * [`<SimpleShowLayout>`](./SimpleShowLayout.md#simpleshowlayout)
-* [`<SingleFieldList>`](./List.md#the-singlefieldlist-component)
+* [`<SingleFieldList>`](./SingleFieldList.md)
 * [`<SortButton>`](./Buttons.md#sortbutton)
 * `<Tab>`
 * [`<TabbedForm>`](./CreateEdit.md#the-tabbedform-component)
@@ -154,7 +154,7 @@ title: "Reference"
 * `useChoices`
 * [`useCreate`](./Actions.md#usecreate)
 * [`useCreateController`](./CreateEdit.md#usecreatecontroller)
-* [`useDataProvider`](./Actions.md#usedataprovider-hook)
+* [`useDataProvider`](./Actions.md#usedataprovider)
 * [`useDelete`](./Actions.md#usedelete)
 * [`useDeleteMany`](./Actions.md#usedeletemany)
 * [`useEditController`](./CreateEdit.md#useeditcontroller)
@@ -168,9 +168,9 @@ title: "Reference"
 * [`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`](./Inputs.md#the-useinput-hook)
-* [`useList`](./List.md#uselist)
-* [`useListContext`](./List.md#uselistcontext)
-* [`useListController`](./List.md#uselistcontroller)
+* [`useList`](./useList.md)
+* [`useListContext`](./useList.md#return-value)
+* [`useListController`](./useListController.md)
 * `useListParams`
 * `useLoading`
 * [`useLocale`](./Translation.md#uselocale-getting-the-current-locale)

docs/Show.md

@@ -56,7 +56,6 @@ That's enough to display the post show view:
 ## Props
 
 * [`actions`](#actions): override the actions toolbar with a custom component
-* [`aside`](#aside): A component to render as a sidebar of the show view
 * `className`: passed to the root component
 * [`children`](#layout): the components that render the record fields
 * [`component`](#root-component): overrides the root component

docs/ShowBase.md

@@ -59,7 +59,7 @@ const App = () => (
 
 ## Props
 
-* [`children`](#layout) the components that actually render something
+* `children` the components that actually render something
 * [`queryOptions`](#client-query-options): options to pass to the react-query client
 
 ## Client Query Options

docs/ShowTutorial.md

@@ -387,8 +387,8 @@ const BookShow = () => (
 ```
 {% endraw %}
 
-## Third-Party Show Components
+## Third-Party Components
 
 You can find components for react-admin in third-party repositories.
 
-- [ra-compact-ui](https://github.com/ValentinnDimitroff/ra-compact-ui#layouts): plugin that allows to have custom styled show layouts.
+- [ra-compact-ui](https://github.com/ValentinnDimitroff/ra-compact-ui#layouts): plugin that allows to have custom styled show layouts.

docs/Theming.md

@@ -99,7 +99,7 @@ This example results in:
 
 ![Visitor List with customized CSS classes](./img/list_with_customized_css.png)
 
-Take a look at a component documentation and source code to know which classes are available for styling. For instance, you can have a look at the [Datagrid CSS documentation](./List.md#datagrid-css-api).
+Take a look at a component documentation and source code to know which classes are available for styling. For instance, you can have a look at the [Datagrid CSS documentation](./Datagrid.md#sx-css-api).
 
 If you need more control over the HTML code, you can also create your own [Field](./Fields.md#writing-your-own-field-component) and [Input](./Inputs.md#writing-your-own-input-component) components.
 

packages/ra-ui-materialui/src/field/ReferenceField.spec.tsx

@@ -92,7 +92,7 @@ describe('<ReferenceField />', () => {
                     data: [{ id: 123, title: 'foo' }],
                 }),
             });
-            // we need to keep the same querry client between rerenders
+            // we need to keep the same query client between rerenders
             const queryClient = new QueryClient();
             const FecthGetMany = () => {
                 useGetMany('posts', { ids: [123] });