diff --git a/packages/dev/s2-docs/pages/react-aria/Menu.mdx b/packages/dev/s2-docs/pages/react-aria/Menu.mdx index f90d86cfcee..5d87b859473 100644 --- a/packages/dev/s2-docs/pages/react-aria/Menu.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Menu.mdx @@ -279,6 +279,52 @@ import {Button} from 'vanilla-starter/Button'; ``` +### Asynchronous loading + +Use [renderEmptyState](#empty-state) to display a loading indicator during initial load. To enable infinite scrolling, render a `` at the end of the menu. Use whatever data fetching library you prefer — this example uses `useAsyncList` from `react-stately`. + +```tsx render +"use client"; +import {MenuTrigger, Menu, MenuItem, MenuLoadMoreItem} from 'vanilla-starter/Menu'; +import {Button} from 'vanilla-starter/Button'; +import {Collection} from 'react-aria-components/Collection'; +import {useAsyncList} from 'react-aria-components/useAsyncList'; + +interface Character { + name: string; + birth_year: string; +} + +function AsyncMenuExample() { + let list = useAsyncList({ + async load({signal, cursor}) { + if (cursor) cursor = cursor.replace(/^http:\/\//i, 'https://'); + let res = await fetch(cursor || 'https://swapi.py4e.com/api/people/', {signal}); + let json = await res.json(); + return {items: json.results, cursor: json.next}; + } + }); + + return ( + + + list.loadingState === 'loading' ? 'Loading…' : 'No characters found'}> + + {(item) => {item.name}} + + {/*- begin highlight -*/} + + {/*- end highlight -*/} + + + ); +} +``` + ### Links Use the `href` prop on a `` to create a link. @@ -313,6 +359,23 @@ By default, links are rendered as an `` element. Use the `render` prop to int } /> ``` +### Empty state + +```tsx render hideImports +"use client"; +import {MenuTrigger, Menu} from 'vanilla-starter/Menu'; +import {Button} from 'vanilla-starter/Button'; + + + + 'No actions available.'}> + {[]} + + +``` + ### Autocomplete Popovers can include additional components as siblings of a menu. This example uses an [Autocomplete](Autocomplete) with a [SearchField](SearchField) to let the user filter the items. @@ -559,7 +622,7 @@ import {Button} from 'react-aria-components/Button'; -```tsx links={{MenuTrigger: '#menutrigger', Button: 'Button', Popover: 'Popover', Menu: '#menu', MenuItem: '#menuitem', Separator: 'Separator', MenuSection: '#menusection', SubmenuTrigger: '#submenutrigger', SelectionIndicator: 'selection#animated-selectionindicator'}} +```tsx links={{MenuTrigger: '#menutrigger', Button: 'Button', Popover: 'Popover', Menu: '#menu', MenuItem: '#menuitem', Separator: 'Separator', MenuSection: '#menusection', SubmenuTrigger: '#submenutrigger', SelectionIndicator: 'selection#animated-selectionindicator', MenuLoadMoreItem: '#menuloadmoreitem'}}