@@ -398,4 +398,59 @@ const FilmSelect: React.FC = () => (
398398);
399399```
400400
401+ @### Using renderFilteredItems()
402+
403+ This package also exports a `renderFilteredItems()` helper function for custom item list rendering. It handles the
404+ `noResults` and `initialContent` states automatically.
405+
406+ <div class = " @ns-callout @ns-intent-primary @ns-icon-info-sign" >
407+
408+ `renderFilteredItems()` calls `renderItem()` for each filtered item, so you don't need to map through
409+ `filteredItems` yourself.
410+
411+ </div >
412+
413+ ```tsx
414+ import { ItemListRenderer , renderFilteredItems } from "@blueprintjs/select";
415+
416+ const renderMenu: ItemListRenderer<Film > = (listProps) => {
417+ return (
418+ <Menu role = " listbox" ulRef = { listProps .itemsParentRef } { ... listProps .menuProps } >
419+ { renderFilteredItems (
420+ listProps ,
421+ // shown when no items match the query
422+ <MenuItem disabled = { true } text = " No results." roleStructure = " listoption" />,
423+ // shown when query is empty
424+ <MenuItem disabled = { true } text = " Start typing to search..." roleStructure = " listoption" />
425+ )}
426+ </Menu >
427+ );
428+ } ;
429+
430+ const FilmSelect: React.FC = () => (
431+ <Select <Film >
432+ itemListRenderer = { renderMenu }
433+ itemPredicate = { filterFilm }
434+ itemRenderer = { renderFilm }
435+ items = { ... }
436+ onItemSelect = { ... }
437+ />
438+ );
439+ ```
440+
441+ The function signature is:
442+
443+ ```ts
444+ function renderFilteredItems(
445+ props: ItemListRendererProps<T >,
446+ noResults?: React.ReactNode,
447+ initialContent?: React.ReactNode | null,
448+ ): React.ReactNode;
449+ ```
450+
451+ - `props`: the props object passed to your `itemListRenderer` callback.
452+ - `noResults`: (optional) content to render when `filteredItems` is empty.
453+ - `initialContent`: (optional) content to render when `query` is empty. Pass `null` to render nothing;
454+ pass `undefined` (or omit) to render items normally.
455+
401456@interface ItemListRendererProps
0 commit comments