From 258ad6986608e88a27410fef9c84102979068014 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Thu, 15 Mar 2018 14:24:55 -0700
Subject: [PATCH 01/12] pull initialContent, noResults, itemListRenderer up to
 QueryList props menuRenderer => itemListRenderer

---
 .../select/src/components/omnibar/omnibar.tsx | 11 ++-----
 .../src/components/query-list/queryList.tsx   | 31 +++++++++++++++++--
 .../src/components/select/multiSelect.tsx     |  8 -----
 .../select/src/components/select/select.tsx   | 14 ---------
 .../select/src/components/select/suggest.tsx  |  3 --
 5 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/packages/select/src/components/omnibar/omnibar.tsx b/packages/select/src/components/omnibar/omnibar.tsx
index db5283b660..23d4360ea4 100644
--- a/packages/select/src/components/omnibar/omnibar.tsx
+++ b/packages/select/src/components/omnibar/omnibar.tsx
@@ -24,14 +24,6 @@ import * as Classes from "../../common/classes";
 import { IListItemsProps, IQueryListRendererProps, QueryList } from "../query-list/queryList";
 
 export interface IOmnibarProps<T> extends IListItemsProps<T> {
-    /**
-     * React child to render when query is empty.
-     */
-    initialContent?: React.ReactChild;
-
-    /** React child to render when filtering items returns zero results. */
-    noResults?: React.ReactChild;
-
     /**
      * Props to spread to `InputGroup`. All props are supported except `ref` (use `inputRef` instead).
      * If you want to control the filter input, you can pass `value` and `onChange` here
@@ -90,11 +82,12 @@ export class Omnibar<T> extends React.PureComponent<IOmnibarProps<T>, IOmnibarSt
 
     public render() {
         // omit props specific to this component, spread the rest.
-        const { initialContent, isOpen, inputProps, noResults, overlayProps, ...restProps } = this.props;
+        const { initialContent = null, isOpen, inputProps, overlayProps, ...restProps } = this.props;
 
         return (
             <this.TypedQueryList
                 {...restProps}
+                initialContent={initialContent}
                 activeItem={this.state.activeItem}
                 onActiveItemChange={this.handleActiveItemChange}
                 onItemSelect={this.handleItemSelect}
diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx
index a3d3cde354..5769acdd0c 100644
--- a/packages/select/src/components/query-list/queryList.tsx
+++ b/packages/select/src/components/query-list/queryList.tsx
@@ -8,6 +8,7 @@ import * as React from "react";
 
 import { IProps, Keys, Utils } from "@blueprintjs/core";
 import { IItemModifiers, ItemRenderer } from "../../common/itemRenderer";
+import { IMenuRendererProps, MenuRenderer } from "../../common/menuRenderer";
 import { ItemListPredicate, ItemPredicate } from "../../common/predicate";
 
 /** Reusable generic props for a component that operates on a filterable, selectable list of `items`. */
@@ -20,7 +21,7 @@ export interface IListItemsProps<T> extends IProps {
      * This method can reorder, add, or remove items at will.
      * (Supports filter algorithms that operate on the entire set, rather than individual items.)
      *
-     * If defined with `itemPredicate`, this prop takes priority and the other will be ignored.
+     * If `itemPredicate` is also defined, this prop takes priority and the other will be ignored.
      */
     itemListPredicate?: ItemListPredicate<T>;
 
@@ -29,7 +30,7 @@ export interface IListItemsProps<T> extends IProps {
      * This method will be invoked once for each item, so it should be performant. For more complex
      * queries, use `itemListPredicate` to operate once on the entire array.
      *
-     * If defined with `itemListPredicate`, this prop will be ignored.
+     * This prop is ignored if `itemListPredicate` is also defined.
      */
     itemPredicate?: ItemPredicate<T>;
 
@@ -40,6 +41,32 @@ export interface IListItemsProps<T> extends IProps {
      */
     itemRenderer: ItemRenderer<T>;
 
+    /**
+     * Custom renderer for the contents of the dropdown.
+     *
+     * The default implementation invokes `itemRenderer` for each item that passes the predicate
+     * and wraps them all in a `Menu` element. If the query is empty then `initialContent` is returned,
+     * and if all items are filtered away then `noResults` is returned.
+     */
+    itemListRenderer?: MenuRenderer<T>;
+
+    /**
+     * React content to render when query is empty.
+     * If omitted, all items will be rendered (or result of `itemListPredicate` with empty query).
+     * If explicit `null`, nothing will be rendered when query is empty.
+     *
+     * This prop is ignored if a custom `menuRenderer` is supplied.
+     */
+    initialContent?: React.ReactNode | null;
+
+    /**
+     * React content to render when filtering items returns zero results.
+     * If omitted, nothing will be rendered in this case.
+     *
+     * This prop is ignored if a custom `menuRenderer` is supplied.
+     */
+    noResults?: React.ReactNode;
+
     /**
      * Callback invoked when an item from the list is selected,
      * typically by clicking or pressing `enter` key.
diff --git a/packages/select/src/components/select/multiSelect.tsx b/packages/select/src/components/select/multiSelect.tsx
index 5534b98c4f..64890e33f6 100644
--- a/packages/select/src/components/select/multiSelect.tsx
+++ b/packages/select/src/components/select/multiSelect.tsx
@@ -24,14 +24,6 @@ export interface IMultiSelectProps<T> extends IListItemsProps<T> {
     /** Controlled selected values. */
     selectedItems?: T[];
 
-    /**
-     * React child to render when query is empty.
-     */
-    initialContent?: React.ReactChild;
-
-    /** React child to render when filtering items returns zero results. */
-    noResults?: React.ReactChild;
-
     /**
      * Whether the popover opens on key down or when `TagInput` is focused.
      * @default false
diff --git a/packages/select/src/components/select/select.tsx b/packages/select/src/components/select/select.tsx
index 30b1e34ec4..81c24ff2b7 100644
--- a/packages/select/src/components/select/select.tsx
+++ b/packages/select/src/components/select/select.tsx
@@ -21,7 +21,6 @@ import {
     Utils,
 } from "@blueprintjs/core";
 import * as Classes from "../../common/classes";
-import { IMenuRendererProps, MenuRenderer } from "../../common/menuRenderer";
 import { IListItemsProps, IQueryListRendererProps, QueryList } from "../query-list/queryList";
 
 export interface ISelectProps<T> extends IListItemsProps<T> {
@@ -32,11 +31,6 @@ export interface ISelectProps<T> extends IListItemsProps<T> {
      */
     filterable?: boolean;
 
-    /**
-     * React child to render when query is empty.
-     */
-    initialContent?: React.ReactChild;
-
     /**
      * Whether the component is non-interactive.
      * Note that you'll also need to disable the component's children, if appropriate.
@@ -44,14 +38,6 @@ export interface ISelectProps<T> extends IListItemsProps<T> {
      */
     disabled?: boolean;
 
-    /** React child to render when filtering items returns zero results. */
-    noResults?: React.ReactChild;
-
-    /**
-     * Custom renderer for the contents of the dropdown.
-     */
-    menuRenderer?: MenuRenderer<T>;
-
     /**
      * Props to spread to `InputGroup`. All props are supported except `ref` (use `inputRef` instead).
      * If you want to control the filter input, you can pass `value` and `onChange` here
diff --git a/packages/select/src/components/select/suggest.tsx b/packages/select/src/components/select/suggest.tsx
index 948bfaa985..8091504ec2 100644
--- a/packages/select/src/components/select/suggest.tsx
+++ b/packages/select/src/components/select/suggest.tsx
@@ -38,9 +38,6 @@ export interface ISuggestProps<T> extends IListItemsProps<T> {
     /** Custom renderer to transform an item into a string for the input value. */
     inputValueRenderer: (item: T) => string;
 
-    /** React child to render when filtering items returns zero results. */
-    noResults?: string | JSX.Element;
-
     /**
      * Whether the popover opens on key down or when the input is focused.
      * @default false

From 81d189580c1ea8bd6d81a08a2fa5c682bb68cbca Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Thu, 15 Mar 2018 14:27:59 -0700
Subject: [PATCH 02/12] QueryList renderer receives rendered `itemList`
 ReactNode

add filteredItems to renderer props.
itemListRenderer is now the only one with access to renderItem/items/itemsParentRef.
the default itemListRenderer produces a Menu using filteredItems (to preserve arrow keys order).
---
 packages/select/src/common/menuRenderer.ts    |  13 ++-
 .../src/components/query-list/queryList.tsx   | 109 ++++++++++--------
 2 files changed, 74 insertions(+), 48 deletions(-)

diff --git a/packages/select/src/common/menuRenderer.ts b/packages/select/src/common/menuRenderer.ts
index 225667de27..32c10a2b6c 100644
--- a/packages/select/src/common/menuRenderer.ts
+++ b/packages/select/src/common/menuRenderer.ts
@@ -9,7 +9,16 @@
  * A `menuRenderer` receives this object as its sole argument.
  */
 export interface IMenuRendererProps<T> {
-    /** Array of all items in the list. */
+    /**
+     * Array of items filtered by `itemListPredicate` or `itemPredicate`.
+     * See `items` for the full list of items.
+     */
+    filteredItems: T[];
+
+    /**
+     * Array of all items in the list.
+     *  See `filteredItems` for a filtered array based on `query` and predicate props.
+     */
     items: T[];
 
     /**
@@ -18,7 +27,7 @@ export interface IMenuRendererProps<T> {
     query: string;
 
     /**
-     * A ref handler that should be attached to the menu's outermost HTML element.
+     * A ref handler that should be attached to the parent HTML element of the menu items.
      * This is required for the active item to scroll into view automatically.
      */
     itemsParentRef: (ref: HTMLElement | null) => void;
diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx
index 5769acdd0c..48bd2800cc 100644
--- a/packages/select/src/components/query-list/queryList.tsx
+++ b/packages/select/src/components/query-list/queryList.tsx
@@ -6,7 +6,7 @@
 
 import * as React from "react";
 
-import { IProps, Keys, Utils } from "@blueprintjs/core";
+import { IProps, Keys, Menu, Utils } from "@blueprintjs/core";
 import { IItemModifiers, ItemRenderer } from "../../common/itemRenderer";
 import { IMenuRendererProps, MenuRenderer } from "../../common/menuRenderer";
 import { ItemListPredicate, ItemPredicate } from "../../common/predicate";
@@ -116,8 +116,16 @@ export interface IQueryListProps<T> extends IListItemsProps<T> {
     query: string;
 }
 
-/** Interface for object passed to `QueryList` `renderer` function. */
+/**
+ * An object describing how to render a `QueryList`.
+ * A `QueryList` `renderer` receives this object as its sole argument.
+ */
 export interface IQueryListRendererProps<T> extends IProps {
+    /**
+     * Array of items filtered by `itemListPredicate` or `itemPredicate`.
+     */
+    filteredItems: T[];
+
     /**
      * Selection handler that should be invoked when a new item has been chosen,
      * perhaps because the user clicked it.
@@ -136,29 +144,10 @@ export interface IQueryListRendererProps<T> extends IProps {
      */
     handleKeyUp: React.KeyboardEventHandler<HTMLElement>;
 
-    /**
-     * Call this function to render an `item`.
-     * `QueryList` will retrieve modifiers for the item and delegate to `itemRenderer` prop for the actual rendering.
-     * The second parameter `index` is optional here; if provided, it will be passed through `itemRenderer` props.
-     */
-    renderItem: (item: T, index?: number) => JSX.Element | null;
+    /** Rendered elements returned from `menuRenderer` prop. */
+    itemList: React.ReactNode;
 
-    /**
-     * Array of all (unfiltered) items in the list.
-     * See `filteredItems` for a filtered array based on `query`.
-     */
-    items: T[];
-
-    /**
-     * A ref handler that should be applied to the HTML element that contains the rendererd items.
-     * This is required for the `QueryList` to scroll the active item into view automatically.
-     */
-    itemsParentRef: (ref: HTMLElement | null) => void;
-
-    /**
-     * Controlled query string. Attach an `onChange` handler to the relevant
-     * element to control this prop from your application's state.
-     */
+    /** The current query string. */
     query: string;
 }
 
@@ -173,6 +162,22 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         return QueryList as new (props: IQueryListProps<T>) => QueryList<T>;
     }
 
+    /**
+     * Helper method for rendering `props.filteredItems`, with optional support for `noResults`
+     * (when filtered items is empty) and `initialContent` (when query is empty).
+     */
+    public static renderFilteredItems(
+        props: IMenuRendererProps<any>,
+        noResults?: React.ReactNode,
+        initialContent?: React.ReactNode | null,
+    ): React.ReactNode {
+        if (props.query.length === 0 && initialContent !== undefined) {
+            return initialContent;
+        }
+        const items = props.filteredItems.map(props.renderItem).filter(item => item != null);
+        return items.length > 0 ? items : noResults;
+    }
+
     private itemsParentRef?: HTMLElement | null;
     private refHandlers = {
         itemsParent: (ref: HTMLElement | null) => (this.itemsParentRef = ref),
@@ -185,16 +190,22 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
     private shouldCheckActiveItemInViewport: boolean = false;
 
     public render() {
-        const { className, items, renderer, query } = this.props;
+        const { className, items, renderer, query, itemListRenderer = this.defaultMenuRenderer } = this.props;
+        const { filteredItems } = this.state;
         return renderer({
             className,
+            filteredItems,
             handleItemSelect: this.handleItemSelect,
             handleKeyDown: this.handleKeyDown,
             handleKeyUp: this.handleKeyUp,
-            items,
-            itemsParentRef: this.refHandlers.itemsParent,
+            itemList: itemListRenderer({
+                filteredItems,
+                items,
+                itemsParentRef: this.refHandlers.itemsParent,
+                query,
+                renderItem: this.renderItem,
+            }),
             query,
-            renderItem: this.renderItem,
         });
     }
 
@@ -258,6 +269,30 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         }
     }
 
+    private defaultMenuRenderer = (menuProps: IMenuRendererProps<T>) => {
+        const { initialContent, noResults } = this.props;
+        const menuContent = QueryList.renderFilteredItems(menuProps, noResults, initialContent);
+        return <Menu ulRef={menuProps.itemsParentRef}>{menuContent}</Menu>;
+    };
+
+    private renderItem = (item: T, index?: number) => {
+        const { activeItem, itemListPredicate, itemPredicate = () => true, query } = this.props;
+        const matchesPredicate = Utils.isFunction(itemListPredicate)
+            ? this.state.filteredItems.indexOf(item) >= 0
+            : itemPredicate(query, item, index);
+        const modifiers: IItemModifiers = {
+            active: activeItem === item,
+            disabled: false,
+            matchesPredicate,
+        };
+        return this.props.itemRenderer(item, {
+            handleClick: e => this.handleItemSelect(item, e),
+            index,
+            modifiers,
+            query,
+        });
+    };
+
     private getActiveElement() {
         if (this.itemsParentRef != null) {
             return this.itemsParentRef.children.item(this.getActiveIndex()) as HTMLElement;
@@ -322,24 +357,6 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         const nextActiveIndex = Utils.clamp(this.getActiveIndex() + direction, 0, maxIndex);
         Utils.safeInvoke(this.props.onActiveItemChange, filteredItems[nextActiveIndex]);
     }
-
-    private renderItem = (item: T, index?: number) => {
-        const { activeItem, itemListPredicate, itemPredicate = () => true, query } = this.props;
-        const matchesPredicate = Utils.isFunction(itemListPredicate)
-            ? this.state.filteredItems.indexOf(item) >= 0
-            : itemPredicate(query, item, index);
-        const modifiers: IItemModifiers = {
-            active: activeItem === item,
-            disabled: false,
-            matchesPredicate,
-        };
-        return this.props.itemRenderer(item, {
-            handleClick: e => this.handleItemSelect(item, e),
-            index,
-            modifiers,
-            query,
-        });
-    };
 }
 
 function pxToNumber(value: string | null) {

From c57295d269c06a82c12be9adedca58e80a27f77c Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Thu, 15 Mar 2018 14:28:34 -0700
Subject: [PATCH 03/12] delete repeated rendering code from components, use
 listProps.itemList instead

---
 .../select/src/components/omnibar/omnibar.tsx | 25 +------------
 .../src/components/select/multiSelect.tsx     | 12 +------
 .../select/src/components/select/select.tsx   | 35 +++----------------
 .../select/src/components/select/suggest.tsx  |  8 +----
 4 files changed, 7 insertions(+), 73 deletions(-)

diff --git a/packages/select/src/components/omnibar/omnibar.tsx b/packages/select/src/components/omnibar/omnibar.tsx
index 23d4360ea4..a0e7c30e52 100644
--- a/packages/select/src/components/omnibar/omnibar.tsx
+++ b/packages/select/src/components/omnibar/omnibar.tsx
@@ -15,7 +15,6 @@ import {
     InputGroup,
     IOverlayableProps,
     IOverlayProps,
-    Menu,
     Overlay,
     Utils,
 } from "@blueprintjs/core";
@@ -131,34 +130,12 @@ export class Omnibar<T> extends React.PureComponent<IOmnibarProps<T>, IOmnibarSt
                         {...inputProps}
                         onChange={this.handleQueryChange}
                     />
-                    {this.maybeRenderMenu(listProps)}
+                    {listProps.itemList}
                 </div>
             </Overlay>
         );
     };
 
-    private renderItems({ items, renderItem }: IQueryListRendererProps<T>) {
-        const renderedItems = items.map(renderItem).filter(item => item != null);
-        return renderedItems.length > 0 ? renderedItems : this.props.noResults;
-    }
-
-    private maybeRenderMenu(listProps: IQueryListRendererProps<T>) {
-        const { initialContent } = this.props;
-        let menuChildren: any;
-
-        if (!this.isQueryEmpty()) {
-            menuChildren = this.renderItems(listProps);
-        } else if (initialContent != null) {
-            menuChildren = initialContent;
-        }
-
-        if (menuChildren != null) {
-            return <Menu ulRef={listProps.itemsParentRef}>{menuChildren}</Menu>;
-        }
-
-        return undefined;
-    }
-
     private isQueryEmpty = () => this.state.query.length === 0;
 
     private handleActiveItemChange = (activeItem?: T) => this.setState({ activeItem });
diff --git a/packages/select/src/components/select/multiSelect.tsx b/packages/select/src/components/select/multiSelect.tsx
index 64890e33f6..097982193a 100644
--- a/packages/select/src/components/select/multiSelect.tsx
+++ b/packages/select/src/components/select/multiSelect.tsx
@@ -11,7 +11,6 @@ import {
     IPopoverProps,
     ITagInputProps,
     Keys,
-    Menu,
     Popover,
     Position,
     TagInput,
@@ -141,21 +140,12 @@ export class MultiSelect<T> extends React.PureComponent<IMultiSelectProps<T>, IM
                     />
                 </div>
                 <div onKeyDown={this.getTargetKeyDownHandler(handleKeyDown)} onKeyUp={handleKeyUp}>
-                    <Menu ulRef={listProps.itemsParentRef}>{this.renderItems(listProps)}</Menu>
+                    {listProps.itemList}
                 </div>
             </Popover>
         );
     };
 
-    private renderItems({ items, renderItem }: IQueryListRendererProps<T>) {
-        const { initialContent, noResults } = this.props;
-        if (initialContent != null && this.isQueryEmpty()) {
-            return initialContent;
-        }
-        const renderedItems = items.map(renderItem).filter(item => item != null);
-        return renderedItems.length > 0 ? renderedItems : noResults;
-    }
-
     private isQueryEmpty = () => this.state.query.length === 0;
 
     private handleQueryChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/packages/select/src/components/select/select.tsx b/packages/select/src/components/select/select.tsx
index 81c24ff2b7..f901327f8c 100644
--- a/packages/select/src/components/select/select.tsx
+++ b/packages/select/src/components/select/select.tsx
@@ -15,7 +15,6 @@ import {
     InputGroup,
     IPopoverProps,
     Keys,
-    Menu,
     Popover,
     Position,
     Utils,
@@ -175,46 +174,20 @@ export class Select<T> extends React.PureComponent<ISelectProps<T>, ISelectState
                 </div>
                 <div onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}>
                     {filterable ? input : undefined}
-                    {this.renderMenu(listProps)}
+                    {listProps.itemList}
                 </div>
             </Popover>
         );
     };
 
-    private renderMenu(listProps: IQueryListRendererProps<T>) {
-        const { items, itemsParentRef, renderItem } = listProps;
-        const { menuRenderer = this.defaultMenuRenderer } = this.props;
-
-        return menuRenderer({
-            items,
-            itemsParentRef,
-            query: this.state.query,
-            renderItem,
-        });
-    }
-
-    private defaultMenuRenderer = (menuProps: IMenuRendererProps<T>) => {
-        const { initialContent, noResults } = this.props;
-        const { items, itemsParentRef, renderItem } = menuProps;
-        const maybeInitialContent = initialContent != null && this.isQueryEmpty() ? initialContent : null;
-        const renderedItems = items.map(renderItem).filter(item => item != null);
-        return (
-            <Menu ulRef={itemsParentRef}>
-                {maybeInitialContent || (renderedItems.length > 0 ? renderedItems : noResults)}
-            </Menu>
-        );
-    };
-
     private maybeRenderInputClearButton() {
-        return !this.isQueryEmpty() ? (
-            <Button className={CoreClasses.MINIMAL} icon="cross" onClick={this.resetQuery} />
-        ) : (
+        return this.state.query.length === 0 ? (
             undefined
+        ) : (
+            <Button className={CoreClasses.MINIMAL} icon="cross" onClick={this.resetQuery} />
         );
     }
 
-    private isQueryEmpty = () => this.state.query.length === 0;
-
     private handleActiveItemChange = (activeItem?: T) => this.setState({ activeItem });
 
     private handleTargetKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
diff --git a/packages/select/src/components/select/suggest.tsx b/packages/select/src/components/select/suggest.tsx
index 8091504ec2..91d904f2a8 100644
--- a/packages/select/src/components/select/suggest.tsx
+++ b/packages/select/src/components/select/suggest.tsx
@@ -13,7 +13,6 @@ import {
     InputGroup,
     IPopoverProps,
     Keys,
-    Menu,
     Popover,
     Position,
     Utils,
@@ -140,17 +139,12 @@ export class Suggest<T> extends React.PureComponent<ISuggestProps<T>, ISuggestSt
                     onKeyUp={this.getTargetKeyUpHandler(handleKeyUp)}
                 />
                 <div onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}>
-                    <Menu ulRef={listProps.itemsParentRef}>{this.renderItems(listProps)}</Menu>
+                    {listProps.itemList}
                 </div>
             </Popover>
         );
     };
 
-    private renderItems({ items, renderItem }: IQueryListRendererProps<T>) {
-        const renderedItems = items.map(renderItem).filter(item => item != null);
-        return renderedItems.length > 0 ? renderedItems : this.props.noResults;
-    }
-
     private selectText = () => {
         // wait until the input is properly focused to select the text inside of it
         requestAnimationFrame(() => {

From e6d063d5261d24a10b63a0747e2238940d9c0b91 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Thu, 15 Mar 2018 15:16:57 -0700
Subject: [PATCH 04/12] include initialContent/noResults in restProps

---
 packages/select/src/components/select/multiSelect.tsx | 10 +---------
 packages/select/src/components/select/select.tsx      |  2 +-
 packages/select/src/components/select/suggest.tsx     |  2 +-
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/select/src/components/select/multiSelect.tsx b/packages/select/src/components/select/multiSelect.tsx
index 097982193a..09bffbeeba 100644
--- a/packages/select/src/components/select/multiSelect.tsx
+++ b/packages/select/src/components/select/multiSelect.tsx
@@ -79,15 +79,7 @@ export class MultiSelect<T> extends React.PureComponent<IMultiSelectProps<T>, IM
 
     public render() {
         // omit props specific to this component, spread the rest.
-        const {
-            initialContent,
-            noResults,
-            openOnKeyDown,
-            popoverProps,
-            resetOnSelect,
-            tagInputProps,
-            ...restProps
-        } = this.props;
+        const { openOnKeyDown, popoverProps, resetOnSelect, tagInputProps, ...restProps } = this.props;
 
         return (
             <this.TypedQueryList
diff --git a/packages/select/src/components/select/select.tsx b/packages/select/src/components/select/select.tsx
index f901327f8c..16e51f21eb 100644
--- a/packages/select/src/components/select/select.tsx
+++ b/packages/select/src/components/select/select.tsx
@@ -105,7 +105,7 @@ export class Select<T> extends React.PureComponent<ISelectProps<T>, ISelectState
 
     public render() {
         // omit props specific to this component, spread the rest.
-        const { filterable, initialContent, inputProps, noResults, popoverProps, ...restProps } = this.props;
+        const { filterable, inputProps, popoverProps, ...restProps } = this.props;
 
         return (
             <this.TypedQueryList
diff --git a/packages/select/src/components/select/suggest.tsx b/packages/select/src/components/select/suggest.tsx
index 91d904f2a8..8cbe5050fa 100644
--- a/packages/select/src/components/select/suggest.tsx
+++ b/packages/select/src/components/select/suggest.tsx
@@ -88,7 +88,7 @@ export class Suggest<T> extends React.PureComponent<ISuggestProps<T>, ISuggestSt
 
     public render() {
         // omit props specific to this component, spread the rest.
-        const { inputProps, noResults, popoverProps, ...restProps } = this.props;
+        const { inputProps, popoverProps, ...restProps } = this.props;
 
         return (
             <this.TypedQueryList

From eccbabe1fba6a0371a77fa3dc56371740c0a1bf3 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Thu, 15 Mar 2018 15:17:07 -0700
Subject: [PATCH 05/12] simpler matchesPredicate modifier

---
 packages/select/src/components/query-list/queryList.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx
index 48bd2800cc..dbd0c91202 100644
--- a/packages/select/src/components/query-list/queryList.tsx
+++ b/packages/select/src/components/query-list/queryList.tsx
@@ -276,10 +276,8 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
     };
 
     private renderItem = (item: T, index?: number) => {
-        const { activeItem, itemListPredicate, itemPredicate = () => true, query } = this.props;
-        const matchesPredicate = Utils.isFunction(itemListPredicate)
-            ? this.state.filteredItems.indexOf(item) >= 0
-            : itemPredicate(query, item, index);
+        const { activeItem, query } = this.props;
+        const matchesPredicate = this.state.filteredItems.indexOf(item) >= 0;
         const modifiers: IItemModifiers = {
             active: activeItem === item,
             disabled: false,

From 8eae74810af0bede3784d9d166ab3f76c56b1b6c Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Thu, 15 Mar 2018 15:17:09 -0700
Subject: [PATCH 06/12] fix tests

---
 packages/select/test/queryListTests.tsx | 52 +++++++++++++++++++------
 packages/select/test/selectTests.tsx    | 10 ++---
 2 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/packages/select/test/queryListTests.tsx b/packages/select/test/queryListTests.tsx
index 295bea459e..fab63dd4b6 100644
--- a/packages/select/test/queryListTests.tsx
+++ b/packages/select/test/queryListTests.tsx
@@ -11,7 +11,7 @@ import * as sinon from "sinon";
 
 // this is an awkward import across the monorepo, but we'd rather not introduce a cyclical dependency or create another package
 import { IFilm, renderFilm, TOP_100_FILMS } from "../../docs-app/src/examples/select-examples/films";
-import { IQueryListRendererProps, QueryList } from "../src/index";
+import { IMenuRendererProps, IQueryListRendererProps, ItemListPredicate, QueryList } from "../src/index";
 
 describe("<QueryList>", () => {
     const FilmQueryList = QueryList.ofType<IFilm>();
@@ -36,8 +36,7 @@ describe("<QueryList>", () => {
             shallow(<FilmQueryList {...testProps} itemPredicate={predicate} query="1980" />);
 
             assert.equal(predicate.callCount, testProps.items.length, "called once per item");
-            const { items, renderItem } = testProps.renderer.args[0][0] as IQueryListRendererProps<IFilm>;
-            const filteredItems = items.map(renderItem).filter(x => x != null);
+            const { filteredItems } = testProps.renderer.args[0][0] as IQueryListRendererProps<IFilm>;
             assert.lengthOf(filteredItems, 2, "returns only films from 1980");
         });
 
@@ -46,26 +45,30 @@ describe("<QueryList>", () => {
             shallow(<FilmQueryList {...testProps} itemListPredicate={predicate} query="1980" />);
 
             assert.equal(predicate.callCount, 1, "called once for entire list");
-            const { items, renderItem } = testProps.renderer.args[0][0] as IQueryListRendererProps<IFilm>;
-            const filteredItems = items.map(renderItem).filter(x => x != null);
+            const { filteredItems } = testProps.renderer.args[0][0] as IQueryListRendererProps<IFilm>;
             assert.lengthOf(filteredItems, 2, "returns only films from 1980");
         });
 
         it("prefers itemListPredicate if both are defined", () => {
             const predicate = sinon.spy(() => true);
-            const listPredicate = sinon.spy(() => true);
+            const listPredicate: ItemListPredicate<any> = (_q, items) => items;
+            const listPredicateSpy = sinon.spy(listPredicate);
             shallow(
-                <FilmQueryList {...testProps} itemPredicate={predicate} itemListPredicate={listPredicate} query="x" />,
+                <FilmQueryList
+                    {...testProps}
+                    itemPredicate={predicate}
+                    itemListPredicate={listPredicateSpy}
+                    query="1980"
+                />,
             );
-            assert.isTrue(listPredicate.called, "listPredicate should be invoked");
+            assert.isTrue(listPredicateSpy.called, "listPredicate should be invoked");
             assert.isFalse(predicate.called, "item predicate should not be invoked");
         });
 
         it("omitting both predicate props is supported", () => {
             shallow(<FilmQueryList {...testProps} query="1980" />);
-            const { items, renderItem } = testProps.renderer.args[0][0] as IQueryListRendererProps<IFilm>;
-            const filteredItems = items.map(renderItem).filter(x => x != null);
-            assert.lengthOf(filteredItems, items.length, "returns all films");
+            const { filteredItems } = testProps.renderer.args[0][0] as IQueryListRendererProps<IFilm>;
+            assert.lengthOf(filteredItems, testProps.items.length, "returns all films");
         });
 
         it("ensure onActiveItemChange is not called with undefined and empty list", () => {
@@ -78,6 +81,33 @@ describe("<QueryList>", () => {
         });
     });
 
+    describe("renderFilteredItems()", () => {
+        const PROPS: IMenuRendererProps<string> = {
+            filteredItems: ["one"],
+            items: ["one", "two", "three"],
+            itemsParentRef: sinon.stub(),
+            query: "x",
+            renderItem: () => <div />,
+        };
+        const noResults = <strong />;
+        const initialContent = <article />;
+
+        it("returns noResults if filtered items is empty", () => {
+            const element = QueryList.renderFilteredItems({ ...PROPS, filteredItems: [] }, noResults);
+            assert.equal(element, noResults);
+        });
+
+        it("returns initialContent if query is empty", () => {
+            const element = QueryList.renderFilteredItems({ ...PROPS, query: "" }, noResults, initialContent);
+            assert.equal(element, initialContent);
+        });
+
+        it("returns filteredItems mapped through renderItem", () => {
+            const elements = QueryList.renderFilteredItems(PROPS) as JSX.Element[];
+            assert.lengthOf(elements, PROPS.filteredItems.length);
+        });
+    });
+
     describe("keyboard", () => {
         it("arrow down invokes onActiveItemChange with next filtered item");
         it("arrow up invokes onActiveItemChange with previous filtered item");
diff --git a/packages/select/test/selectTests.tsx b/packages/select/test/selectTests.tsx
index 3ec3b43c9e..9c971e9111 100644
--- a/packages/select/test/selectTests.tsx
+++ b/packages/select/test/selectTests.tsx
@@ -53,8 +53,8 @@ describe("<Select>", () => {
 
     it("itemRenderer is called for each child", () => {
         select({}, "1999");
-        // each item is rendered three times :(
-        assert.equal(handlers.itemRenderer.callCount, TOP_100_FILMS.length * 3);
+        // each item is rendered once, then again only matched items twice
+        assert.equal(handlers.itemRenderer.callCount, TOP_100_FILMS.length + 8);
     });
 
     it("renders noResults when given empty list", () => {
@@ -119,11 +119,11 @@ describe("<Select>", () => {
 
     it("returns focus to focusable target after popover closed");
 
-    describe("menuRenderer", () => {
+    describe("itemListRenderer", () => {
         it("overrides default menu rendering", () => {
             const customClass = "custom";
             const wrapper = select({
-                menuRenderer: () => <ul className={customClass} />,
+                itemListRenderer: () => <ul className={customClass} />,
             });
             assert.lengthOf(wrapper.find(Menu), 0, "should not find Menu");
             assert.lengthOf(wrapper.find(`ul.${customClass}`), 1, "should find custom class");
@@ -132,7 +132,7 @@ describe("<Select>", () => {
 
         it("renderItem calls itemRenderer", () => {
             select({
-                menuRenderer: props => <ul>{props.items.map(props.renderItem)}</ul>,
+                itemListRenderer: props => <ul>{props.items.map(props.renderItem)}</ul>,
             });
             assert.equal(handlers.itemRenderer.callCount, TOP_100_FILMS.length);
         });

From eccf1c8cb4c6524c4393d405d8b7b4ad91416643 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Thu, 15 Mar 2018 15:32:51 -0700
Subject: [PATCH 07/12] finish renaming to itemListRenderer

---
 .../common/{menuRenderer.ts => itemListRenderer.ts}  | 10 +++++-----
 .../select/src/components/query-list/queryList.tsx   | 12 ++++++------
 packages/select/src/index.ts                         |  2 +-
 packages/select/test/queryListTests.tsx              |  4 ++--
 4 files changed, 14 insertions(+), 14 deletions(-)
 rename packages/select/src/common/{menuRenderer.ts => itemListRenderer.ts} (76%)

diff --git a/packages/select/src/common/menuRenderer.ts b/packages/select/src/common/itemListRenderer.ts
similarity index 76%
rename from packages/select/src/common/menuRenderer.ts
rename to packages/select/src/common/itemListRenderer.ts
index 32c10a2b6c..1757bac7fa 100644
--- a/packages/select/src/common/menuRenderer.ts
+++ b/packages/select/src/common/itemListRenderer.ts
@@ -5,10 +5,10 @@
  */
 
 /**
- * An object describing how to render the contents of a dropdown.
- * A `menuRenderer` receives this object as its sole argument.
+ * An object describing how to render the list of items.
+ * An `itemListRenderer` receives this object as its sole argument.
  */
-export interface IMenuRendererProps<T> {
+export interface IItemListRendererProps<T> {
     /**
      * Array of items filtered by `itemListPredicate` or `itemPredicate`.
      * See `items` for the full list of items.
@@ -40,5 +40,5 @@ export interface IMenuRendererProps<T> {
     renderItem: (item: T, index?: number) => JSX.Element | null;
 }
 
-/** Type alias for a function that renders the contents of a Dropdown. */
-export type MenuRenderer<T> = (dropdownProps: IMenuRendererProps<T>) => JSX.Element;
+/** Type alias for a function that renders the list of items. */
+export type ItemListRenderer<T> = (itemListProps: IItemListRendererProps<T>) => JSX.Element;
diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx
index dbd0c91202..1c184eceb8 100644
--- a/packages/select/src/components/query-list/queryList.tsx
+++ b/packages/select/src/components/query-list/queryList.tsx
@@ -7,8 +7,8 @@
 import * as React from "react";
 
 import { IProps, Keys, Menu, Utils } from "@blueprintjs/core";
+import { IItemListRendererProps, ItemListRenderer } from "../../common/itemListRenderer";
 import { IItemModifiers, ItemRenderer } from "../../common/itemRenderer";
-import { IMenuRendererProps, MenuRenderer } from "../../common/menuRenderer";
 import { ItemListPredicate, ItemPredicate } from "../../common/predicate";
 
 /** Reusable generic props for a component that operates on a filterable, selectable list of `items`. */
@@ -48,7 +48,7 @@ export interface IListItemsProps<T> extends IProps {
      * and wraps them all in a `Menu` element. If the query is empty then `initialContent` is returned,
      * and if all items are filtered away then `noResults` is returned.
      */
-    itemListRenderer?: MenuRenderer<T>;
+    itemListRenderer?: ItemListRenderer<T>;
 
     /**
      * React content to render when query is empty.
@@ -167,7 +167,7 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
      * (when filtered items is empty) and `initialContent` (when query is empty).
      */
     public static renderFilteredItems(
-        props: IMenuRendererProps<any>,
+        props: IItemListRendererProps<any>,
         noResults?: React.ReactNode,
         initialContent?: React.ReactNode | null,
     ): React.ReactNode {
@@ -269,10 +269,10 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         }
     }
 
-    private defaultMenuRenderer = (menuProps: IMenuRendererProps<T>) => {
+    private defaultMenuRenderer = (listProps: IItemListRendererProps<T>) => {
         const { initialContent, noResults } = this.props;
-        const menuContent = QueryList.renderFilteredItems(menuProps, noResults, initialContent);
-        return <Menu ulRef={menuProps.itemsParentRef}>{menuContent}</Menu>;
+        const menuContent = QueryList.renderFilteredItems(listProps, noResults, initialContent);
+        return <Menu ulRef={listProps.itemsParentRef}>{menuContent}</Menu>;
     };
 
     private renderItem = (item: T, index?: number) => {
diff --git a/packages/select/src/index.ts b/packages/select/src/index.ts
index 6f2a3830a8..4fbc91e0ff 100644
--- a/packages/select/src/index.ts
+++ b/packages/select/src/index.ts
@@ -5,7 +5,7 @@
  */
 
 export * from "./common/classes";
+export * from "./common/itemListRenderer";
 export * from "./common/itemRenderer";
-export * from "./common/menuRenderer";
 export * from "./common/predicate";
 export * from "./components";
diff --git a/packages/select/test/queryListTests.tsx b/packages/select/test/queryListTests.tsx
index fab63dd4b6..3528c93830 100644
--- a/packages/select/test/queryListTests.tsx
+++ b/packages/select/test/queryListTests.tsx
@@ -11,7 +11,7 @@ import * as sinon from "sinon";
 
 // this is an awkward import across the monorepo, but we'd rather not introduce a cyclical dependency or create another package
 import { IFilm, renderFilm, TOP_100_FILMS } from "../../docs-app/src/examples/select-examples/films";
-import { IMenuRendererProps, IQueryListRendererProps, ItemListPredicate, QueryList } from "../src/index";
+import { IItemListRendererProps, IQueryListRendererProps, ItemListPredicate, QueryList } from "../src/index";
 
 describe("<QueryList>", () => {
     const FilmQueryList = QueryList.ofType<IFilm>();
@@ -82,7 +82,7 @@ describe("<QueryList>", () => {
     });
 
     describe("renderFilteredItems()", () => {
-        const PROPS: IMenuRendererProps<string> = {
+        const PROPS: IItemListRendererProps<string> = {
             filteredItems: ["one"],
             items: ["one", "two", "three"],
             itemsParentRef: sinon.stub(),

From 5dc30ef4e1c401b463f6a02f3cd12c6871769141 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Thu, 15 Mar 2018 15:36:30 -0700
Subject: [PATCH 08/12] update docs

---
 .../src/components/select/select-component.md | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/select/src/components/select/select-component.md b/packages/select/src/components/select/select-component.md
index 8b7628e2e6..8ce4c7d739 100644
--- a/packages/select/src/components/select/select-component.md
+++ b/packages/select/src/components/select/select-component.md
@@ -44,7 +44,7 @@ Supply a predicate to automatically query items based on the `InputGroup` value.
 Omitting both `itemPredicate` and `itemListPredicate` props will cause the component to always render all `items`. It will not hide the `InputGroup`; use the `filterable` prop for that. In this case, you can implement your own filtering and simply change the `items` prop.
 
 The **@blueprintjs/select** package exports `ItemPredicate<T>` and `ItemListPredicate<T>` type aliases to simplify the process of implementing these functions.
-See the code sample in [Item Renderer API](#select/select-component.item-renderer-api) below for usage.
+See the code sample in [Item Renderer API](#select/select-component.item-renderer) below for usage.
 
 @### Non-ideal states
 
@@ -52,11 +52,11 @@ If the query returns no results or `items` is empty, then `noResults` will be re
 
 @## Custom menu
 
-By default, `Select` renders the displayed items in a [`Menu`](#core/components/menu). This behavior can be overridden by providing the `menuRenderer` prop, giving you full control over the layout of the items. For example, you can group items under a common heading, or render large data sets using [react-virtualized](https://github.com/bvaughn/react-virtualized).
+By default, `Select` renders the displayed items in a [`Menu`](#core/components/menu). This behavior can be overridden by providing the `itemListRenderer` prop, giving you full control over the layout of the items. For example, you can group items under a common heading, or render large data sets using [react-virtualized](https://github.com/bvaughn/react-virtualized).
 
-Note that the non-ideal states of `noResults` and `initialContent` are specific to the default renderer. If you provide the `menuRenderer` prop, these props will be ignored.
+Note that the non-ideal states of `noResults` and `initialContent` are specific to the default renderer. If you provide the `itemListRenderer` prop, these props will be ignored.
 
-See the code sample in [Menu Renderer API](#select/select-component.menu-renderer-api) below for usage.
+See the code sample in [Item List Renderer API](#select/select-component.item-list-renderer) below for usage.
 
 @## Controlled usage
 
@@ -78,7 +78,7 @@ This "escape hatch" can be used to implement all sorts of advanced behavior on t
 
 @interface ISelectProps
 
-@### Item Renderer API
+@### Item renderer
 
 `Select`'s `itemRenderer` will be called for each item and receives the item and a props object containing data specific
 to rendering this item in this frame. The renderer is called for all items, so don't forget to respect
@@ -115,14 +115,14 @@ const renderFilm: ItemRenderer<Film> = (item, { handleClick, modifiers }) => {
 
 @interface IItemRendererProps
 
-@### Menu Renderer API
+@### Item list renderer
 
-If provided, the `menuRenderer` prop will be called to render the contents of the dropdown menu. It has access to the items, the current query, and a `renderItem` callback for rendering a single item. A ref handler (`itemsParentRef`) is given as well; it should be attached to the parent element of the rendered menu items so that the currently selected item can be scrolled into view automatically.
+If provided, the `itemListRenderer` prop will be called to render the contents of the dropdown menu. It has access to the items, the current query, and a `renderItem` callback for rendering a single item. A ref handler (`itemsParentRef`) is given as well; it should be attached to the parent element of the rendered menu items so that the currently selected item can be scrolled into view automatically.
 
 ```tsx
-import { MenuRenderer } from "@blueprintjs/select";
+import { ItemListRenderer } from "@blueprintjs/select";
 
-const renderMenu: MenuRenderer<Film> = ({ items, itemsParentRef, query, renderItem }) => {
+const renderMenu: ItemListRenderer<Film> = ({ items, itemsParentRef, query, renderItem }) => {
     const renderedItems = items.map(renderItem).filter(item => item != null);
     return (
         <Menu ulRef={itemsParentRef}>
@@ -136,12 +136,12 @@ const renderMenu: MenuRenderer<Film> = ({ items, itemsParentRef, query, renderIt
 };
 
 <FilmSelect
+    itemListRenderer={renderMenu}
     itemPredicate={filterFilm}
     itemRenderer={renderFilm}
     items={...}
-    menuRenderer={renderMenu}
     onItemSelect={...}
 />
 ```
 
-@interface IMenuRendererProps
+@interface IItemListRendererProps

From 32868d7e1ba602364eb0335642f8738d84bcaa7a Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Fri, 16 Mar 2018 11:40:51 -0700
Subject: [PATCH 09/12] docs edits and naming

---
 packages/select/src/common/itemListRenderer.ts     |  2 +-
 packages/select/src/components/omnibar/omnibar.tsx |  2 +-
 .../select/src/components/query-list/queryList.tsx | 14 ++++++++------
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/select/src/common/itemListRenderer.ts b/packages/select/src/common/itemListRenderer.ts
index 1757bac7fa..fc962c7701 100644
--- a/packages/select/src/common/itemListRenderer.ts
+++ b/packages/select/src/common/itemListRenderer.ts
@@ -17,7 +17,7 @@ export interface IItemListRendererProps<T> {
 
     /**
      * Array of all items in the list.
-     *  See `filteredItems` for a filtered array based on `query` and predicate props.
+     * See `filteredItems` for a filtered array based on `query` and predicate props.
      */
     items: T[];
 
diff --git a/packages/select/src/components/omnibar/omnibar.tsx b/packages/select/src/components/omnibar/omnibar.tsx
index a0e7c30e52..249434da81 100644
--- a/packages/select/src/components/omnibar/omnibar.tsx
+++ b/packages/select/src/components/omnibar/omnibar.tsx
@@ -86,8 +86,8 @@ export class Omnibar<T> extends React.PureComponent<IOmnibarProps<T>, IOmnibarSt
         return (
             <this.TypedQueryList
                 {...restProps}
-                initialContent={initialContent}
                 activeItem={this.state.activeItem}
+                initialContent={initialContent}
                 onActiveItemChange={this.handleActiveItemChange}
                 onItemSelect={this.handleItemSelect}
                 query={this.state.query}
diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx
index 1c184eceb8..8fa89795eb 100644
--- a/packages/select/src/components/query-list/queryList.tsx
+++ b/packages/select/src/components/query-list/queryList.tsx
@@ -46,7 +46,7 @@ export interface IListItemsProps<T> extends IProps {
      *
      * The default implementation invokes `itemRenderer` for each item that passes the predicate
      * and wraps them all in a `Menu` element. If the query is empty then `initialContent` is returned,
-     * and if all items are filtered away then `noResults` is returned.
+     * and if there are no items that match the predicate then `noResults` is returned.
      */
     itemListRenderer?: ItemListRenderer<T>;
 
@@ -55,7 +55,7 @@ export interface IListItemsProps<T> extends IProps {
      * If omitted, all items will be rendered (or result of `itemListPredicate` with empty query).
      * If explicit `null`, nothing will be rendered when query is empty.
      *
-     * This prop is ignored if a custom `menuRenderer` is supplied.
+     * This prop is ignored if a custom `itemListRenderer` is supplied.
      */
     initialContent?: React.ReactNode | null;
 
@@ -63,7 +63,7 @@ export interface IListItemsProps<T> extends IProps {
      * React content to render when filtering items returns zero results.
      * If omitted, nothing will be rendered in this case.
      *
-     * This prop is ignored if a custom `menuRenderer` is supplied.
+     * This prop is ignored if a custom `itemListRenderer` is supplied.
      */
     noResults?: React.ReactNode;
 
@@ -144,7 +144,7 @@ export interface IQueryListRendererProps<T> extends IProps {
      */
     handleKeyUp: React.KeyboardEventHandler<HTMLElement>;
 
-    /** Rendered elements returned from `menuRenderer` prop. */
+    /** Rendered elements returned from `itemListRenderer` prop. */
     itemList: React.ReactNode;
 
     /** The current query string. */
@@ -190,7 +190,7 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
     private shouldCheckActiveItemInViewport: boolean = false;
 
     public render() {
-        const { className, items, renderer, query, itemListRenderer = this.defaultMenuRenderer } = this.props;
+        const { className, items, renderer, query, itemListRenderer = this.renderItemList } = this.props;
         const { filteredItems } = this.state;
         return renderer({
             className,
@@ -269,12 +269,14 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         }
     }
 
-    private defaultMenuRenderer = (listProps: IItemListRendererProps<T>) => {
+    /** default `itemListRenderer` implementation */
+    private renderItemList = (listProps: IItemListRendererProps<T>) => {
         const { initialContent, noResults } = this.props;
         const menuContent = QueryList.renderFilteredItems(listProps, noResults, initialContent);
         return <Menu ulRef={listProps.itemsParentRef}>{menuContent}</Menu>;
     };
 
+    /** wrapper around `itemRenderer` to inject props */
     private renderItem = (item: T, index?: number) => {
         const { activeItem, query } = this.props;
         const matchesPredicate = this.state.filteredItems.indexOf(item) >= 0;

From 96fadd75bc4d9920927e3f77561c65754695ef13 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Fri, 16 Mar 2018 11:50:25 -0700
Subject: [PATCH 10/12] move IListItemsProps to common file add common/index.ts

---
 packages/select/src/common/index.ts           | 13 ++++
 packages/select/src/common/listItemsProps.ts  | 73 +++++++++++++++++++
 .../select/src/components/omnibar/omnibar.tsx |  4 +-
 .../src/components/query-list/queryList.tsx   | 67 +----------------
 .../src/components/select/multiSelect.tsx     |  4 +-
 .../select/src/components/select/select.tsx   |  4 +-
 .../select/src/components/select/suggest.tsx  |  4 +-
 packages/select/src/index.ts                  |  5 +-
 8 files changed, 96 insertions(+), 78 deletions(-)
 create mode 100644 packages/select/src/common/index.ts
 create mode 100644 packages/select/src/common/listItemsProps.ts

diff --git a/packages/select/src/common/index.ts b/packages/select/src/common/index.ts
new file mode 100644
index 0000000000..dfd076af8d
--- /dev/null
+++ b/packages/select/src/common/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the terms of the LICENSE file distributed with this project.
+ */
+
+import * as Classes from "./classes";
+export { Classes };
+
+export * from "./itemListRenderer";
+export * from "./itemRenderer";
+export * from "./listItemsProps";
+export * from "./predicate";
diff --git a/packages/select/src/common/listItemsProps.ts b/packages/select/src/common/listItemsProps.ts
new file mode 100644
index 0000000000..b364e54dba
--- /dev/null
+++ b/packages/select/src/common/listItemsProps.ts
@@ -0,0 +1,73 @@
+/*
+* Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+*
+* Licensed under the terms of the LICENSE file distributed with this project.
+*/
+
+import { IProps } from "@blueprintjs/core";
+import { ItemListRenderer } from "./itemListRenderer";
+import { ItemRenderer } from "./itemRenderer";
+import { ItemListPredicate, ItemPredicate } from "./predicate";
+
+/** Reusable generic props for a component that operates on a filterable, selectable list of `items`. */
+export interface IListItemsProps<T> extends IProps {
+    /** Array of items in the list. */
+    items: T[];
+
+    /**
+     * Customize querying of entire `items` array. Return new list of items.
+     * This method can reorder, add, or remove items at will.
+     * (Supports filter algorithms that operate on the entire set, rather than individual items.)
+     *
+     * If `itemPredicate` is also defined, this prop takes priority and the other will be ignored.
+     */
+    itemListPredicate?: ItemListPredicate<T>;
+
+    /**
+     * Customize querying of individual items. Return `true` to keep the item, `false` to hide.
+     * This method will be invoked once for each item, so it should be performant. For more complex
+     * queries, use `itemListPredicate` to operate once on the entire array.
+     *
+     * This prop is ignored if `itemListPredicate` is also defined.
+     */
+    itemPredicate?: ItemPredicate<T>;
+
+    /**
+     * Custom renderer for an item in the dropdown list. Receives a boolean indicating whether
+     * this item is active (selected by keyboard arrows) and an `onClick` event handler that
+     * should be attached to the returned element.
+     */
+    itemRenderer: ItemRenderer<T>;
+
+    /**
+     * Custom renderer for the contents of the dropdown.
+     *
+     * The default implementation invokes `itemRenderer` for each item that passes the predicate
+     * and wraps them all in a `Menu` element. If the query is empty then `initialContent` is returned,
+     * and if there are no items that match the predicate then `noResults` is returned.
+     */
+    itemListRenderer?: ItemListRenderer<T>;
+
+    /**
+     * React content to render when query is empty.
+     * If omitted, all items will be rendered (or result of `itemListPredicate` with empty query).
+     * If explicit `null`, nothing will be rendered when query is empty.
+     *
+     * This prop is ignored if a custom `itemListRenderer` is supplied.
+     */
+    initialContent?: React.ReactNode | null;
+
+    /**
+     * React content to render when filtering items returns zero results.
+     * If omitted, nothing will be rendered in this case.
+     *
+     * This prop is ignored if a custom `itemListRenderer` is supplied.
+     */
+    noResults?: React.ReactNode;
+
+    /**
+     * Callback invoked when an item from the list is selected,
+     * typically by clicking or pressing `enter` key.
+     */
+    onItemSelect: (item: T, event?: React.SyntheticEvent<HTMLElement>) => void;
+}
diff --git a/packages/select/src/components/omnibar/omnibar.tsx b/packages/select/src/components/omnibar/omnibar.tsx
index 249434da81..b2fc0c0a1f 100644
--- a/packages/select/src/components/omnibar/omnibar.tsx
+++ b/packages/select/src/components/omnibar/omnibar.tsx
@@ -19,8 +19,8 @@ import {
     Utils,
 } from "@blueprintjs/core";
 
-import * as Classes from "../../common/classes";
-import { IListItemsProps, IQueryListRendererProps, QueryList } from "../query-list/queryList";
+import { Classes, IListItemsProps } from "../../common";
+import { IQueryListRendererProps, QueryList } from "../query-list/queryList";
 
 export interface IOmnibarProps<T> extends IListItemsProps<T> {
     /**
diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx
index 8fa89795eb..13efaf7c39 100644
--- a/packages/select/src/components/query-list/queryList.tsx
+++ b/packages/select/src/components/query-list/queryList.tsx
@@ -7,72 +7,7 @@
 import * as React from "react";
 
 import { IProps, Keys, Menu, Utils } from "@blueprintjs/core";
-import { IItemListRendererProps, ItemListRenderer } from "../../common/itemListRenderer";
-import { IItemModifiers, ItemRenderer } from "../../common/itemRenderer";
-import { ItemListPredicate, ItemPredicate } from "../../common/predicate";
-
-/** Reusable generic props for a component that operates on a filterable, selectable list of `items`. */
-export interface IListItemsProps<T> extends IProps {
-    /** Array of items in the list. */
-    items: T[];
-
-    /**
-     * Customize querying of entire `items` array. Return new list of items.
-     * This method can reorder, add, or remove items at will.
-     * (Supports filter algorithms that operate on the entire set, rather than individual items.)
-     *
-     * If `itemPredicate` is also defined, this prop takes priority and the other will be ignored.
-     */
-    itemListPredicate?: ItemListPredicate<T>;
-
-    /**
-     * Customize querying of individual items. Return `true` to keep the item, `false` to hide.
-     * This method will be invoked once for each item, so it should be performant. For more complex
-     * queries, use `itemListPredicate` to operate once on the entire array.
-     *
-     * This prop is ignored if `itemListPredicate` is also defined.
-     */
-    itemPredicate?: ItemPredicate<T>;
-
-    /**
-     * Custom renderer for an item in the dropdown list. Receives a boolean indicating whether
-     * this item is active (selected by keyboard arrows) and an `onClick` event handler that
-     * should be attached to the returned element.
-     */
-    itemRenderer: ItemRenderer<T>;
-
-    /**
-     * Custom renderer for the contents of the dropdown.
-     *
-     * The default implementation invokes `itemRenderer` for each item that passes the predicate
-     * and wraps them all in a `Menu` element. If the query is empty then `initialContent` is returned,
-     * and if there are no items that match the predicate then `noResults` is returned.
-     */
-    itemListRenderer?: ItemListRenderer<T>;
-
-    /**
-     * React content to render when query is empty.
-     * If omitted, all items will be rendered (or result of `itemListPredicate` with empty query).
-     * If explicit `null`, nothing will be rendered when query is empty.
-     *
-     * This prop is ignored if a custom `itemListRenderer` is supplied.
-     */
-    initialContent?: React.ReactNode | null;
-
-    /**
-     * React content to render when filtering items returns zero results.
-     * If omitted, nothing will be rendered in this case.
-     *
-     * This prop is ignored if a custom `itemListRenderer` is supplied.
-     */
-    noResults?: React.ReactNode;
-
-    /**
-     * Callback invoked when an item from the list is selected,
-     * typically by clicking or pressing `enter` key.
-     */
-    onItemSelect: (item: T, event?: React.SyntheticEvent<HTMLElement>) => void;
-}
+import { IItemListRendererProps, IItemModifiers, IListItemsProps } from "../../common";
 
 export interface IQueryListProps<T> extends IListItemsProps<T> {
     /**
diff --git a/packages/select/src/components/select/multiSelect.tsx b/packages/select/src/components/select/multiSelect.tsx
index 09bffbeeba..0493c8abfe 100644
--- a/packages/select/src/components/select/multiSelect.tsx
+++ b/packages/select/src/components/select/multiSelect.tsx
@@ -16,8 +16,8 @@ import {
     TagInput,
     Utils,
 } from "@blueprintjs/core";
-import * as Classes from "../../common/classes";
-import { IListItemsProps, IQueryListRendererProps, QueryList } from "../query-list/queryList";
+import { Classes, IListItemsProps } from "../../common";
+import { IQueryListRendererProps, QueryList } from "../query-list/queryList";
 
 export interface IMultiSelectProps<T> extends IListItemsProps<T> {
     /** Controlled selected values. */
diff --git a/packages/select/src/components/select/select.tsx b/packages/select/src/components/select/select.tsx
index 16e51f21eb..9e554603ee 100644
--- a/packages/select/src/components/select/select.tsx
+++ b/packages/select/src/components/select/select.tsx
@@ -19,8 +19,8 @@ import {
     Position,
     Utils,
 } from "@blueprintjs/core";
-import * as Classes from "../../common/classes";
-import { IListItemsProps, IQueryListRendererProps, QueryList } from "../query-list/queryList";
+import { Classes, IListItemsProps } from "../../common";
+import { IQueryListRendererProps, QueryList } from "../query-list/queryList";
 
 export interface ISelectProps<T> extends IListItemsProps<T> {
     /**
diff --git a/packages/select/src/components/select/suggest.tsx b/packages/select/src/components/select/suggest.tsx
index 8cbe5050fa..c54c8c3adf 100644
--- a/packages/select/src/components/select/suggest.tsx
+++ b/packages/select/src/components/select/suggest.tsx
@@ -17,8 +17,8 @@ import {
     Position,
     Utils,
 } from "@blueprintjs/core";
-import * as Classes from "../../common/classes";
-import { IListItemsProps, IQueryListRendererProps, QueryList } from "../query-list/queryList";
+import { Classes, IListItemsProps } from "../../common";
+import { IQueryListRendererProps, QueryList } from "../query-list/queryList";
 
 export interface ISuggestProps<T> extends IListItemsProps<T> {
     /**
diff --git a/packages/select/src/index.ts b/packages/select/src/index.ts
index 4fbc91e0ff..1b47df403a 100644
--- a/packages/select/src/index.ts
+++ b/packages/select/src/index.ts
@@ -4,8 +4,5 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-export * from "./common/classes";
-export * from "./common/itemListRenderer";
-export * from "./common/itemRenderer";
-export * from "./common/predicate";
+export * from "./common";
 export * from "./components";

From b87bbcbd5b723795f2435d69b53170a3600106fe Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Fri, 16 Mar 2018 11:53:46 -0700
Subject: [PATCH 11/12] make renderFilteredItems top-level export, add docs

---
 .../select/src/common/itemListRenderer.ts     | 21 +++++++++++++++++++
 .../src/components/query-list/queryList.tsx   | 20 ++----------------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/packages/select/src/common/itemListRenderer.ts b/packages/select/src/common/itemListRenderer.ts
index fc962c7701..643b8a80dd 100644
--- a/packages/select/src/common/itemListRenderer.ts
+++ b/packages/select/src/common/itemListRenderer.ts
@@ -12,6 +12,10 @@ export interface IItemListRendererProps<T> {
     /**
      * Array of items filtered by `itemListPredicate` or `itemPredicate`.
      * See `items` for the full list of items.
+     *
+     * Use `renderFilteredItems()` utility function from this library to
+     * map each item in this array through `renderItem`, with support for
+     * optional `noResults` and `initialContent` states.
      */
     filteredItems: T[];
 
@@ -42,3 +46,20 @@ export interface IItemListRendererProps<T> {
 
 /** Type alias for a function that renders the list of items. */
 export type ItemListRenderer<T> = (itemListProps: IItemListRendererProps<T>) => JSX.Element;
+
+/**
+ * `ItemListRenderer` helper method for rendering each item in `filteredItems`,
+ * with optional support for `noResults` (when filtered items is empty)
+ * and `initialContent` (when query is empty).
+ */
+export function renderFilteredItems(
+    props: IItemListRendererProps<any>,
+    noResults?: React.ReactNode,
+    initialContent?: React.ReactNode | null,
+): React.ReactNode {
+    if (props.query.length === 0 && initialContent !== undefined) {
+        return initialContent;
+    }
+    const items = props.filteredItems.map(props.renderItem).filter(item => item != null);
+    return items.length > 0 ? items : noResults;
+}
diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx
index 13efaf7c39..38f25d05c5 100644
--- a/packages/select/src/components/query-list/queryList.tsx
+++ b/packages/select/src/components/query-list/queryList.tsx
@@ -7,7 +7,7 @@
 import * as React from "react";
 
 import { IProps, Keys, Menu, Utils } from "@blueprintjs/core";
-import { IItemListRendererProps, IItemModifiers, IListItemsProps } from "../../common";
+import { IItemListRendererProps, IItemModifiers, IListItemsProps, renderFilteredItems } from "../../common";
 
 export interface IQueryListProps<T> extends IListItemsProps<T> {
     /**
@@ -97,22 +97,6 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         return QueryList as new (props: IQueryListProps<T>) => QueryList<T>;
     }
 
-    /**
-     * Helper method for rendering `props.filteredItems`, with optional support for `noResults`
-     * (when filtered items is empty) and `initialContent` (when query is empty).
-     */
-    public static renderFilteredItems(
-        props: IItemListRendererProps<any>,
-        noResults?: React.ReactNode,
-        initialContent?: React.ReactNode | null,
-    ): React.ReactNode {
-        if (props.query.length === 0 && initialContent !== undefined) {
-            return initialContent;
-        }
-        const items = props.filteredItems.map(props.renderItem).filter(item => item != null);
-        return items.length > 0 ? items : noResults;
-    }
-
     private itemsParentRef?: HTMLElement | null;
     private refHandlers = {
         itemsParent: (ref: HTMLElement | null) => (this.itemsParentRef = ref),
@@ -207,7 +191,7 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
     /** default `itemListRenderer` implementation */
     private renderItemList = (listProps: IItemListRendererProps<T>) => {
         const { initialContent, noResults } = this.props;
-        const menuContent = QueryList.renderFilteredItems(listProps, noResults, initialContent);
+        const menuContent = renderFilteredItems(listProps, noResults, initialContent);
         return <Menu ulRef={listProps.itemsParentRef}>{menuContent}</Menu>;
     };
 

From b9be96eb46de7426a5727cdaee394e36e2292e5f Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Tue, 20 Mar 2018 15:16:54 -0700
Subject: [PATCH 12/12] renderFilteredItems tests file

---
 packages/select/test/index.ts                 |  1 +
 packages/select/test/queryListTests.tsx       | 29 +--------------
 .../select/test/renderFilteredItemsTests.tsx  | 37 +++++++++++++++++++
 3 files changed, 39 insertions(+), 28 deletions(-)
 create mode 100644 packages/select/test/renderFilteredItemsTests.tsx

diff --git a/packages/select/test/index.ts b/packages/select/test/index.ts
index 786c065efc..0396cc70e7 100644
--- a/packages/select/test/index.ts
+++ b/packages/select/test/index.ts
@@ -6,5 +6,6 @@ import "@blueprintjs/test-commons/bootstrap";
 
 import "./multiSelectTests";
 import "./queryListTests";
+import "./renderFilteredItemsTests";
 import "./selectTests";
 import "./suggestTests";
diff --git a/packages/select/test/queryListTests.tsx b/packages/select/test/queryListTests.tsx
index 3528c93830..6f81a3db27 100644
--- a/packages/select/test/queryListTests.tsx
+++ b/packages/select/test/queryListTests.tsx
@@ -11,7 +11,7 @@ import * as sinon from "sinon";
 
 // this is an awkward import across the monorepo, but we'd rather not introduce a cyclical dependency or create another package
 import { IFilm, renderFilm, TOP_100_FILMS } from "../../docs-app/src/examples/select-examples/films";
-import { IItemListRendererProps, IQueryListRendererProps, ItemListPredicate, QueryList } from "../src/index";
+import { IQueryListRendererProps, ItemListPredicate, QueryList } from "../src/index";
 
 describe("<QueryList>", () => {
     const FilmQueryList = QueryList.ofType<IFilm>();
@@ -81,33 +81,6 @@ describe("<QueryList>", () => {
         });
     });
 
-    describe("renderFilteredItems()", () => {
-        const PROPS: IItemListRendererProps<string> = {
-            filteredItems: ["one"],
-            items: ["one", "two", "three"],
-            itemsParentRef: sinon.stub(),
-            query: "x",
-            renderItem: () => <div />,
-        };
-        const noResults = <strong />;
-        const initialContent = <article />;
-
-        it("returns noResults if filtered items is empty", () => {
-            const element = QueryList.renderFilteredItems({ ...PROPS, filteredItems: [] }, noResults);
-            assert.equal(element, noResults);
-        });
-
-        it("returns initialContent if query is empty", () => {
-            const element = QueryList.renderFilteredItems({ ...PROPS, query: "" }, noResults, initialContent);
-            assert.equal(element, initialContent);
-        });
-
-        it("returns filteredItems mapped through renderItem", () => {
-            const elements = QueryList.renderFilteredItems(PROPS) as JSX.Element[];
-            assert.lengthOf(elements, PROPS.filteredItems.length);
-        });
-    });
-
     describe("keyboard", () => {
         it("arrow down invokes onActiveItemChange with next filtered item");
         it("arrow up invokes onActiveItemChange with previous filtered item");
diff --git a/packages/select/test/renderFilteredItemsTests.tsx b/packages/select/test/renderFilteredItemsTests.tsx
new file mode 100644
index 0000000000..d6bbbb5583
--- /dev/null
+++ b/packages/select/test/renderFilteredItemsTests.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the terms of the LICENSE file distributed with this project.
+ */
+
+import { assert } from "chai";
+import React from "react";
+import sinon from "sinon";
+import { IItemListRendererProps, renderFilteredItems } from "../src";
+
+describe("renderFilteredItems()", () => {
+    const PROPS: IItemListRendererProps<string> = {
+        filteredItems: ["one"],
+        items: ["one", "two", "three"],
+        itemsParentRef: sinon.stub(),
+        query: "x",
+        renderItem: () => <div />,
+    };
+    const noResults = <strong />;
+    const initialContent = <article />;
+
+    it("returns noResults if filtered items is empty", () => {
+        const element = renderFilteredItems({ ...PROPS, filteredItems: [] }, noResults);
+        assert.equal(element, noResults);
+    });
+
+    it("returns initialContent if query is empty", () => {
+        const element = renderFilteredItems({ ...PROPS, query: "" }, noResults, initialContent);
+        assert.equal(element, initialContent);
+    });
+
+    it("returns filteredItems mapped through renderItem", () => {
+        const elements = renderFilteredItems(PROPS) as JSX.Element[];
+        assert.lengthOf(elements, PROPS.filteredItems.length);
+    });
+});