[Doc] Fix list filter snippets should use <SearchInput> instead of <TextInput>

docs/Features.md

@@ -17,7 +17,7 @@ We've crafted the API of react-admin's components and hooks to be as **intuitive
 
 React-admin provides the **best-in-class documentation**, demo apps, and support. Error messages are clear and actionable. Thanks to extensive TypeScript types and JSDoc, it's easy to use react-admin in any IDE. The API is stable and **breaking changes are very rare**. You can debug your app with the [query](./DataProviders.md#enabling-query-logs) and [form](https://react-hook-form.com/dev-tools) developer tools, and inspect the react-admin code right in your browser.
 
-That probably explains why more than 3,000 new apps are published every month using react-admin. 
+That probably explains why more than 3,000 new apps are published every month using react-admin.
 
 So react-admin is not just the assembly of [react-query](https://react-query.tanstack.com/), [react-hook-form](https://marmelab.com/react-admin/assets/techs/react-hook-form.jpeg), [react-router](https://reacttraining.com/react-router/), [Material UI](https://mui.com/material-ui/getting-started/) and [Emotion](https://github.com/emotion-js/emotion). It's a **framework** made to speed up and facilitate the development of single-page apps in React.
 
@@ -61,7 +61,7 @@ Which kind of API? **All kinds**. React-admin is backend agnostic. It doesn't ca
 
 React-admin ships with [more than 50 adapters](./DataProviderList.md) for popular API flavors, and gives you all the tools to build your own adapter. This works thanks to a powerful abstraction layer called the [Data Provider](./DataProviders.md).
 
-In a react-admin app, you don't write API Calls. Instead, you communicate with your API using a set of high-level functions, called "Data Provider methods". For instance, to fetch a list of posts, you call the `getList()` method, passing the resource name and the query parameters. 
+In a react-admin app, you don't write API Calls. Instead, you communicate with your API using a set of high-level functions, called "Data Provider methods". For instance, to fetch a list of posts, you call the `getList()` method, passing the resource name and the query parameters.
 
 ```jsx
 import { useState, useEffect } from 'react';
@@ -73,10 +73,10 @@ const PostList = () => {
     const [isLoading, setIsLoading] = useState(true);
     const dataProvider = useDataProvider();
     useEffect(() => {
-        dataProvider.getList('posts', { 
+        dataProvider.getList('posts', {
             pagination: { page: 1, perPage: 10 },
             sort: { field: 'published_at', order: 'DESC' },
-            filter: { status: 'published' } 
+            filter: { status: 'published' }
         })
             .then(({ data }) => setPosts(data))
             .catch(error => setError(error))
@@ -121,7 +121,7 @@ const PostList = () => {
 
 React-admin is also **backend agnostic for authentication and authorization**. Whether your API uses JWT, OAuth, a third-party provider like Auth0 or Cognito, or even Azure Active Directory, you can communicate with the authentication backend through an adapter object called [the Auth Provider](./Authentication.md).
 
-You can then use specialized hooks on your components to restrict access. For instance, to forbid anonymous access, use `useAuthenticated`: 
+You can then use specialized hooks on your components to restrict access. For instance, to forbid anonymous access, use `useAuthenticated`:
 
 ```jsx
 import { useAuthenticated } from 'react-admin';
@@ -140,7 +140,7 @@ export default MyPage;
 
 ## Relationships
 
-APIs often expose a relational model, i.e. endpoints returning foreign keys to other endpoints. **React-admin leverages relational APIs** to provide smart components that display related records and components that allow editing of related records. 
+APIs often expose a relational model, i.e. endpoints returning foreign keys to other endpoints. **React-admin leverages relational APIs** to provide smart components that display related records and components that allow editing of related records.
 
 ```
 ┌──────────────┐       ┌────────────────┐
@@ -153,7 +153,7 @@ APIs often expose a relational model, i.e. endpoints returning foreign keys to o
 └──────────────┘       └────────────────┘
 ```
 
-For instance, `<ReferenceField>` displays the name of a related record, like the name of an author for a book. 
+For instance, `<ReferenceField>` displays the name of a related record, like the name of an author for a book.
 
 ```jsx
 const BookList = () => (
@@ -170,7 +170,7 @@ const BookList = () => (
 
 ![ReferenceField](./img/reference-field-link.png)
 
-You don't need anything fancy on the API side to support that. Simple CRUD routes for both the `books` and `authors` resources are enough. `<ReferenceField>` will fetch the book authors via one single API call: 
+You don't need anything fancy on the API side to support that. Simple CRUD routes for both the `books` and `authors` resources are enough. `<ReferenceField>` will fetch the book authors via one single API call:
 
 ```
 GET https://my.api.url/authors?filter={ids:[1,2,3,4,5,6,7]}
@@ -263,7 +263,7 @@ And if the default design isn't good enough for you, you can easily customize it
 
 Modern web apps are often very visually pleasing, but they can be difficult to use due to low information density. End users need a lot of scrolling and clicking to complete moderately complex tasks.
 
-On the other hand, the default React-admin skin is designed to be dense, giving **more space to the content and less to the chrome**, which allows for faster user interaction. 
+On the other hand, the default React-admin skin is designed to be dense, giving **more space to the content and less to the chrome**, which allows for faster user interaction.
 
 [![Dense layout](./img/dense.webp)](https://marmelab.com/react-admin-demo/#/)
 
@@ -273,7 +273,7 @@ And for mobile users, react-admin renders a different layout with larger margins
 
 ## Guessers & Scaffolding
 
-When mapping a new API route to a CRUD view, adding fields one by one can be tedious. React-admin provides a set of guessers that can automatically **generate a complete CRUD UI based on an API response**. 
+When mapping a new API route to a CRUD view, adding fields one by one can be tedious. React-admin provides a set of guessers that can automatically **generate a complete CRUD UI based on an API response**.
 
 For instance, the following code will generate a complete CRUD UI for the `posts` resource:
 
@@ -341,7 +341,7 @@ In most admin and B2B apps, the most common task is to look for a record. React-
 </tr>
 </tbody></table>
 
-These features rely on powerful components with an intuitive API. For instance, you can set the Filter Button/Form Combo with the `<List filters>` prop, using the same input components as in edition forms: 
+These features rely on powerful components with an intuitive API. For instance, you can set the Filter Button/Form Combo with the `<List filters>` prop, using the same input components as in edition forms:
 
 ```jsx
 import { List, TextInput } from 'react-admin';
@@ -365,7 +365,7 @@ Check the following chapters to learn more about each search and filtering compo
 - [`<StackedFilters>`](./StackedFilters.md)
 - [`<Search>`](./Search.md)
 
-Users often apply the same filters over and over again. Saved Queries **let users save a combination of filters** and sort parameters into a new, personal filter, that persists between sessions. 
+Users often apply the same filters over and over again. Saved Queries **let users save a combination of filters** and sort parameters into a new, personal filter, that persists between sessions.
 
 <video controls autoplay playsinline muted loop>
   <source src="./img/SavedQueriesList.webm" type="video/webm"/>
@@ -435,7 +435,7 @@ import {
     DateField,
     TextInput,
     ReferenceManyField,
-    NumberInput,    
+    NumberInput,
     DateInput,
     BooleanInput,
     EditButton
@@ -493,7 +493,7 @@ React-admin offers, out of the box, several form layouts:
 
 ### Input Components
 
-Inside forms, you can use specialize [input components](./Inputs.md), designed for many types of data: 
+Inside forms, you can use specialize [input components](./Inputs.md), designed for many types of data:
 
 | Data Type             | Example value                                                | Input Components                                                                                                                                                                                     |
 |-----------------------|--------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
@@ -517,7 +517,7 @@ Inside forms, you can use specialize [input components](./Inputs.md), designed f
 | Translations          | `{ en: 'Hello', fr: 'Bonjour' }`                             | [`<TranslatableInputs>`](./TranslatableInputs.md)                                                                                                                                                    |
 | Related records       | `[{ id: 42, title: 'Hello' }, { id: 43, title: 'World' }]`   | [`<ReferenceManyInput>`](./ReferenceManyInput.md), [`<ReferenceManyToManyInput>`](./ReferenceManyToManyInput.md), [`<ReferenceOneInput>`](./ReferenceOneInput.md)                                    |
 
-### Dependent Inputs 
+### Dependent Inputs
 
 You can build dependent inputs, using the [react-hook-form's `useWatch` hook](https://react-hook-form.com/docs/usewatch). For instance, here is a `CityInput` that displays the cities of the selected country:
 
@@ -733,7 +733,7 @@ React-admin takes advantage of the Single-Page-Application architecture, impleme
 
 ## Undo
 
-When users submit a form, or delete a record, the UI reflects their change immediately. They also see a confirmation message for the change, containing an "Undo" button. If they click on it before the confirmation slides out (the default delay is 5s), react-admin reverts to the previous state and cancels the call to the data provider. 
+When users submit a form, or delete a record, the UI reflects their change immediately. They also see a confirmation message for the change, containing an "Undo" button. If they click on it before the confirmation slides out (the default delay is 5s), react-admin reverts to the previous state and cancels the call to the data provider.
 
 <video controls autoplay playsinline muted loop>
   <source src="./img/tutorial_post_edit_undo.webm" type="video/webm"/>
@@ -965,7 +965,7 @@ A UI kit like Material UI provides basic building blocks like a button, a form,
 
 These building blocks include:
 
-- A [notification system](./useNotify.md) 
+- A [notification system](./useNotify.md)
 - A smart location framework, simplifying the management of [breadcrumbs](./Breadcrumb.md) an [hierarchical menus](./MultiLevelMenu.md)
 - [Import](https://github.com/benwinding/react-admin-import-csv) / [export](./Buttons.md#exportbutton) buttons
 - An [editable datagrid](./EditableDatagrid.md)
@@ -976,7 +976,7 @@ These building blocks include:
 - A [clone button](./Buttons.md#clonebutton)
 - Various navigation menus ([simple](./Menu.md), [hierarchical](./MultiLevelMenu.md), [horizontal](./HorizontalMenu.md), etc.)
 - Various [page](./ContainerLayout.md) and [form](https://marmelab.com/ra-enterprise/modules/ra-form-layout) layouts
-- ...and many more. 
+- ...and many more.
 
 And if you want to create your building blocks, you can use any of the [75+ hooks](./Reference.md#hooks) that carry **headless, reusable logic**. To name a few of them:
 
@@ -1148,7 +1148,7 @@ This feature leverages the following hooks:
 
 ## Preferences
 
-End-users tweak the UI to their liking, and **they expect these preferences to be saved** so that they don't need to do it again the next time they visit the app. React-admin provides a persistent `Store` for user preferences and uses it in many components. 
+End-users tweak the UI to their liking, and **they expect these preferences to be saved** so that they don't need to do it again the next time they visit the app. React-admin provides a persistent `Store` for user preferences and uses it in many components.
 
 For instance, the Saved Queries feature lets users **save a combination of filters** and sort parameters into a new, personal filter.
 
@@ -1190,7 +1190,7 @@ const SongList = () => (
 );
 ```
 
-React-admin also **persists the light/dark mode and the language choice** of end-users. 
+React-admin also **persists the light/dark mode and the language choice** of end-users.
 
 <video controls autoplay playsinline muted loop>
   <source src="./img/ToggleThemeButton.webm" type="video/webm"/>
@@ -1257,7 +1257,7 @@ Check the following components for details:
 
 The default [Material Design](https://material.io/) look and feel is nice, but a bit... Google-y. If this bothers you, or if you need to brand your app, rest assured: react-admin is fully themeable.
 
-React-admin comes with 4 built-in themes: [Default](./AppTheme.md#default), [Nano](./AppTheme.md#nano), [Radiant](./AppTheme.md#radiant), and [House](./AppTheme.md#house). The [e-commerce demo](https://marmelab.com/react-admin-demo/) contains a theme switcher, so you can test them in a real application. 
+React-admin comes with 4 built-in themes: [Default](./AppTheme.md#default), [Nano](./AppTheme.md#nano), [Radiant](./AppTheme.md#radiant), and [House](./AppTheme.md#house). The [e-commerce demo](https://marmelab.com/react-admin-demo/) contains a theme switcher, so you can test them in a real application.
 
 <video controls autoplay playsinline muted loop>
   <source src="./img/demo-themes.mp4" type="video/mp4"/>
@@ -1542,7 +1542,7 @@ Check the following sections for help on making your app responsive:
 
 ## Type-Safe
 
-React-admin is written in TypeScript. That doesn't mean you have to use TypeScript to use react-admin - **you can write react-admin apps in JavaScript**. But if you do, you get compile-time type checking for your components, hooks, data providers, auth providers, translation messages, and more. 
+React-admin is written in TypeScript. That doesn't mean you have to use TypeScript to use react-admin - **you can write react-admin apps in JavaScript**. But if you do, you get compile-time type checking for your components, hooks, data providers, auth providers, translation messages, and more.
 
 And if your IDE supports TypeScript, you get autocompletion and inline documentation for all react-admin components and hooks.
 
@@ -1556,7 +1556,7 @@ Building react-admin apps with TypeScript brings more safety and productivity to
 
 ## Sustainable
 
-Last but not least, react-admin is here to stay. That's because the development of the open-source project is **funded by the customers** of the [Enterprise Edition](https://marmelab.com/ra-enterprise/). 
+Last but not least, react-admin is here to stay. That's because the development of the open-source project is **funded by the customers** of the [Enterprise Edition](https://marmelab.com/ra-enterprise/).
 
 Maintaining a large open-source project in the long term is a challenge. But the react-admin core team, hosted by [Marmelab](https://marmelab.com), doesn't have to worry about the next funding round, or about paying back venture capital by raising prices. React-admin has zero debt, has already **passed the break-even point**, and the team will only grow as the number of customers grows.
 

docs/FilterButton.md

@@ -14,14 +14,14 @@ Part of the filter button/form combo, `<FilterButton>` renders whenever you use
 </video>
 
 
-It's an internal component that you should only need if you build a custom List layout. 
+It's an internal component that you should only need if you build a custom List layout.
 
 ## Usage
 
 `<FilterButton>` expects an array of filter inputs as `filters` prop:
 
 ```jsx
-import { 
+import {
     CreateButton,
     Datagrid,
     FilterButton,
@@ -30,11 +30,12 @@ import {
     Pagination,
     TextField,
     TextInput,
+    SearchInput
 } from 'react-admin';
 import { Stack } from '@mui/material';
 
 const postFilters = [
-    <TextInput label="Search" source="q" alwaysOn />,
+    <SearchInput source="q" alwaysOn />,
     <TextInput label="Title" source="title" defaultValue="Hello, World!" />,
 ];
 
@@ -63,7 +64,7 @@ const PostList = () => (
 
 ## `disableSaveQuery`
 
-By default, the filter button lets users save a group of filters for later reuse. You can set the `disableSaveQuery` prop in the filter button to disable this feature. 
+By default, the filter button lets users save a group of filters for later reuse. You can set the `disableSaveQuery` prop in the filter button to disable this feature.
 
 ```jsx
 const ListToolbar = () => (
@@ -75,4 +76,4 @@ const ListToolbar = () => (
         </div>
     </Stack>
 )
-```
+```

docs/FilterForm.md

@@ -14,14 +14,14 @@ Part of the filter button/form combo, `<FilterForm>` renders whenever you use th
 </video>
 
 
-It's an internal component that you should only need if you build a custom List layout. 
+It's an internal component that you should only need if you build a custom List layout.
 
 ## Usage
 
 `<FilterForm>` expects an array of filter inputs as `filters` prop:
 
 ```jsx
-import { 
+import {
     CreateButton,
     Datagrid,
     FilterButton,
@@ -30,11 +30,12 @@ import {
     Pagination,
     TextField,
     TextInput,
+    SearchInput
 } from 'react-admin';
 import { Stack } from '@mui/material';
 
 const postFilters = [
-    <TextInput label="Search" source="q" alwaysOn />,
+    <SearchInput source="q" alwaysOn />,
     <TextInput label="Title" source="title" defaultValue="Hello, World!" />,
 ];
 
@@ -60,4 +61,3 @@ const PostList = () => (
     </ListBase>
 )
 ```
-