Async combobox and useAsyncList docs (#1572)

Author: LFDanLu

packages/@react-spectrum/combobox/docs/ComboBox.mdx

@@ -516,6 +516,53 @@ If a description is added, the prop `slot="description"` must be used to disting
 </ComboBox>
 ```
 
+## Asynchronous loading
+
+ComboBox supports loading data asynchronously, and will display a progress circle reflecting the current load state,
+set by the `loadingState` prop. It also supports infinite scrolling to load more data on demand as the user scrolls, via the `onLoadMore` prop.
+
+This example uses the [useAsyncList](../react-stately/useAsyncList.html) hook to handle loading the data.
+See the docs for more information.
+
+```tsx example
+import {useAsyncList} from '@react-stately/data';
+
+function AsyncLoadingExample() {
+  let list = useAsyncList({
+    async load({signal, cursor, filterText}) {
+      if (cursor) {
+        cursor = cursor.replace(/^http:\/\//i, 'https://');
+      }
+
+      // If no cursor is available, then we're loading the first page,
+      // filtering the results returned via a query string that
+      // mirrors the ComboBox input text.
+      // Otherwise, the cursor is the next URL to load,
+      // as returned from the previous page.
+      let res = await fetch(cursor || `https://swapi.dev/api/people/?search=${filterText}`, {signal});
+      let json = await res.json();
+
+      return {
+        items: json.results,
+        cursor: json.next
+      };
+    }
+  });
+
+  return (
+    <ComboBox
+      label="Star Wars Character Lookup"
+      items={list.items}
+      inputValue={list.filterText}
+      onInputChange={list.setFilterText}
+      loadingState={list.loadingState}
+      onLoadMore={list.loadMore}>
+      {item => <Item key={item.name}>{item.name}</Item>}
+    </ComboBox>
+  );
+}
+```
+
 ## Validation
 ComboBox can display a validation state to communicate to the user whether the current value is valid or invalid.
 Implement your own validation logic in your app and pass either `"valid"` or `"invalid"` to the ComboBox via the `validationState` prop.
@@ -584,7 +631,7 @@ function Example() {
       width="size-3000"
       label="To:"
       items={filteredItems}
-      inputValue={filterValue}
+      value={filterValue}
       onInputChange={setFilterValue}
       placeholder="Enter recipient email"
       allowsCustomValue>

packages/@react-stately/data/docs/useAsyncList.mdx

@@ -29,7 +29,7 @@ keywords: [lists, async loading, infinite loading, state]
 
 ## Introduction
 
-`useAsyncList` extends on [useListData](useListData.html), adding support for async loading, pagination, and sorting.
+`useAsyncList` extends on [useListData](useListData.html), adding support for async loading, pagination, sorting, and filtering.
 It manages loading and error states, supports abortable requests, and works with any data fetching library or the built-in
 browser [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) API.
 
@@ -174,6 +174,41 @@ let list = useAsyncList({
 });
 ```
 
+## Filtering
+
+There are many instances where your list of data may need to be filtered, such as during user lookup or query searches.
+For server side filtering, this can be implemented by using the `filterText` option passed to the `load` function.
+The `setFilterText` method updates the current `filterText` value and triggers the `load` function. This allows
+you to reload the results with the new filter text.
+
+### Server side filtering
+
+The example below shows how server side filtering could be implemented by using `filterText` in the `load` function and passing a parameter to the API.
+The input value of the ComboBox is controlled by providing `list.filterText` as the ComboBox's `inputValue` prop, and `list.setFilterText` as the `onInputChange` prop.
+The `loadingState` prop is also used to show the appropriate loading indicator depending on the state of the list.
+
+```tsx
+let list = useAsyncList({
+  async load({signal, filterText}) {
+    let res = await fetch(`https://swapi.dev/api/people/?search=${filterText}`, {signal});
+    let json = await res.json();
+
+    return {
+      items: json.results
+    };
+  }
+});
+
+<ComboBox
+  label="Star Wars Character Lookup"
+  items={list.items}
+  inputValue={list.filterText}
+  onInputChange={list.setFilterText}
+  loadingState={list.loadingState}>
+  {item => <Item key={item.name}>{item.name}</Item>}
+</ComboBox>
+```
+
 ## Pre-selecting items
 
 `useAsyncList` manages selection state for the list in addition to its data. If you need to programmatically select items