@blueprintjs/select - npm Package Compare versions

Comparing version 2.0.0-beta.3 to 2.0.0-rc.1

dist/select.bundle.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("classNames")):"function"==typeof define&&define.amd?define(["React","classNames"],t):"object"==typeof exports?exports.Select=t(require("React"),require("classNames")):(e.Blueprint=e.Blueprint||{},e.Blueprint.Select=t(e.React,e.classNames))}("undefined"!=typeof self?self:this,function(e,t){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(t,n){t.exports=e},function(e,t){e.exports=Blueprint.Core},function(e,n){e.exports=t},function(e,t,n){e.exports=n(4)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r="pt-multi-select",o=r+"-popover",i="pt-omnibar",s=i+"-overlay",p="pt-select",a=p+"-popover",u=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])};function l(e,t){function n(){this.constructor=e}u(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var c=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++){t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e};function d(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&(n[r[o]]=e[r[o]])}return n}var v=n(2),m=n(0),f=n(1),y=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.refHandlers={itemsParent:function(e){return t.itemsParentRef=e}},t.handleItemSelect=function(e,n){f.Utils.safeInvoke(t.props.onActiveItemChange,e),f.Utils.safeInvoke(t.props.onItemSelect,e,n)},t.handleKeyDown=function(e){switch(e.keyCode){case f.Keys.ARROW_UP:e.preventDefault(),t.moveActiveIndex(-1);break;case f.Keys.ARROW_DOWN:e.preventDefault(),t.moveActiveIndex(1)}f.Utils.safeInvoke(t.props.onKeyDown,e)},t.handleKeyUp=function(e){var n=t.props,r=n.activeItem,o=n.onItemSelect,i=n.onKeyUp;e.keyCode===f.Keys.ENTER&&(e.preventDefault(),f.Utils.safeInvoke(o,r,e)),f.Utils.safeInvoke(i,e)},t}return l(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=e.activeItem,n=e.className,r=e.items,o=e.renderer,i=e.query;return o({activeItem:t,className:n,filteredItems:this.state.filteredItems,handleItemSelect:this.handleItemSelect,handleKeyDown:this.handleKeyDown,handleKeyUp:this.handleKeyUp,items:r,itemsParentRef:this.refHandlers.itemsParent,query:i})},t.prototype.componentWillMount=function(){this.setState({filteredItems:I(this.props)})},t.prototype.componentWillReceiveProps=function(e){e.items===this.props.items&&e.itemListPredicate===this.props.itemListPredicate&&e.itemPredicate===this.props.itemPredicate&&e.query===this.props.query||(this.shouldCheckActiveItemInViewport=!0,this.setState({filteredItems:I(e)}))},t.prototype.componentDidUpdate=function(){var e=this;this.shouldCheckActiveItemInViewport&&(requestAnimationFrame(function(){return e.scrollActiveItemIntoView()}),this.shouldCheckActiveItemInViewport=!1),this.getActiveIndex()<0&&(0!==this.state.filteredItems.length||void 0!==this.props.activeItem)&&f.Utils.safeInvoke(this.props.onActiveItemChange,this.state.filteredItems[0])},t.prototype.scrollActiveItemIntoView=function(){var e=this.getActiveElement();if(null!=this.itemsParentRef&&null!=e){var t=e.offsetTop,n=e.offsetHeight,r=this.itemsParentRef,o=r.offsetTop,i=r.scrollTop,s=r.clientHeight,p=this.getItemsParentPadding(),a=p.paddingTop,u=t+n+p.paddingBottom-o,l=t-a-o;u>=i+s?this.itemsParentRef.scrollTop=u+n-s:l<=i&&(this.itemsParentRef.scrollTop=l-n)}},t.prototype.getActiveElement=function(){if(null!=this.itemsParentRef)return this.itemsParentRef.children.item(this.getActiveIndex())},t.prototype.getActiveIndex=function(){return this.state.filteredItems.indexOf(this.props.activeItem)},t.prototype.getItemsParentPadding=function(){var e=getComputedStyle(this.itemsParentRef),t=e.paddingTop;return{paddingBottom:h(e.paddingBottom),paddingTop:h(t)}},t.prototype.moveActiveIndex=function(e){this.shouldCheckActiveItemInViewport=!0;var t=this.state.filteredItems,n=Math.max(t.length-1,0),r=f.Utils.clamp(this.getActiveIndex()+e,0,n);f.Utils.safeInvoke(this.props.onActiveItemChange,t[r])},t.displayName="Blueprint.QueryList",t}(m.Component);function h(e){return parseInt(e.slice(0,-2),10)}function I(e){var t=e.items,n=e.itemPredicate,r=e.itemListPredicate,o=e.query;return f.Utils.isFunction(r)?r(o,t):f.Utils.isFunction(n)?t.filter(function(e,t){return n(o,e,t)}):t}var P=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={query:""},t.TypedQueryList=y.ofType(),t.refHandlers={queryList:function(e){return t.queryList=e}},t.renderQueryList=function(e){var n=t.props,r=n.inputProps,o=void 0===r?{}:r,p=n.isOpen,a=n.overlayProps,u=void 0===a?{}:a,l=(o.ref,d(o,["ref"])),y=e.handleKeyDown,h=e.handleKeyUp,I=p&&!t.isQueryEmpty()?{onKeyDown:y,onKeyUp:h}:{};return m.createElement(f.Overlay,c({hasBackdrop:!0},u,{isOpen:p,className:v(u.className,s),onClose:t.handleOverlayClose}),m.createElement("div",c({className:v(e.className,i)},I),m.createElement(f.InputGroup,c({autoFocus:!0,className:f.Classes.LARGE,leftIconName:"search",placeholder:"Search...",value:e.query},l,{onChange:t.handleQueryChange})),t.maybeRenderMenu(e)))},t.isQueryEmpty=function(){return 0===t.state.query.length},t.handleActiveItemChange=function(e){return t.setState({activeItem:e})},t.handleItemSelect=function(e,n){t.isQueryEmpty()||f.Utils.safeInvoke(t.props.onItemSelect,e,n)},t.handleQueryChange=function(e){var n=t.props.inputProps,r=void 0===n?{}:n;t.setState({query:e.currentTarget.value}),f.Utils.safeInvoke(r.onChange,e)},t.handleOverlayClose=function(e){f.Utils.safeInvoke(t.props.onClose,e)},t}return l(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=(e.initialContent,e.isOpen,e.itemRenderer,e.inputProps,e.noResults,e.overlayProps,d(e,["initialContent","isOpen","itemRenderer","inputProps","noResults","overlayProps"]));return m.createElement(this.TypedQueryList,c({},t,{activeItem:this.state.activeItem,onActiveItemChange:this.handleActiveItemChange,onItemSelect:this.handleItemSelect,query:this.state.query,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.prototype.componentWillReceiveProps=function(e){var t=e.isOpen,n=!this.props.isOpen&&t&&this.props.resetOnSelect;this.setState({activeItem:n?this.props.items[0]:this.state.activeItem,query:n?"":this.state.query})},t.prototype.renderItems=function(e){var t=e.activeItem,n=e.filteredItems,r=e.handleItemSelect,o=this.props,i=o.itemRenderer,s=o.noResults;return 0===n.length?s:n.map(function(e,n){return i({handleClick:function(t){return r(e,t)},index:n,isActive:e===t,item:e})})},t.prototype.maybeRenderMenu=function(e){var t,n=this.props.initialContent;if(this.isQueryEmpty()?null!=n&&(t=n):t=this.renderItems(e),null!=t)return m.createElement(f.Menu,{ulRef:e.itemsParentRef},t)},t.displayName="Blueprint.Omnibar",t}(m.PureComponent),O=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={isOpen:!1,query:""},t.TypedQueryList=y.ofType(),t.refHandlers={input:function(e){return t.input=e},queryList:function(e){return t.queryList=e}},t.renderQueryList=function(e){var n=t.props,i=n.tagInputProps,s=void 0===i?{}:i,p=n.popoverProps,a=void 0===p?{}:p,u=n.selectedItems,l=void 0===u?[]:u,d=e.handleKeyDown,y=e.handleKeyUp,h=e.query,I=c({placeholder:"Search..."},s.inputProps,{onChange:t.handleQueryChange,ref:t.refHandlers.input,value:h});return m.createElement(f.Popover,c({autoFocus:!1,canEscapeKeyClose:!0,enforceFocus:!1,isOpen:t.state.isOpen,position:f.Position.BOTTOM_LEFT},a,{className:v(e.className,a.className),onInteraction:t.handlePopoverInteraction,popoverClassName:v(o,a.popoverClassName),popoverDidOpen:t.handlePopoverDidOpen,popoverWillOpen:t.handlePopoverWillOpen}),m.createElement("div",{onKeyDown:t.getTargetKeyDownHandler(d),onKeyUp:t.state.isOpen?y:void 0},m.createElement(f.TagInput,c({},s,{inputProps:I,className:v(r,s.className),values:l.map(t.props.tagRenderer)}))),m.createElement("div",{onKeyDown:t.getTargetKeyDownHandler(d),onKeyUp:y},m.createElement(f.Menu,{ulRef:e.itemsParentRef},t.renderItems(e))))},t.isQueryEmpty=function(){return 0===t.state.query.length},t.handleQueryChange=function(e){var n=t.props,r=n.tagInputProps,o=void 0===r?{}:r,i=n.openOnKeyDown,s=e.currentTarget.value;t.setState({query:s,isOpen:!t.isQueryEmpty()||!i}),null!=o.inputProps&&f.Utils.safeInvoke(o.inputProps.onChange,e)},t.handleItemSelect=function(e,n){t.input.focus(),null!=t.state.activeItem&&(t.props.resetOnSelect&&!t.isQueryEmpty()&&t.setState({activeItem:t.props.items[0],query:""}),f.Utils.safeInvoke(t.props.onItemSelect,e,n))},t.handlePopoverInteraction=function(e){return requestAnimationFrame(function(){var n=t.props,r=n.popoverProps,o=void 0===r?{}:r,i=n.resetOnSelect;null!=t.input&&t.input!==document.activeElement?t.setState({activeItem:i?t.props.items[0]:t.state.activeItem,isOpen:!1,query:i?"":t.state.query}):t.props.openOnKeyDown||t.setState({isOpen:!0}),f.Utils.safeInvoke(o.onInteraction,e)})},t.handlePopoverWillOpen=function(){var e=t.props,n=e.popoverProps,r=void 0===n?{}:n;e.resetOnSelect&&t.setState({activeItem:t.props.items[0]}),f.Utils.safeInvoke(r.popoverWillOpen)},t.handlePopoverDidOpen=function(){var e=t.props.popoverProps,n=void 0===e?{}:e;null!=t.queryList&&t.queryList.scrollActiveItemIntoView(),f.Utils.safeInvoke(n.popoverDidOpen)},t.handleActiveItemChange=function(e){t.setState({activeItem:e})},t.getTargetKeyDownHandler=function(e){return function(n){var r=n.which,o=t.props.resetOnSelect;r===f.Keys.ESCAPE||r===f.Keys.TAB?t.setState({activeItem:o?t.props.items[0]:t.state.activeItem,isOpen:!1,query:o?"":t.state.query}):r!==f.Keys.BACKSPACE&&r!==f.Keys.ARROW_LEFT&&r!==f.Keys.ARROW_RIGHT&&t.setState({isOpen:!0}),t.state.isOpen&&f.Utils.safeInvoke(e,n)}},t}return l(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=(e.initialContent,e.itemRenderer,e.noResults,e.openOnKeyDown,e.popoverProps,e.resetOnSelect,e.tagInputProps,d(e,["initialContent","itemRenderer","noResults","openOnKeyDown","popoverProps","resetOnSelect","tagInputProps"]));return m.createElement(this.TypedQueryList,c({},t,{activeItem:this.state.activeItem,onActiveItemChange:this.handleActiveItemChange,onItemSelect:this.handleItemSelect,query:this.state.query,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.prototype.renderItems=function(e){var t=e.activeItem,n=e.filteredItems,r=e.handleItemSelect,o=this.props,i=o.initialContent,s=o.itemRenderer,p=o.noResults;return null!=i&&this.isQueryEmpty()?i:0===n.length?p:n.map(function(e,n){return s({handleClick:function(t){return r(e,t)},index:n,isActive:e===t,item:e})})},t.displayName="Blueprint.MultiSelect",t}(m.PureComponent),g=function(e){function t(t,n){var r=e.call(this,t,n)||this;r.state={isOpen:!1,query:""},r.TypedQueryList=y.ofType(),r.refHandlers={input:function(e){r.input=e;var t=r.props.inputProps,n=void 0===t?{}:t;f.Utils.safeInvoke(n.inputRef,e)},queryList:function(e){return r.list=e}},r.renderQueryList=function(e){var t=r.props,n=t.filterable,o=void 0===n||n,i=t.disabled,s=void 0!==i&&i,p=t.inputProps,u=void 0===p?{}:p,l=t.popoverProps,y=void 0===l?{}:l,h=(u.ref,d(u,["ref"])),I=m.createElement(f.InputGroup,c({autoFocus:!0,leftIconName:"search",placeholder:"Filter...",rightElement:r.maybeRenderInputClearButton(),value:e.query},h,{inputRef:r.refHandlers.input,onChange:r.handleQueryChange})),P=e.handleKeyDown,O=e.handleKeyUp;return m.createElement(f.Popover,c({autoFocus:!1,enforceFocus:!1,isOpen:r.state.isOpen,disabled:s,position:f.Position.BOTTOM_LEFT},y,{className:v(e.className,y.className),onInteraction:r.handlePopoverInteraction,popoverClassName:v(a,y.popoverClassName),popoverWillOpen:r.handlePopoverWillOpen,popoverDidOpen:r.handlePopoverDidOpen,popoverWillClose:r.handlePopoverWillClose}),m.createElement("div",{onKeyDown:r.state.isOpen?P:r.handleTargetKeyDown,onKeyUp:r.state.isOpen?O:void 0},r.props.children),m.createElement("div",{onKeyDown:P,onKeyUp:O},o?I:void 0,m.createElement(f.Menu,{ulRef:e.itemsParentRef},r.renderItems(e))))},r.isQueryEmpty=function(){return 0===r.state.query.length},r.handleActiveItemChange=function(e){return r.setState({activeItem:e})},r.handleTargetKeyDown=function(e){e.which!==f.Keys.ARROW_UP&&e.which!==f.Keys.ARROW_DOWN||r.setState({isOpen:!0})},r.handleItemSelect=function(e,t){r.setState({isOpen:!1}),r.props.resetOnSelect&&r.resetQuery(),f.Utils.safeInvoke(r.props.onItemSelect,e,t)},r.handlePopoverInteraction=function(e){r.setState({isOpen:e});var t=r.props.popoverProps,n=void 0===t?{}:t;f.Utils.safeInvoke(n.onInteraction,e)},r.handlePopoverWillOpen=function(){var e=r.props,t=e.popoverProps,n=void 0===t?{}:t,o=e.resetOnClose;r.previousFocusedElement=document.activeElement,o&&r.resetQuery(),f.Utils.safeInvoke(n.popoverWillOpen)},r.handlePopoverDidOpen=function(){null!=r.list&&r.list.scrollActiveItemIntoView(),requestAnimationFrame(function(){var e=r.props.inputProps;!1!==(void 0===e?{}:e).autoFocus&&null!=r.input&&r.input.focus()});var e=r.props.popoverProps,t=void 0===e?{}:e;f.Utils.safeInvoke(t.popoverDidOpen)},r.handlePopoverWillClose=function(){requestAnimationFrame(function(){void 0!==r.previousFocusedElement&&(r.previousFocusedElement.focus(),r.previousFocusedElement=void 0)});var e=r.props.popoverProps,t=void 0===e?{}:e;f.Utils.safeInvoke(t.popoverWillClose)},r.handleQueryChange=function(e){var t=r.props,n=t.inputProps,o=void 0===n?{}:n,i=t.onQueryChange,s=e.currentTarget.value;r.setState({query:s}),f.Utils.safeInvoke(o.onChange,e),f.Utils.safeInvoke(i,s)},r.resetQuery=function(){var e=r.props,t=e.items,n=e.onQueryChange;r.setState({activeItem:t[0],query:""}),f.Utils.safeInvoke(n,"")};var o=t&&t.inputProps&&void 0!==t.inputProps.value?t.inputProps.value:"";return r.state={isOpen:!1,query:o},r}return l(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=(e.filterable,e.initialContent,e.itemRenderer,e.inputProps,e.noResults,e.popoverProps,d(e,["filterable","initialContent","itemRenderer","inputProps","noResults","popoverProps"]));return m.createElement(this.TypedQueryList,c({},t,{activeItem:this.state.activeItem,onActiveItemChange:this.handleActiveItemChange,onItemSelect:this.handleItemSelect,query:this.state.query,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.prototype.componentWillReceiveProps=function(e){var t=e.inputProps,n=void 0===t?{}:t;void 0!==n.value&&this.state.query!==n.value&&this.setState({query:n.value})},t.prototype.componentDidUpdate=function(e,t){this.state.isOpen&&!t.isOpen&&null!=this.list&&this.list.scrollActiveItemIntoView()},t.prototype.renderItems=function(e){var t=e.activeItem,n=e.filteredItems,r=e.handleItemSelect,o=this.props,i=o.initialContent,s=o.itemRenderer,p=o.noResults;return null!=i&&this.isQueryEmpty()?i:0===n.length?p:n.map(function(e,n){return s({handleClick:function(t){return r(e,t)},index:n,isActive:e===t,item:e})})},t.prototype.maybeRenderInputClearButton=function(){return this.isQueryEmpty()?void 0:m.createElement(f.Button,{className:f.Classes.MINIMAL,iconName:"cross",onClick:this.resetQuery})},t.displayName="Blueprint.Select",t}(m.PureComponent),S=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={isOpen:!1,isTyping:!1,query:""},t.DEFAULT_PROPS={closeOnSelect:!0,inputProps:{},openOnKeyDown:!1,popoverProps:{}},t.TypedQueryList=y.ofType(),t.refHandlers={input:function(e){return t.input=e},queryList:function(e){return t.queryList=e}},t.renderQueryList=function(e){var n=t.props,r=n.inputValueRenderer,o=n.inputProps,i=void 0===o?t.DEFAULT_PROPS.inputProps:o,s=n.popoverProps,p=void 0===s?t.DEFAULT_PROPS.popoverProps:s,u=t.state,l=u.isTyping,y=u.selectedItem,h=u.query,I=(i.ref,d(i,["ref"])),P=e.handleKeyDown,O=e.handleKeyUp,g=l?h:y?r(y):"";return m.createElement(f.Popover,c({autoFocus:!1,enforceFocus:!1,isOpen:t.state.isOpen,position:f.Position.BOTTOM_LEFT},p,{className:v(e.className,p.className),onInteraction:t.handlePopoverInteraction,popoverClassName:v(a,p.popoverClassName),popoverDidOpen:t.handlePopoverDidOpen,popoverWillClose:t.handlePopoverWillClose}),m.createElement(f.InputGroup,c({placeholder:"Search...",value:g},I,{inputRef:t.refHandlers.input,onChange:t.handleQueryChange,onFocus:t.handleInputFocus,onKeyDown:t.getTargetKeyDownHandler(P),onKeyUp:t.getTargetKeyUpHandler(O)})),m.createElement("div",{onKeyDown:P,onKeyUp:O},m.createElement(f.Menu,{ulRef:e.itemsParentRef},t.renderItems(e))))},t.selectText=function(){null!=t.input&&requestAnimationFrame(function(){return t.input.setSelectionRange(0,t.input.value.length)})},t.handleInputFocus=function(e){var n=t.props,r=n.openOnKeyDown,o=void 0===r?t.DEFAULT_PROPS.openOnKeyDown:r,i=n.inputProps,s=void 0===i?t.DEFAULT_PROPS.inputProps:i;t.selectText(),o||t.setState({isOpen:!0}),f.Utils.safeInvoke(s.onFocus,e)},t.handleActiveItemChange=function(e){return t.setState({activeItem:e})},t.handleItemSelect=function(e,n){var r,o=t.props.closeOnSelect;(void 0===o?t.DEFAULT_PROPS.closeOnSelect:o)?(t.input.blur(),r=!1):(t.input.focus(),t.selectText(),r=!0),t.setState({isOpen:r,isTyping:!1,query:"",selectedItem:e}),f.Utils.safeInvoke(t.props.onItemSelect,e,n)},t.handlePopoverInteraction=function(e){return requestAnimationFrame(function(){var n=t.props.popoverProps,r=void 0===n?{}:n;null!=t.input&&t.input!==document.activeElement&&t.setState({isOpen:!1}),f.Utils.safeInvoke(r.onInteraction,e)})},t.handlePopoverDidOpen=function(){var e=t.props.popoverProps,n=void 0===e?{}:e;null!=t.queryList&&t.queryList.scrollActiveItemIntoView(),f.Utils.safeInvoke(n.popoverDidOpen)},t.handlePopoverWillClose=function(){var e=t.props.popoverProps,n=void 0===e?{}:e,r=t.state.selectedItem;t.setState({activeItem:r||t.props.items[0],query:""}),f.Utils.safeInvoke(n.popoverDidOpen)},t.handleQueryChange=function(e){var n=t.props.inputProps,r=void 0===n?t.DEFAULT_PROPS.inputProps:n;t.setState({isTyping:!0,query:e.currentTarget.value}),f.Utils.safeInvoke(r.onChange,e)},t.getTargetKeyDownHandler=function(e){return function(n){var r=n.which,o=t.state,i=o.isTyping,s=o.selectedItem,p=t.props,a=p.inputProps,u=void 0===a?t.DEFAULT_PROPS.inputProps:a,l=p.openOnKeyDown,c=void 0===l?t.DEFAULT_PROPS.openOnKeyDown:l;r===f.Keys.ESCAPE||r===f.Keys.TAB?(t.input.blur(),t.setState({isOpen:!1,selectedItem:i?void 0:s})):c&&r!==f.Keys.BACKSPACE&&r!==f.Keys.ARROW_LEFT&&r!==f.Keys.ARROW_RIGHT&&t.setState({isOpen:!0}),t.state.isOpen&&f.Utils.safeInvoke(e,n),f.Utils.safeInvoke(u.onKeyDown,n)}},t.getTargetKeyUpHandler=function(e){return function(n){var r=t.props.inputProps,o=void 0===r?t.DEFAULT_PROPS.inputProps:r;t.state.isOpen&&f.Utils.safeInvoke(e,n),f.Utils.safeInvoke(o.onKeyUp,n)}},t}return l(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=(e.itemRenderer,e.inputProps,e.noResults,e.popoverProps,d(e,["itemRenderer","inputProps","noResults","popoverProps"]));return m.createElement(this.TypedQueryList,c({},t,{activeItem:this.state.activeItem,onActiveItemChange:this.handleActiveItemChange,onItemSelect:this.handleItemSelect,query:this.state.query,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.prototype.componentDidUpdate=function(e,t){this.state.isOpen&&!t.isOpen&&null!=this.queryList&&this.queryList.scrollActiveItemIntoView()},t.prototype.renderItems=function(e){var t=e.activeItem,n=e.filteredItems,r=e.handleItemSelect,o=this.props,i=o.itemRenderer,s=o.noResults;return 0===n.length?s:n.map(function(e,n){return i({handleClick:function(t){return r(e,t)},index:n,isActive:e===t,item:e})})},t.displayName="Blueprint.Suggest",t}(m.PureComponent);n.d(t,"MULTISELECT",function(){return r}),n.d(t,"MULTISELECT_POPOVER",function(){return o}),n.d(t,"OMNIBAR",function(){return i}),n.d(t,"OMNIBAR_OVERLAY",function(){return s}),n.d(t,"SELECT",function(){return p}),n.d(t,"SELECT_POPOVER",function(){return a}),n.d(t,"Omnibar",function(){return P}),n.d(t,"QueryList",function(){return y}),n.d(t,"MultiSelect",function(){return O}),n.d(t,"Select",function(){return g}),n.d(t,"Suggest",function(){return S})}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("classNames")):"function"==typeof define&&define.amd?define(["React","classNames"],t):"object"==typeof exports?exports.Select=t(require("React"),require("classNames")):(e.Blueprint=e.Blueprint||{},e.Blueprint.Select=t(e.React,e.classNames))}("undefined"!=typeof self?self:this,function(e,t){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(t,n){t.exports=e},function(e,t){e.exports=Blueprint.Core},function(e,n){e.exports=t},function(e,t,n){e.exports=n(4)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r="pt-multi-select",o=r+"-popover",i="pt-omnibar",s=i+"-overlay",p="pt-select",a=p+"-popover",u=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])};function l(e,t){function n(){this.constructor=e}u(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var c=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++){t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e};function v(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&(n[r[o]]=e[r[o]])}return n}var d=n(2),f=n(0),m=n(1),y=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.refHandlers={itemsParent:function(e){return t.itemsParentRef=e}},t.handleItemSelect=function(e,n){m.Utils.safeInvoke(t.props.onActiveItemChange,e),m.Utils.safeInvoke(t.props.onItemSelect,e,n)},t.handleKeyDown=function(e){switch(e.keyCode){case m.Keys.ARROW_UP:e.preventDefault(),t.moveActiveIndex(-1);break;case m.Keys.ARROW_DOWN:e.preventDefault(),t.moveActiveIndex(1)}m.Utils.safeInvoke(t.props.onKeyDown,e)},t.handleKeyUp=function(e){var n=t.props,r=n.activeItem,o=n.onItemSelect,i=n.onKeyUp;e.keyCode===m.Keys.ENTER&&(e.preventDefault(),m.Utils.safeInvoke(o,r,e)),m.Utils.safeInvoke(i,e)},t.renderItem=function(e,n){var r=t.props,o=r.activeItem,i=r.itemListPredicate,s=r.itemPredicate,p=void 0===s?function(){return!0}:s,a=r.query,u=m.Utils.isFunction(i)?t.state.filteredItems.indexOf(e)>=0:p(a,e,n),l={active:o===e,disabled:!1,matchesPredicate:u};return t.props.itemRenderer(e,{handleClick:function(n){return t.handleItemSelect(e,n)},index:n,modifiers:l})},t}return l(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=e.items,n=e.renderer,r=e.query;return n({handleItemSelect:this.handleItemSelect,handleKeyDown:this.handleKeyDown,handleKeyUp:this.handleKeyUp,items:t,itemsParentRef:this.refHandlers.itemsParent,query:r,renderItem:this.renderItem})},t.prototype.componentWillMount=function(){this.setState({filteredItems:I(this.props)})},t.prototype.componentWillReceiveProps=function(e){e.items===this.props.items&&e.itemListPredicate===this.props.itemListPredicate&&e.itemPredicate===this.props.itemPredicate&&e.query===this.props.query||(this.shouldCheckActiveItemInViewport=!0,this.setState({filteredItems:I(e)}))},t.prototype.componentDidUpdate=function(){var e=this;this.shouldCheckActiveItemInViewport&&(requestAnimationFrame(function(){return e.scrollActiveItemIntoView()}),this.shouldCheckActiveItemInViewport=!1),this.getActiveIndex()<0&&(0!==this.state.filteredItems.length||void 0!==this.props.activeItem)&&m.Utils.safeInvoke(this.props.onActiveItemChange,this.state.filteredItems[0])},t.prototype.scrollActiveItemIntoView=function(){var e=this.getActiveElement();if(null!=this.itemsParentRef&&null!=e){var t=e.offsetTop,n=e.offsetHeight,r=this.itemsParentRef,o=r.offsetTop,i=r.scrollTop,s=r.clientHeight,p=this.getItemsParentPadding(),a=p.paddingTop,u=t+n+p.paddingBottom-o,l=t-a-o;u>=i+s?this.itemsParentRef.scrollTop=u+n-s:l<=i&&(this.itemsParentRef.scrollTop=l-n)}},t.prototype.getActiveElement=function(){if(null!=this.itemsParentRef)return this.itemsParentRef.children.item(this.getActiveIndex())},t.prototype.getActiveIndex=function(){return this.state.filteredItems.indexOf(this.props.activeItem)},t.prototype.getItemsParentPadding=function(){var e=getComputedStyle(this.itemsParentRef),t=e.paddingTop;return{paddingBottom:h(e.paddingBottom),paddingTop:h(t)}},t.prototype.moveActiveIndex=function(e){this.shouldCheckActiveItemInViewport=!0;var t=this.state.filteredItems,n=Math.max(t.length-1,0),r=m.Utils.clamp(this.getActiveIndex()+e,0,n);m.Utils.safeInvoke(this.props.onActiveItemChange,t[r])},t.displayName="Blueprint2.QueryList",t}(f.Component);function h(e){return parseInt(e.slice(0,-2),10)}function I(e){var t=e.items,n=e.itemPredicate,r=e.itemListPredicate,o=e.query;return m.Utils.isFunction(r)?r(o,t):m.Utils.isFunction(n)?t.filter(function(e,t){return n(o,e,t)}):t}var P=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={query:""},t.TypedQueryList=y.ofType(),t.refHandlers={queryList:function(e){return t.queryList=e}},t.renderQueryList=function(e){var n=t.props,r=n.inputProps,o=void 0===r?{}:r,p=n.isOpen,a=n.overlayProps,u=void 0===a?{}:a,l=e.handleKeyDown,v=e.handleKeyUp,y=p&&!t.isQueryEmpty()?{onKeyDown:l,onKeyUp:v}:{};return f.createElement(m.Overlay,c({hasBackdrop:!0},u,{isOpen:p,className:d(u.className,s),onClose:t.handleOverlayClose}),f.createElement("div",c({className:d(e.className,i)},y),f.createElement(m.InputGroup,c({autoFocus:!0,className:m.Classes.LARGE,leftIcon:"search",placeholder:"Search...",value:e.query},o,{onChange:t.handleQueryChange})),t.maybeRenderMenu(e)))},t.isQueryEmpty=function(){return 0===t.state.query.length},t.handleActiveItemChange=function(e){return t.setState({activeItem:e})},t.handleItemSelect=function(e,n){t.isQueryEmpty()||m.Utils.safeInvoke(t.props.onItemSelect,e,n)},t.handleQueryChange=function(e){var n=t.props.inputProps,r=void 0===n?{}:n;t.setState({query:e.currentTarget.value}),m.Utils.safeInvoke(r.onChange,e)},t.handleOverlayClose=function(e){m.Utils.safeInvoke(t.props.onClose,e)},t}return l(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=(e.initialContent,e.isOpen,e.inputProps,e.noResults,e.overlayProps,v(e,["initialContent","isOpen","inputProps","noResults","overlayProps"]));return f.createElement(this.TypedQueryList,c({},t,{activeItem:this.state.activeItem,onActiveItemChange:this.handleActiveItemChange,onItemSelect:this.handleItemSelect,query:this.state.query,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.prototype.componentWillReceiveProps=function(e){var t=e.isOpen,n=!this.props.isOpen&&t&&this.props.resetOnSelect;this.setState({activeItem:n?this.props.items[0]:this.state.activeItem,query:n?"":this.state.query})},t.prototype.renderItems=function(e){var t=e.items,n=e.renderItem,r=t.map(n).filter(function(e){return null!=e});return r.length>0?r:this.props.noResults},t.prototype.maybeRenderMenu=function(e){var t,n=this.props.initialContent;if(this.isQueryEmpty()?null!=n&&(t=n):t=this.renderItems(e),null!=t)return f.createElement(m.Menu,{ulRef:e.itemsParentRef},t)},t.displayName="Blueprint2.Omnibar",t}(f.PureComponent),O=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={isOpen:!1,query:""},t.TypedQueryList=y.ofType(),t.refHandlers={input:function(e){return t.input=e},queryList:function(e){return t.queryList=e}},t.renderQueryList=function(e){var n=t.props,i=n.tagInputProps,s=void 0===i?{}:i,p=n.popoverProps,a=void 0===p?{}:p,u=n.selectedItems,l=void 0===u?[]:u,v=e.handleKeyDown,y=e.handleKeyUp,h=e.query,I=c({placeholder:"Search..."},s.inputProps,{onChange:t.handleQueryChange,value:h});return f.createElement(m.Popover,c({autoFocus:!1,canEscapeKeyClose:!0,enforceFocus:!1,isOpen:t.state.isOpen,position:m.Position.BOTTOM_LEFT},a,{className:d(e.className,a.className),onInteraction:t.handlePopoverInteraction,popoverClassName:d(o,a.popoverClassName),popoverDidOpen:t.handlePopoverDidOpen,popoverWillOpen:t.handlePopoverWillOpen}),f.createElement("div",{onKeyDown:t.getTargetKeyDownHandler(v),onKeyUp:t.state.isOpen?y:void 0},f.createElement(m.TagInput,c({},s,{inputProps:I,inputRef:t.refHandlers.input,className:d(r,s.className),values:l.map(t.props.tagRenderer)}))),f.createElement("div",{onKeyDown:t.getTargetKeyDownHandler(v),onKeyUp:y},f.createElement(m.Menu,{ulRef:e.itemsParentRef},t.renderItems(e))))},t.isQueryEmpty=function(){return 0===t.state.query.length},t.handleQueryChange=function(e){var n=t.props,r=n.tagInputProps,o=void 0===r?{}:r,i=n.openOnKeyDown,s=e.currentTarget.value;t.setState({query:s,isOpen:!t.isQueryEmpty()||!i}),null!=o.inputProps&&m.Utils.safeInvoke(o.inputProps.onChange,e)},t.handleItemSelect=function(e,n){t.input.focus(),null!=t.state.activeItem&&(t.props.resetOnSelect&&!t.isQueryEmpty()&&t.setState({activeItem:t.props.items[0],query:""}),m.Utils.safeInvoke(t.props.onItemSelect,e,n))},t.handlePopoverInteraction=function(e){return requestAnimationFrame(function(){var n=t.props,r=n.popoverProps,o=void 0===r?{}:r,i=n.resetOnSelect;null!=t.input&&t.input!==document.activeElement?t.setState({activeItem:i?t.props.items[0]:t.state.activeItem,isOpen:!1,query:i?"":t.state.query}):t.props.openOnKeyDown||t.setState({isOpen:!0}),m.Utils.safeInvoke(o.onInteraction,e)})},t.handlePopoverWillOpen=function(){var e=t.props,n=e.popoverProps,r=void 0===n?{}:n;e.resetOnSelect&&t.setState({activeItem:t.props.items[0]}),m.Utils.safeInvoke(r.popoverWillOpen)},t.handlePopoverDidOpen=function(){var e=t.props.popoverProps,n=void 0===e?{}:e;null!=t.queryList&&t.queryList.scrollActiveItemIntoView(),m.Utils.safeInvoke(n.popoverDidOpen)},t.handleActiveItemChange=function(e){t.setState({activeItem:e})},t.getTargetKeyDownHandler=function(e){return function(n){var r=n.which,o=t.props.resetOnSelect;r===m.Keys.ESCAPE||r===m.Keys.TAB?t.setState({activeItem:o?t.props.items[0]:t.state.activeItem,isOpen:!1,query:o?"":t.state.query}):r!==m.Keys.BACKSPACE&&r!==m.Keys.ARROW_LEFT&&r!==m.Keys.ARROW_RIGHT&&t.setState({isOpen:!0}),t.state.isOpen&&m.Utils.safeInvoke(e,n)}},t}return l(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=(e.initialContent,e.noResults,e.openOnKeyDown,e.popoverProps,e.resetOnSelect,e.tagInputProps,v(e,["initialContent","noResults","openOnKeyDown","popoverProps","resetOnSelect","tagInputProps"]));return f.createElement(this.TypedQueryList,c({},t,{activeItem:this.state.activeItem,onActiveItemChange:this.handleActiveItemChange,onItemSelect:this.handleItemSelect,query:this.state.query,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.prototype.renderItems=function(e){var t=e.items,n=e.renderItem,r=this.props,o=r.initialContent,i=r.noResults;if(null!=o&&this.isQueryEmpty())return o;var s=t.map(n).filter(function(e){return null!=e});return s.length>0?s:i},t.displayName="Blueprint2.MultiSelect",t}(f.PureComponent),g=function(e){function t(t,n){var r=e.call(this,t,n)||this;r.state={isOpen:!1,query:""},r.TypedQueryList=y.ofType(),r.refHandlers={input:function(e){r.input=e;var t=r.props.inputProps,n=void 0===t?{}:t;m.Utils.safeInvoke(n.inputRef,e)},queryList:function(e){return r.list=e}},r.renderQueryList=function(e){var t=r.props,n=t.filterable,o=void 0===n||n,i=t.disabled,s=void 0!==i&&i,p=t.inputProps,u=void 0===p?{}:p,l=t.popoverProps,v=void 0===l?{}:l,y=f.createElement(m.InputGroup,c({autoFocus:!0,leftIcon:"search",placeholder:"Filter...",rightElement:r.maybeRenderInputClearButton(),value:e.query},u,{inputRef:r.refHandlers.input,onChange:r.handleQueryChange})),h=e.handleKeyDown,I=e.handleKeyUp;return f.createElement(m.Popover,c({autoFocus:!1,enforceFocus:!1,isOpen:r.state.isOpen,disabled:s,position:m.Position.BOTTOM_LEFT},v,{className:d(e.className,v.className),onInteraction:r.handlePopoverInteraction,popoverClassName:d(a,v.popoverClassName),popoverWillOpen:r.handlePopoverWillOpen,popoverDidOpen:r.handlePopoverDidOpen,popoverWillClose:r.handlePopoverWillClose}),f.createElement("div",{onKeyDown:r.state.isOpen?h:r.handleTargetKeyDown,onKeyUp:r.state.isOpen?I:void 0},r.props.children),f.createElement("div",{onKeyDown:h,onKeyUp:I},o?y:void 0,f.createElement(m.Menu,{ulRef:e.itemsParentRef},r.renderItems(e))))},r.isQueryEmpty=function(){return 0===r.state.query.length},r.handleActiveItemChange=function(e){return r.setState({activeItem:e})},r.handleTargetKeyDown=function(e){e.which!==m.Keys.ARROW_UP&&e.which!==m.Keys.ARROW_DOWN||r.setState({isOpen:!0})},r.handleItemSelect=function(e,t){r.setState({isOpen:!1}),r.props.resetOnSelect&&r.resetQuery(),m.Utils.safeInvoke(r.props.onItemSelect,e,t)},r.handlePopoverInteraction=function(e){r.setState({isOpen:e});var t=r.props.popoverProps,n=void 0===t?{}:t;m.Utils.safeInvoke(n.onInteraction,e)},r.handlePopoverWillOpen=function(){var e=r.props,t=e.popoverProps,n=void 0===t?{}:t,o=e.resetOnClose;r.previousFocusedElement=document.activeElement,o&&r.resetQuery(),m.Utils.safeInvoke(n.popoverWillOpen)},r.handlePopoverDidOpen=function(){null!=r.list&&r.list.scrollActiveItemIntoView(),requestAnimationFrame(function(){var e=r.props.inputProps;!1!==(void 0===e?{}:e).autoFocus&&null!=r.input&&r.input.focus()});var e=r.props.popoverProps,t=void 0===e?{}:e;m.Utils.safeInvoke(t.popoverDidOpen)},r.handlePopoverWillClose=function(){requestAnimationFrame(function(){void 0!==r.previousFocusedElement&&(r.previousFocusedElement.focus(),r.previousFocusedElement=void 0)});var e=r.props.popoverProps,t=void 0===e?{}:e;m.Utils.safeInvoke(t.popoverWillClose)},r.handleQueryChange=function(e){var t=r.props,n=t.inputProps,o=void 0===n?{}:n,i=t.onQueryChange,s=e.currentTarget.value;r.setState({query:s}),m.Utils.safeInvoke(o.onChange,e),m.Utils.safeInvoke(i,s)},r.resetQuery=function(){var e=r.props,t=e.items,n=e.onQueryChange;r.setState({activeItem:t[0],query:""}),m.Utils.safeInvoke(n,"")};var o=t&&t.inputProps&&void 0!==t.inputProps.value?t.inputProps.value:"";return r.state={isOpen:!1,query:o},r}return l(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=(e.filterable,e.initialContent,e.inputProps,e.noResults,e.popoverProps,v(e,["filterable","initialContent","inputProps","noResults","popoverProps"]));return f.createElement(this.TypedQueryList,c({},t,{activeItem:this.state.activeItem,onActiveItemChange:this.handleActiveItemChange,onItemSelect:this.handleItemSelect,query:this.state.query,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.prototype.componentWillReceiveProps=function(e){var t=e.inputProps,n=void 0===t?{}:t;void 0!==n.value&&this.state.query!==n.value&&this.setState({query:n.value})},t.prototype.componentDidUpdate=function(e,t){this.state.isOpen&&!t.isOpen&&null!=this.list&&this.list.scrollActiveItemIntoView()},t.prototype.renderItems=function(e){var t=e.items,n=e.renderItem,r=this.props,o=r.initialContent,i=r.noResults;if(null!=o&&this.isQueryEmpty())return o;var s=t.map(n).filter(function(e){return null!=e});return s.length>0?s:i},t.prototype.maybeRenderInputClearButton=function(){return this.isQueryEmpty()?void 0:f.createElement(m.Button,{className:m.Classes.MINIMAL,icon:"cross",onClick:this.resetQuery})},t.displayName="Blueprint2.Select",t}(f.PureComponent),S=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={isOpen:!1,isTyping:!1,query:""},t.DEFAULT_PROPS={closeOnSelect:!0,inputProps:{},openOnKeyDown:!1,popoverProps:{}},t.TypedQueryList=y.ofType(),t.refHandlers={input:function(e){return t.input=e},queryList:function(e){return t.queryList=e}},t.renderQueryList=function(e){var n=t.props,r=n.inputValueRenderer,o=n.inputProps,i=void 0===o?t.DEFAULT_PROPS.inputProps:o,s=n.popoverProps,p=void 0===s?t.DEFAULT_PROPS.popoverProps:s,u=t.state,l=u.isTyping,v=u.selectedItem,y=u.query,h=e.handleKeyDown,I=e.handleKeyUp,P=l?y:v?r(v):"";return f.createElement(m.Popover,c({autoFocus:!1,enforceFocus:!1,isOpen:t.state.isOpen,position:m.Position.BOTTOM_LEFT},p,{className:d(e.className,p.className),onInteraction:t.handlePopoverInteraction,popoverClassName:d(a,p.popoverClassName),popoverDidOpen:t.handlePopoverDidOpen,popoverWillClose:t.handlePopoverWillClose}),f.createElement(m.InputGroup,c({placeholder:"Search...",value:P},i,{inputRef:t.refHandlers.input,onChange:t.handleQueryChange,onFocus:t.handleInputFocus,onKeyDown:t.getTargetKeyDownHandler(h),onKeyUp:t.getTargetKeyUpHandler(I)})),f.createElement("div",{onKeyDown:h,onKeyUp:I},f.createElement(m.Menu,{ulRef:e.itemsParentRef},t.renderItems(e))))},t.selectText=function(){null!=t.input&&requestAnimationFrame(function(){return t.input.setSelectionRange(0,t.input.value.length)})},t.handleInputFocus=function(e){var n=t.props,r=n.openOnKeyDown,o=void 0===r?t.DEFAULT_PROPS.openOnKeyDown:r,i=n.inputProps,s=void 0===i?t.DEFAULT_PROPS.inputProps:i;t.selectText(),o||t.setState({isOpen:!0}),m.Utils.safeInvoke(s.onFocus,e)},t.handleActiveItemChange=function(e){return t.setState({activeItem:e})},t.handleItemSelect=function(e,n){var r,o=t.props.closeOnSelect;(void 0===o?t.DEFAULT_PROPS.closeOnSelect:o)?(t.input.blur(),r=!1):(t.input.focus(),t.selectText(),r=!0),t.setState({isOpen:r,isTyping:!1,query:"",selectedItem:e}),m.Utils.safeInvoke(t.props.onItemSelect,e,n)},t.handlePopoverInteraction=function(e){return requestAnimationFrame(function(){var n=t.props.popoverProps,r=void 0===n?{}:n;null!=t.input&&t.input!==document.activeElement&&t.setState({isOpen:!1}),m.Utils.safeInvoke(r.onInteraction,e)})},t.handlePopoverDidOpen=function(){var e=t.props.popoverProps,n=void 0===e?{}:e;null!=t.queryList&&t.queryList.scrollActiveItemIntoView(),m.Utils.safeInvoke(n.popoverDidOpen)},t.handlePopoverWillClose=function(){var e=t.props.popoverProps,n=void 0===e?{}:e,r=t.state.selectedItem;t.setState({activeItem:r||t.props.items[0],query:""}),m.Utils.safeInvoke(n.popoverDidOpen)},t.handleQueryChange=function(e){var n=t.props.inputProps,r=void 0===n?t.DEFAULT_PROPS.inputProps:n;t.setState({isTyping:!0,query:e.currentTarget.value}),m.Utils.safeInvoke(r.onChange,e)},t.getTargetKeyDownHandler=function(e){return function(n){var r=n.which,o=t.state,i=o.isTyping,s=o.selectedItem,p=t.props,a=p.inputProps,u=void 0===a?t.DEFAULT_PROPS.inputProps:a,l=p.openOnKeyDown,c=void 0===l?t.DEFAULT_PROPS.openOnKeyDown:l;r===m.Keys.ESCAPE||r===m.Keys.TAB?(t.input.blur(),t.setState({isOpen:!1,selectedItem:i?void 0:s})):c&&r!==m.Keys.BACKSPACE&&r!==m.Keys.ARROW_LEFT&&r!==m.Keys.ARROW_RIGHT&&t.setState({isOpen:!0}),t.state.isOpen&&m.Utils.safeInvoke(e,n),m.Utils.safeInvoke(u.onKeyDown,n)}},t.getTargetKeyUpHandler=function(e){return function(n){var r=t.props.inputProps,o=void 0===r?t.DEFAULT_PROPS.inputProps:r;t.state.isOpen&&m.Utils.safeInvoke(e,n),m.Utils.safeInvoke(o.onKeyUp,n)}},t}return l(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=(e.inputProps,e.noResults,e.popoverProps,v(e,["inputProps","noResults","popoverProps"]));return f.createElement(this.TypedQueryList,c({},t,{activeItem:this.state.activeItem,onActiveItemChange:this.handleActiveItemChange,onItemSelect:this.handleItemSelect,query:this.state.query,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.prototype.componentDidUpdate=function(e,t){this.state.isOpen&&!t.isOpen&&null!=this.queryList&&this.queryList.scrollActiveItemIntoView()},t.prototype.renderItems=function(e){var t=e.items,n=e.renderItem,r=t.map(n).filter(function(e){return null!=e});return r.length>0?r:this.props.noResults},t.displayName="Blueprint2.Suggest",t}(f.PureComponent);n.d(t,"MULTISELECT",function(){return r}),n.d(t,"MULTISELECT_POPOVER",function(){return o}),n.d(t,"OMNIBAR",function(){return i}),n.d(t,"OMNIBAR_OVERLAY",function(){return s}),n.d(t,"SELECT",function(){return p}),n.d(t,"SELECT_POPOVER",function(){return a}),n.d(t,"Omnibar",function(){return P}),n.d(t,"QueryList",function(){return y}),n.d(t,"MultiSelect",function(){return O}),n.d(t,"Select",function(){return g}),n.d(t,"Suggest",function(){return S})}])});

lib/cjs/components/omnibar/omnibar.d.ts

@@ -5,3 +5,2 @@ /// <reference types="react" />
 import { IListItemsProps } from "../query-list/queryList";
-import { ISelectItemRendererProps } from "../select/select";
 export interface IOmnibarProps<T> extends IListItemsProps<T> {
@@ -12,8 +11,2 @@ /**
     initialContent?: React.ReactChild;
-    /**
-     * 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: (itemProps: ISelectItemRendererProps<T>) => JSX.Element;
     /** React child to render when filtering items returns zero results. */
@@ -64,3 +57,3 @@ noResults?: React.ReactChild;
     private renderQueryList;
-    private renderItems({activeItem, filteredItems, handleItemSelect});
+    private renderItems({items, renderItem});
     private maybeRenderMenu(listProps);
@@ -67,0 +60,0 @@ private isQueryEmpty;

lib/cjs/components/omnibar/omnibar.js

@@ -27,3 +27,2 @@ "use strict";
             var _a = _this.props, _b = _a.inputProps, inputProps = _b === void 0 ? {} : _b, isOpen = _a.isOpen, _c = _a.overlayProps, overlayProps = _c === void 0 ? {} : _c;
-            var ref = inputProps.ref, htmlInputProps = tslib_1.__rest(inputProps, ["ref"]);
             var handleKeyDown = listProps.handleKeyDown, handleKeyUp = listProps.handleKeyUp;
@@ -33,3 +32,3 @@ var handlers = isOpen && !_this.isQueryEmpty() ? { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp } : {};
                 React.createElement("div", tslib_1.__assign({ className: classNames(listProps.className, Classes.OMNIBAR) }, handlers),
-                    React.createElement(core_1.InputGroup, tslib_1.__assign({ autoFocus: true, className: core_1.Classes.LARGE, leftIconName: "search", placeholder: "Search...", value: listProps.query }, htmlInputProps, { onChange: _this.handleQueryChange })),
+                    React.createElement(core_1.InputGroup, tslib_1.__assign({ autoFocus: true, className: core_1.Classes.LARGE, leftIcon: "search", placeholder: "Search...", value: listProps.query }, inputProps, { onChange: _this.handleQueryChange })),
                     _this.maybeRenderMenu(listProps))));
@@ -59,3 +58,3 @@ };
         // omit props specific to this component, spread the rest.
-        var _a = this.props, initialContent = _a.initialContent, isOpen = _a.isOpen, itemRenderer = _a.itemRenderer, inputProps = _a.inputProps, noResults = _a.noResults, overlayProps = _a.overlayProps, restProps = tslib_1.__rest(_a, ["initialContent", "isOpen", "itemRenderer", "inputProps", "noResults", "overlayProps"]);
+        var _a = this.props, initialContent = _a.initialContent, isOpen = _a.isOpen, inputProps = _a.inputProps, noResults = _a.noResults, overlayProps = _a.overlayProps, restProps = tslib_1.__rest(_a, ["initialContent", "isOpen", "inputProps", "noResults", "overlayProps"]);
         return (React.createElement(this.TypedQueryList, tslib_1.__assign({}, restProps, { activeItem: this.state.activeItem, onActiveItemChange: this.handleActiveItemChange, onItemSelect: this.handleItemSelect, query: this.state.query, ref: this.refHandlers.queryList, renderer: this.renderQueryList })));
@@ -72,15 +71,5 @@ };
     Omnibar.prototype.renderItems = function (_a) {
-        var activeItem = _a.activeItem, filteredItems = _a.filteredItems, handleItemSelect = _a.handleItemSelect;
-        var _b = this.props, itemRenderer = _b.itemRenderer, noResults = _b.noResults;
-        if (filteredItems.length === 0) {
-            return noResults;
-        }
-        return filteredItems.map(function (item, index) {
-            return itemRenderer({
-                handleClick: function (e) { return handleItemSelect(item, e); },
-                index: index,
-                isActive: item === activeItem,
-                item: item,
-            });
-        });
+        var items = _a.items, renderItem = _a.renderItem;
+        var renderedItems = items.map(renderItem).filter(function (item) { return item != null; });
+        return renderedItems.length > 0 ? renderedItems : this.props.noResults;
     };
@@ -101,5 +90,5 @@ Omnibar.prototype.maybeRenderMenu = function (listProps) {
     };
-    Omnibar.displayName = "Blueprint.Omnibar";
+    Omnibar.displayName = "Blueprint2.Omnibar";
     return Omnibar;
 }(React.PureComponent));
 exports.Omnibar = Omnibar;

lib/cjs/components/query-list/queryList.d.ts

 /// <reference types="react" />
 import * as React from "react";
 import { IProps } from "@blueprintjs/core";
+import { 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 {
@@ -14,3 +17,3 @@ /** Array of items in the list. */
      */
-    itemListPredicate?: (query: string, items: T[]) => T[];
+    itemListPredicate?: ItemListPredicate<T>;
     /**
@@ -23,4 +26,10 @@ * Customize querying of individual items. Return `true` to keep the item, `false` to hide.
      */
-    itemPredicate?: (query: string, item: T, index: number) => boolean;
+    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>;
+    /**
      * Callback invoked when an item from the list is selected,
@@ -67,11 +76,5 @@ * typically by clicking or pressing `enter` key.
 }
+/** Interface for object passed to `QueryList` `renderer` function. */
 export interface IQueryListRendererProps<T> extends IProps {
-    /** The item focused by the keyboard (arrow keys). This item should stand out visually from the rest. */
-    activeItem: T | undefined;
     /**
-     * Array of filtered items from the list (those that matched the predicate with the current `query`).
-     * See `items` for the full unfiltered list.
-     */
-    filteredItems: T[];
-    /**
      * Selection handler that should be invoked when a new item has been chosen,
@@ -92,2 +95,8 @@ * perhaps because the user clicked it.
     /**
+     * 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;
+    /**
      * Array of all (unfiltered) items in the list.
@@ -133,2 +142,3 @@ * See `filteredItems` for a filtered array based on `query`.
     private moveActiveIndex(direction);
+    private renderItem;
 }

lib/cjs/components/query-list/queryList.js

@@ -48,2 +48,18 @@ "use strict";
         };
+        _this.renderItem = function (item, index) {
+            var _a = _this.props, activeItem = _a.activeItem, itemListPredicate = _a.itemListPredicate, _b = _a.itemPredicate, itemPredicate = _b === void 0 ? function () { return true; } : _b, query = _a.query;
+            var matchesPredicate = core_1.Utils.isFunction(itemListPredicate)
+                ? _this.state.filteredItems.indexOf(item) >= 0
+                : itemPredicate(query, item, index);
+            var modifiers = {
+                active: activeItem === item,
+                disabled: false,
+                matchesPredicate: matchesPredicate,
+            };
+            return _this.props.itemRenderer(item, {
+                handleClick: function (e) { return _this.handleItemSelect(item, e); },
+                index: index,
+                modifiers: modifiers,
+            });
+        };
         return _this;
@@ -55,8 +71,4 @@ }
     QueryList.prototype.render = function () {
-        var _a = this.props, activeItem = _a.activeItem, className = _a.className, items = _a.items, renderer = _a.renderer, query = _a.query;
-        var filteredItems = this.state.filteredItems;
+        var _a = this.props, items = _a.items, renderer = _a.renderer, query = _a.query;
         return renderer({
-            activeItem: activeItem,
-            className: className,
-            filteredItems: filteredItems,
             handleItemSelect: this.handleItemSelect,
@@ -68,2 +80,3 @@ handleKeyDown: this.handleKeyDown,
             query: query,
+            renderItem: this.renderItem,
         });
@@ -145,3 +158,3 @@ };
     };
-    QueryList.displayName = "Blueprint.QueryList";
+    QueryList.displayName = "Blueprint2.QueryList";
     return QueryList;
@@ -148,0 +161,0 @@ }(React.Component));

lib/cjs/components/select/multiSelect.d.ts

@@ -5,3 +5,2 @@ /// <reference types="react" />
 import { IListItemsProps } from "../query-list/queryList";
-import { ISelectItemRendererProps } from "../select/select";
 export interface IMultiSelectProps<T> extends IListItemsProps<T> {
@@ -14,8 +13,2 @@ /** Controlled selected values. */
     initialContent?: React.ReactChild;
-    /**
-     * 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: (itemProps: ISelectItemRendererProps<T>) => JSX.Element;
     /** React child to render when filtering items returns zero results. */
@@ -57,3 +50,3 @@ noResults?: React.ReactChild;
     private renderQueryList;
-    private renderItems({activeItem, filteredItems, handleItemSelect});
+    private renderItems({items, renderItem});
     private isQueryEmpty;
@@ -60,0 +53,0 @@ private handleQueryChange;

lib/cjs/components/select/multiSelect.js

@@ -31,6 +31,6 @@ "use strict";
                 // tslint:disable-next-line:object-literal-sort-keys
-                onChange: _this.handleQueryChange, ref: _this.refHandlers.input, value: query });
+                onChange: _this.handleQueryChange, value: query });
             return (React.createElement(core_1.Popover, tslib_1.__assign({ autoFocus: false, canEscapeKeyClose: true, enforceFocus: false, isOpen: _this.state.isOpen, position: core_1.Position.BOTTOM_LEFT }, popoverProps, { className: classNames(listProps.className, popoverProps.className), onInteraction: _this.handlePopoverInteraction, popoverClassName: classNames(Classes.MULTISELECT_POPOVER, popoverProps.popoverClassName), popoverDidOpen: _this.handlePopoverDidOpen, popoverWillOpen: _this.handlePopoverWillOpen }),
                 React.createElement("div", { onKeyDown: _this.getTargetKeyDownHandler(handleKeyDown), onKeyUp: _this.state.isOpen ? handleKeyUp : undefined },
-                    React.createElement(core_1.TagInput, tslib_1.__assign({}, tagInputProps, { inputProps: defaultInputProps, className: classNames(Classes.MULTISELECT, tagInputProps.className), values: selectedItems.map(_this.props.tagRenderer) }))),
+                    React.createElement(core_1.TagInput, tslib_1.__assign({}, tagInputProps, { inputProps: defaultInputProps, inputRef: _this.refHandlers.input, className: classNames(Classes.MULTISELECT, tagInputProps.className), values: selectedItems.map(_this.props.tagRenderer) }))),
                 React.createElement("div", { onKeyDown: _this.getTargetKeyDownHandler(handleKeyDown), onKeyUp: handleKeyUp },
@@ -124,26 +124,17 @@ React.createElement(core_1.Menu, { ulRef: listProps.itemsParentRef }, _this.renderItems(listProps)))));
         // omit props specific to this component, spread the rest.
-        var _a = this.props, initialContent = _a.initialContent, itemRenderer = _a.itemRenderer, noResults = _a.noResults, openOnKeyDown = _a.openOnKeyDown, popoverProps = _a.popoverProps, resetOnSelect = _a.resetOnSelect, tagInputProps = _a.tagInputProps, restProps = tslib_1.__rest(_a, ["initialContent", "itemRenderer", "noResults", "openOnKeyDown", "popoverProps", "resetOnSelect", "tagInputProps"]);
+        var _a = this.props, initialContent = _a.initialContent, noResults = _a.noResults, openOnKeyDown = _a.openOnKeyDown, popoverProps = _a.popoverProps, resetOnSelect = _a.resetOnSelect, tagInputProps = _a.tagInputProps, restProps = tslib_1.__rest(_a, ["initialContent", "noResults", "openOnKeyDown", "popoverProps", "resetOnSelect", "tagInputProps"]);
         return (React.createElement(this.TypedQueryList, tslib_1.__assign({}, restProps, { activeItem: this.state.activeItem, onActiveItemChange: this.handleActiveItemChange, onItemSelect: this.handleItemSelect, query: this.state.query, ref: this.refHandlers.queryList, renderer: this.renderQueryList })));
     };
     MultiSelect.prototype.renderItems = function (_a) {
-        var activeItem = _a.activeItem, filteredItems = _a.filteredItems, handleItemSelect = _a.handleItemSelect;
-        var _b = this.props, initialContent = _b.initialContent, itemRenderer = _b.itemRenderer, noResults = _b.noResults;
+        var items = _a.items, renderItem = _a.renderItem;
+        var _b = this.props, initialContent = _b.initialContent, noResults = _b.noResults;
         if (initialContent != null && this.isQueryEmpty()) {
             return initialContent;
         }
-        if (filteredItems.length === 0) {
-            return noResults;
-        }
-        return filteredItems.map(function (item, index) {
-            return itemRenderer({
-                handleClick: function (e) { return handleItemSelect(item, e); },
-                index: index,
-                isActive: item === activeItem,
-                item: item,
-            });
-        });
+        var renderedItems = items.map(renderItem).filter(function (item) { return item != null; });
+        return renderedItems.length > 0 ? renderedItems : noResults;
     };
-    MultiSelect.displayName = "Blueprint.MultiSelect";
+    MultiSelect.displayName = "Blueprint2.MultiSelect";
     return MultiSelect;
 }(React.PureComponent));
 exports.MultiSelect = MultiSelect;

lib/cjs/components/select/select.d.ts

@@ -17,8 +17,2 @@ /// <reference types="react" />
     /**
-     * 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: (itemProps: ISelectItemRendererProps<T>) => JSX.Element;
-    /**
      * Whether the component is non-interactive.
@@ -58,18 +52,2 @@ * Note that you'll also need to disable the component's children, if appropriate.
 }
-export interface ISelectItemRendererProps<T> {
-    /**
-     * Click handler that should be attached to item's `onClick` event.
-     * Will invoke `Select` `onItemSelect` prop with this `item`.
-     */
-    handleClick: React.MouseEventHandler<HTMLElement>;
-    /** Index of item in array of filtered items (_not_ the absolute position of item in full array). */
-    index: number;
-    /** The item being rendered */
-    item: T;
-    /**
-     * Whether the item is active according to keyboard navigation.
-     * An active item should have a distinct visual appearance.
-     */
-    isActive: boolean;
-}
 export interface ISelectState<T> {
@@ -94,3 +72,3 @@ activeItem?: T;
     private renderQueryList;
-    private renderItems({activeItem, filteredItems, handleItemSelect});
+    private renderItems({items, renderItem});
     private maybeRenderInputClearButton();
@@ -97,0 +75,0 @@ private isQueryEmpty;

lib/cjs/components/select/select.js

@@ -31,4 +31,3 @@ "use strict";
             var _a = _this.props, _b = _a.filterable, filterable = _b === void 0 ? true : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.inputProps, inputProps = _d === void 0 ? {} : _d, _e = _a.popoverProps, popoverProps = _e === void 0 ? {} : _e;
-            var ref = inputProps.ref, htmlInputProps = tslib_1.__rest(inputProps, ["ref"]);
-            var input = (React.createElement(core_1.InputGroup, tslib_1.__assign({ autoFocus: true, leftIconName: "search", placeholder: "Filter...", rightElement: _this.maybeRenderInputClearButton(), value: listProps.query }, htmlInputProps, { inputRef: _this.refHandlers.input, onChange: _this.handleQueryChange })));
+            var input = (React.createElement(core_1.InputGroup, tslib_1.__assign({ autoFocus: true, leftIcon: "search", placeholder: "Filter...", rightElement: _this.maybeRenderInputClearButton(), value: listProps.query }, inputProps, { inputRef: _this.refHandlers.input, onChange: _this.handleQueryChange })));
             var handleKeyDown = listProps.handleKeyDown, handleKeyUp = listProps.handleKeyUp;
@@ -119,3 +118,3 @@ return (React.createElement(core_1.Popover, tslib_1.__assign({ autoFocus: false, enforceFocus: false, isOpen: _this.state.isOpen, disabled: disabled, position: core_1.Position.BOTTOM_LEFT }, popoverProps, { className: classNames(listProps.className, popoverProps.className), onInteraction: _this.handlePopoverInteraction, popoverClassName: classNames(Classes.SELECT_POPOVER, popoverProps.popoverClassName), popoverWillOpen: _this.handlePopoverWillOpen, popoverDidOpen: _this.handlePopoverDidOpen, popoverWillClose: _this.handlePopoverWillClose }),
         // omit props specific to this component, spread the rest.
-        var _a = this.props, filterable = _a.filterable, initialContent = _a.initialContent, itemRenderer = _a.itemRenderer, inputProps = _a.inputProps, noResults = _a.noResults, popoverProps = _a.popoverProps, restProps = tslib_1.__rest(_a, ["filterable", "initialContent", "itemRenderer", "inputProps", "noResults", "popoverProps"]);
+        var _a = this.props, filterable = _a.filterable, initialContent = _a.initialContent, inputProps = _a.inputProps, noResults = _a.noResults, popoverProps = _a.popoverProps, restProps = tslib_1.__rest(_a, ["filterable", "initialContent", "inputProps", "noResults", "popoverProps"]);
         return (React.createElement(this.TypedQueryList, tslib_1.__assign({}, restProps, { activeItem: this.state.activeItem, onActiveItemChange: this.handleActiveItemChange, onItemSelect: this.handleItemSelect, query: this.state.query, ref: this.refHandlers.queryList, renderer: this.renderQueryList })));
@@ -135,25 +134,16 @@ };
     Select.prototype.renderItems = function (_a) {
-        var activeItem = _a.activeItem, filteredItems = _a.filteredItems, handleItemSelect = _a.handleItemSelect;
-        var _b = this.props, initialContent = _b.initialContent, itemRenderer = _b.itemRenderer, noResults = _b.noResults;
+        var items = _a.items, renderItem = _a.renderItem;
+        var _b = this.props, initialContent = _b.initialContent, noResults = _b.noResults;
         if (initialContent != null && this.isQueryEmpty()) {
             return initialContent;
         }
-        if (filteredItems.length === 0) {
-            return noResults;
-        }
-        return filteredItems.map(function (item, index) {
-            return itemRenderer({
-                handleClick: function (e) { return handleItemSelect(item, e); },
-                index: index,
-                isActive: item === activeItem,
-                item: item,
-            });
-        });
+        var renderedItems = items.map(renderItem).filter(function (item) { return item != null; });
+        return renderedItems.length > 0 ? renderedItems : noResults;
     };
     Select.prototype.maybeRenderInputClearButton = function () {
-        return !this.isQueryEmpty() ? (React.createElement(core_1.Button, { className: core_1.Classes.MINIMAL, iconName: "cross", onClick: this.resetQuery })) : (undefined);
+        return !this.isQueryEmpty() ? (React.createElement(core_1.Button, { className: core_1.Classes.MINIMAL, icon: "cross", onClick: this.resetQuery })) : (undefined);
     };
-    Select.displayName = "Blueprint.Select";
+    Select.displayName = "Blueprint2.Select";
     return Select;
 }(React.PureComponent));
 exports.Select = Select;

lib/cjs/components/select/suggest.d.ts

@@ -5,3 +5,2 @@ /// <reference types="react" />
 import { IListItemsProps } from "../query-list/queryList";
-import { ISelectItemRendererProps } from "../select/select";
 export interface ISuggestProps<T> extends IListItemsProps<T> {
@@ -14,8 +13,2 @@ /**
     /**
-     * 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: (itemProps: ISelectItemRendererProps<T>) => JSX.Element;
-    /**
      * Props to spread to `InputGroup`. All props are supported except `ref` (use `inputRef` instead).
@@ -57,3 +50,3 @@ * If you want to control the filter input, you can pass `value` and `onChange` here
     private renderQueryList;
-    private renderItems({activeItem, filteredItems, handleItemSelect});
+    private renderItems({items, renderItem});
     private selectText;
@@ -60,0 +53,0 @@ private handleInputFocus;

lib/cjs/components/select/suggest.js

@@ -42,7 +42,6 @@ "use strict";
             var _d = _this.state, isTyping = _d.isTyping, selectedItem = _d.selectedItem, query = _d.query;
-            var ref = inputProps.ref, htmlInputProps = tslib_1.__rest(inputProps, ["ref"]);
             var handleKeyDown = listProps.handleKeyDown, handleKeyUp = listProps.handleKeyUp;
             var inputValue = isTyping ? query : selectedItem ? inputValueRenderer(selectedItem) : "";
             return (React.createElement(core_1.Popover, tslib_1.__assign({ autoFocus: false, enforceFocus: false, isOpen: _this.state.isOpen, position: core_1.Position.BOTTOM_LEFT }, popoverProps, { className: classNames(listProps.className, popoverProps.className), onInteraction: _this.handlePopoverInteraction, popoverClassName: classNames(Classes.SELECT_POPOVER, popoverProps.popoverClassName), popoverDidOpen: _this.handlePopoverDidOpen, popoverWillClose: _this.handlePopoverWillClose }),
-                React.createElement(core_1.InputGroup, tslib_1.__assign({ placeholder: "Search...", value: inputValue }, htmlInputProps, { inputRef: _this.refHandlers.input, onChange: _this.handleQueryChange, onFocus: _this.handleInputFocus, onKeyDown: _this.getTargetKeyDownHandler(handleKeyDown), onKeyUp: _this.getTargetKeyUpHandler(handleKeyUp) })),
+                React.createElement(core_1.InputGroup, tslib_1.__assign({ placeholder: "Search...", value: inputValue }, inputProps, { inputRef: _this.refHandlers.input, onChange: _this.handleQueryChange, onFocus: _this.handleInputFocus, onKeyDown: _this.getTargetKeyDownHandler(handleKeyDown), onKeyUp: _this.getTargetKeyUpHandler(handleKeyUp) })),
                 React.createElement("div", { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp },
@@ -163,3 +162,3 @@ React.createElement(core_1.Menu, { ulRef: listProps.itemsParentRef }, _this.renderItems(listProps)))));
         // omit props specific to this component, spread the rest.
-        var _a = this.props, itemRenderer = _a.itemRenderer, inputProps = _a.inputProps, noResults = _a.noResults, popoverProps = _a.popoverProps, restProps = tslib_1.__rest(_a, ["itemRenderer", "inputProps", "noResults", "popoverProps"]);
+        var _a = this.props, inputProps = _a.inputProps, noResults = _a.noResults, popoverProps = _a.popoverProps, restProps = tslib_1.__rest(_a, ["inputProps", "noResults", "popoverProps"]);
         return (React.createElement(this.TypedQueryList, tslib_1.__assign({}, restProps, { activeItem: this.state.activeItem, onActiveItemChange: this.handleActiveItemChange, onItemSelect: this.handleItemSelect, query: this.state.query, ref: this.refHandlers.queryList, renderer: this.renderQueryList })));
@@ -173,19 +172,9 @@ };
     Suggest.prototype.renderItems = function (_a) {
-        var activeItem = _a.activeItem, filteredItems = _a.filteredItems, handleItemSelect = _a.handleItemSelect;
-        var _b = this.props, itemRenderer = _b.itemRenderer, noResults = _b.noResults;
-        if (filteredItems.length === 0) {
-            return noResults;
-        }
-        return filteredItems.map(function (item, index) {
-            return itemRenderer({
-                handleClick: function (e) { return handleItemSelect(item, e); },
-                index: index,
-                isActive: item === activeItem,
-                item: item,
-            });
-        });
+        var items = _a.items, renderItem = _a.renderItem;
+        var renderedItems = items.map(renderItem).filter(function (item) { return item != null; });
+        return renderedItems.length > 0 ? renderedItems : this.props.noResults;
     };
-    Suggest.displayName = "Blueprint.Suggest";
+    Suggest.displayName = "Blueprint2.Suggest";
     return Suggest;
 }(React.PureComponent));
 exports.Suggest = Suggest;

lib/cjs/index.d.ts

 export * from "./common/classes";
+export * from "./common/itemRenderer";
+export * from "./common/predicate";
 export * from "./components";

lib/esm/components/omnibar/omnibar.d.ts

@@ -5,3 +5,2 @@ /// <reference types="react" />
 import { IListItemsProps } from "../query-list/queryList";
-import { ISelectItemRendererProps } from "../select/select";
 export interface IOmnibarProps<T> extends IListItemsProps<T> {
@@ -12,8 +11,2 @@ /**
     initialContent?: React.ReactChild;
-    /**
-     * 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: (itemProps: ISelectItemRendererProps<T>) => JSX.Element;
     /** React child to render when filtering items returns zero results. */
@@ -64,3 +57,3 @@ noResults?: React.ReactChild;
     private renderQueryList;
-    private renderItems({activeItem, filteredItems, handleItemSelect});
+    private renderItems({items, renderItem});
     private maybeRenderMenu(listProps);
@@ -67,0 +60,0 @@ private isQueryEmpty;

lib/esm/components/omnibar/omnibar.js

@@ -25,3 +25,2 @@ /*
             var _a = _this.props, _b = _a.inputProps, inputProps = _b === void 0 ? {} : _b, isOpen = _a.isOpen, _c = _a.overlayProps, overlayProps = _c === void 0 ? {} : _c;
-            var ref = inputProps.ref, htmlInputProps = tslib_1.__rest(inputProps, ["ref"]);
             var handleKeyDown = listProps.handleKeyDown, handleKeyUp = listProps.handleKeyUp;
@@ -31,3 +30,3 @@ var handlers = isOpen && !_this.isQueryEmpty() ? { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp } : {};
                 React.createElement("div", tslib_1.__assign({ className: classNames(listProps.className, Classes.OMNIBAR) }, handlers),
-                    React.createElement(InputGroup, tslib_1.__assign({ autoFocus: true, className: CoreClasses.LARGE, leftIconName: "search", placeholder: "Search...", value: listProps.query }, htmlInputProps, { onChange: _this.handleQueryChange })),
+                    React.createElement(InputGroup, tslib_1.__assign({ autoFocus: true, className: CoreClasses.LARGE, leftIcon: "search", placeholder: "Search...", value: listProps.query }, inputProps, { onChange: _this.handleQueryChange })),
                     _this.maybeRenderMenu(listProps))));
@@ -57,3 +56,3 @@ };
         // omit props specific to this component, spread the rest.
-        var _a = this.props, initialContent = _a.initialContent, isOpen = _a.isOpen, itemRenderer = _a.itemRenderer, inputProps = _a.inputProps, noResults = _a.noResults, overlayProps = _a.overlayProps, restProps = tslib_1.__rest(_a, ["initialContent", "isOpen", "itemRenderer", "inputProps", "noResults", "overlayProps"]);
+        var _a = this.props, initialContent = _a.initialContent, isOpen = _a.isOpen, inputProps = _a.inputProps, noResults = _a.noResults, overlayProps = _a.overlayProps, restProps = tslib_1.__rest(_a, ["initialContent", "isOpen", "inputProps", "noResults", "overlayProps"]);
         return (React.createElement(this.TypedQueryList, tslib_1.__assign({}, restProps, { activeItem: this.state.activeItem, onActiveItemChange: this.handleActiveItemChange, onItemSelect: this.handleItemSelect, query: this.state.query, ref: this.refHandlers.queryList, renderer: this.renderQueryList })));
@@ -70,15 +69,5 @@ };
     Omnibar.prototype.renderItems = function (_a) {
-        var activeItem = _a.activeItem, filteredItems = _a.filteredItems, handleItemSelect = _a.handleItemSelect;
-        var _b = this.props, itemRenderer = _b.itemRenderer, noResults = _b.noResults;
-        if (filteredItems.length === 0) {
-            return noResults;
-        }
-        return filteredItems.map(function (item, index) {
-            return itemRenderer({
-                handleClick: function (e) { return handleItemSelect(item, e); },
-                index: index,
-                isActive: item === activeItem,
-                item: item,
-            });
-        });
+        var items = _a.items, renderItem = _a.renderItem;
+        var renderedItems = items.map(renderItem).filter(function (item) { return item != null; });
+        return renderedItems.length > 0 ? renderedItems : this.props.noResults;
     };
@@ -99,5 +88,5 @@ Omnibar.prototype.maybeRenderMenu = function (listProps) {
     };
-    Omnibar.displayName = "Blueprint.Omnibar";
+    Omnibar.displayName = "Blueprint2.Omnibar";
     return Omnibar;
 }(React.PureComponent));
 export { Omnibar };

lib/esm/components/query-list/queryList.d.ts

 /// <reference types="react" />
 import * as React from "react";
 import { IProps } from "@blueprintjs/core";
+import { 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 {
@@ -14,3 +17,3 @@ /** Array of items in the list. */
      */
-    itemListPredicate?: (query: string, items: T[]) => T[];
+    itemListPredicate?: ItemListPredicate<T>;
     /**
@@ -23,4 +26,10 @@ * Customize querying of individual items. Return `true` to keep the item, `false` to hide.
      */
-    itemPredicate?: (query: string, item: T, index: number) => boolean;
+    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>;
+    /**
      * Callback invoked when an item from the list is selected,
@@ -67,11 +76,5 @@ * typically by clicking or pressing `enter` key.
 }
+/** Interface for object passed to `QueryList` `renderer` function. */
 export interface IQueryListRendererProps<T> extends IProps {
-    /** The item focused by the keyboard (arrow keys). This item should stand out visually from the rest. */
-    activeItem: T | undefined;
     /**
-     * Array of filtered items from the list (those that matched the predicate with the current `query`).
-     * See `items` for the full unfiltered list.
-     */
-    filteredItems: T[];
-    /**
      * Selection handler that should be invoked when a new item has been chosen,
@@ -92,2 +95,8 @@ * perhaps because the user clicked it.
     /**
+     * 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;
+    /**
      * Array of all (unfiltered) items in the list.
@@ -133,2 +142,3 @@ * See `filteredItems` for a filtered array based on `query`.
     private moveActiveIndex(direction);
+    private renderItem;
 }

lib/esm/components/query-list/queryList.js

@@ -46,2 +46,18 @@ /*
         };
+        _this.renderItem = function (item, index) {
+            var _a = _this.props, activeItem = _a.activeItem, itemListPredicate = _a.itemListPredicate, _b = _a.itemPredicate, itemPredicate = _b === void 0 ? function () { return true; } : _b, query = _a.query;
+            var matchesPredicate = Utils.isFunction(itemListPredicate)
+                ? _this.state.filteredItems.indexOf(item) >= 0
+                : itemPredicate(query, item, index);
+            var modifiers = {
+                active: activeItem === item,
+                disabled: false,
+                matchesPredicate: matchesPredicate,
+            };
+            return _this.props.itemRenderer(item, {
+                handleClick: function (e) { return _this.handleItemSelect(item, e); },
+                index: index,
+                modifiers: modifiers,
+            });
+        };
         return _this;
@@ -53,8 +69,4 @@ }
     QueryList.prototype.render = function () {
-        var _a = this.props, activeItem = _a.activeItem, className = _a.className, items = _a.items, renderer = _a.renderer, query = _a.query;
-        var filteredItems = this.state.filteredItems;
+        var _a = this.props, items = _a.items, renderer = _a.renderer, query = _a.query;
         return renderer({
-            activeItem: activeItem,
-            className: className,
-            filteredItems: filteredItems,
             handleItemSelect: this.handleItemSelect,
@@ -66,2 +78,3 @@ handleKeyDown: this.handleKeyDown,
             query: query,
+            renderItem: this.renderItem,
         });
@@ -143,3 +156,3 @@ };
     };
-    QueryList.displayName = "Blueprint.QueryList";
+    QueryList.displayName = "Blueprint2.QueryList";
     return QueryList;
@@ -146,0 +159,0 @@ }(React.Component));

lib/esm/components/select/multiSelect.d.ts

@@ -5,3 +5,2 @@ /// <reference types="react" />
 import { IListItemsProps } from "../query-list/queryList";
-import { ISelectItemRendererProps } from "../select/select";
 export interface IMultiSelectProps<T> extends IListItemsProps<T> {
@@ -14,8 +13,2 @@ /** Controlled selected values. */
     initialContent?: React.ReactChild;
-    /**
-     * 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: (itemProps: ISelectItemRendererProps<T>) => JSX.Element;
     /** React child to render when filtering items returns zero results. */
@@ -57,3 +50,3 @@ noResults?: React.ReactChild;
     private renderQueryList;
-    private renderItems({activeItem, filteredItems, handleItemSelect});
+    private renderItems({items, renderItem});
     private isQueryEmpty;
@@ -60,0 +53,0 @@ private handleQueryChange;

lib/esm/components/select/multiSelect.js

@@ -29,6 +29,6 @@ /**
                 // tslint:disable-next-line:object-literal-sort-keys
-                onChange: _this.handleQueryChange, ref: _this.refHandlers.input, value: query });
+                onChange: _this.handleQueryChange, value: query });
             return (React.createElement(Popover, tslib_1.__assign({ autoFocus: false, canEscapeKeyClose: true, enforceFocus: false, isOpen: _this.state.isOpen, position: Position.BOTTOM_LEFT }, popoverProps, { className: classNames(listProps.className, popoverProps.className), onInteraction: _this.handlePopoverInteraction, popoverClassName: classNames(Classes.MULTISELECT_POPOVER, popoverProps.popoverClassName), popoverDidOpen: _this.handlePopoverDidOpen, popoverWillOpen: _this.handlePopoverWillOpen }),
                 React.createElement("div", { onKeyDown: _this.getTargetKeyDownHandler(handleKeyDown), onKeyUp: _this.state.isOpen ? handleKeyUp : undefined },
-                    React.createElement(TagInput, tslib_1.__assign({}, tagInputProps, { inputProps: defaultInputProps, className: classNames(Classes.MULTISELECT, tagInputProps.className), values: selectedItems.map(_this.props.tagRenderer) }))),
+                    React.createElement(TagInput, tslib_1.__assign({}, tagInputProps, { inputProps: defaultInputProps, inputRef: _this.refHandlers.input, className: classNames(Classes.MULTISELECT, tagInputProps.className), values: selectedItems.map(_this.props.tagRenderer) }))),
                 React.createElement("div", { onKeyDown: _this.getTargetKeyDownHandler(handleKeyDown), onKeyUp: handleKeyUp },
@@ -122,26 +122,17 @@ React.createElement(Menu, { ulRef: listProps.itemsParentRef }, _this.renderItems(listProps)))));
         // omit props specific to this component, spread the rest.
-        var _a = this.props, initialContent = _a.initialContent, itemRenderer = _a.itemRenderer, noResults = _a.noResults, openOnKeyDown = _a.openOnKeyDown, popoverProps = _a.popoverProps, resetOnSelect = _a.resetOnSelect, tagInputProps = _a.tagInputProps, restProps = tslib_1.__rest(_a, ["initialContent", "itemRenderer", "noResults", "openOnKeyDown", "popoverProps", "resetOnSelect", "tagInputProps"]);
+        var _a = this.props, initialContent = _a.initialContent, noResults = _a.noResults, openOnKeyDown = _a.openOnKeyDown, popoverProps = _a.popoverProps, resetOnSelect = _a.resetOnSelect, tagInputProps = _a.tagInputProps, restProps = tslib_1.__rest(_a, ["initialContent", "noResults", "openOnKeyDown", "popoverProps", "resetOnSelect", "tagInputProps"]);
         return (React.createElement(this.TypedQueryList, tslib_1.__assign({}, restProps, { activeItem: this.state.activeItem, onActiveItemChange: this.handleActiveItemChange, onItemSelect: this.handleItemSelect, query: this.state.query, ref: this.refHandlers.queryList, renderer: this.renderQueryList })));
     };
     MultiSelect.prototype.renderItems = function (_a) {
-        var activeItem = _a.activeItem, filteredItems = _a.filteredItems, handleItemSelect = _a.handleItemSelect;
-        var _b = this.props, initialContent = _b.initialContent, itemRenderer = _b.itemRenderer, noResults = _b.noResults;
+        var items = _a.items, renderItem = _a.renderItem;
+        var _b = this.props, initialContent = _b.initialContent, noResults = _b.noResults;
         if (initialContent != null && this.isQueryEmpty()) {
             return initialContent;
         }
-        if (filteredItems.length === 0) {
-            return noResults;
-        }
-        return filteredItems.map(function (item, index) {
-            return itemRenderer({
-                handleClick: function (e) { return handleItemSelect(item, e); },
-                index: index,
-                isActive: item === activeItem,
-                item: item,
-            });
-        });
+        var renderedItems = items.map(renderItem).filter(function (item) { return item != null; });
+        return renderedItems.length > 0 ? renderedItems : noResults;
     };
-    MultiSelect.displayName = "Blueprint.MultiSelect";
+    MultiSelect.displayName = "Blueprint2.MultiSelect";
     return MultiSelect;
 }(React.PureComponent));
 export { MultiSelect };

lib/esm/components/select/select.d.ts

@@ -17,8 +17,2 @@ /// <reference types="react" />
     /**
-     * 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: (itemProps: ISelectItemRendererProps<T>) => JSX.Element;
-    /**
      * Whether the component is non-interactive.
@@ -58,18 +52,2 @@ * Note that you'll also need to disable the component's children, if appropriate.
 }
-export interface ISelectItemRendererProps<T> {
-    /**
-     * Click handler that should be attached to item's `onClick` event.
-     * Will invoke `Select` `onItemSelect` prop with this `item`.
-     */
-    handleClick: React.MouseEventHandler<HTMLElement>;
-    /** Index of item in array of filtered items (_not_ the absolute position of item in full array). */
-    index: number;
-    /** The item being rendered */
-    item: T;
-    /**
-     * Whether the item is active according to keyboard navigation.
-     * An active item should have a distinct visual appearance.
-     */
-    isActive: boolean;
-}
 export interface ISelectState<T> {
@@ -94,3 +72,3 @@ activeItem?: T;
     private renderQueryList;
-    private renderItems({activeItem, filteredItems, handleItemSelect});
+    private renderItems({items, renderItem});
     private maybeRenderInputClearButton();
@@ -97,0 +75,0 @@ private isQueryEmpty;

lib/esm/components/select/select.js

@@ -29,4 +29,3 @@ /*
             var _a = _this.props, _b = _a.filterable, filterable = _b === void 0 ? true : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.inputProps, inputProps = _d === void 0 ? {} : _d, _e = _a.popoverProps, popoverProps = _e === void 0 ? {} : _e;
-            var ref = inputProps.ref, htmlInputProps = tslib_1.__rest(inputProps, ["ref"]);
-            var input = (React.createElement(InputGroup, tslib_1.__assign({ autoFocus: true, leftIconName: "search", placeholder: "Filter...", rightElement: _this.maybeRenderInputClearButton(), value: listProps.query }, htmlInputProps, { inputRef: _this.refHandlers.input, onChange: _this.handleQueryChange })));
+            var input = (React.createElement(InputGroup, tslib_1.__assign({ autoFocus: true, leftIcon: "search", placeholder: "Filter...", rightElement: _this.maybeRenderInputClearButton(), value: listProps.query }, inputProps, { inputRef: _this.refHandlers.input, onChange: _this.handleQueryChange })));
             var handleKeyDown = listProps.handleKeyDown, handleKeyUp = listProps.handleKeyUp;
@@ -117,3 +116,3 @@ return (React.createElement(Popover, tslib_1.__assign({ autoFocus: false, enforceFocus: false, isOpen: _this.state.isOpen, disabled: disabled, position: Position.BOTTOM_LEFT }, popoverProps, { className: classNames(listProps.className, popoverProps.className), onInteraction: _this.handlePopoverInteraction, popoverClassName: classNames(Classes.SELECT_POPOVER, popoverProps.popoverClassName), popoverWillOpen: _this.handlePopoverWillOpen, popoverDidOpen: _this.handlePopoverDidOpen, popoverWillClose: _this.handlePopoverWillClose }),
         // omit props specific to this component, spread the rest.
-        var _a = this.props, filterable = _a.filterable, initialContent = _a.initialContent, itemRenderer = _a.itemRenderer, inputProps = _a.inputProps, noResults = _a.noResults, popoverProps = _a.popoverProps, restProps = tslib_1.__rest(_a, ["filterable", "initialContent", "itemRenderer", "inputProps", "noResults", "popoverProps"]);
+        var _a = this.props, filterable = _a.filterable, initialContent = _a.initialContent, inputProps = _a.inputProps, noResults = _a.noResults, popoverProps = _a.popoverProps, restProps = tslib_1.__rest(_a, ["filterable", "initialContent", "inputProps", "noResults", "popoverProps"]);
         return (React.createElement(this.TypedQueryList, tslib_1.__assign({}, restProps, { activeItem: this.state.activeItem, onActiveItemChange: this.handleActiveItemChange, onItemSelect: this.handleItemSelect, query: this.state.query, ref: this.refHandlers.queryList, renderer: this.renderQueryList })));
@@ -133,25 +132,16 @@ };
     Select.prototype.renderItems = function (_a) {
-        var activeItem = _a.activeItem, filteredItems = _a.filteredItems, handleItemSelect = _a.handleItemSelect;
-        var _b = this.props, initialContent = _b.initialContent, itemRenderer = _b.itemRenderer, noResults = _b.noResults;
+        var items = _a.items, renderItem = _a.renderItem;
+        var _b = this.props, initialContent = _b.initialContent, noResults = _b.noResults;
         if (initialContent != null && this.isQueryEmpty()) {
             return initialContent;
         }
-        if (filteredItems.length === 0) {
-            return noResults;
-        }
-        return filteredItems.map(function (item, index) {
-            return itemRenderer({
-                handleClick: function (e) { return handleItemSelect(item, e); },
-                index: index,
-                isActive: item === activeItem,
-                item: item,
-            });
-        });
+        var renderedItems = items.map(renderItem).filter(function (item) { return item != null; });
+        return renderedItems.length > 0 ? renderedItems : noResults;
     };
     Select.prototype.maybeRenderInputClearButton = function () {
-        return !this.isQueryEmpty() ? (React.createElement(Button, { className: CoreClasses.MINIMAL, iconName: "cross", onClick: this.resetQuery })) : (undefined);
+        return !this.isQueryEmpty() ? (React.createElement(Button, { className: CoreClasses.MINIMAL, icon: "cross", onClick: this.resetQuery })) : (undefined);
     };
-    Select.displayName = "Blueprint.Select";
+    Select.displayName = "Blueprint2.Select";
     return Select;
 }(React.PureComponent));
 export { Select };

lib/esm/components/select/suggest.d.ts

@@ -5,3 +5,2 @@ /// <reference types="react" />
 import { IListItemsProps } from "../query-list/queryList";
-import { ISelectItemRendererProps } from "../select/select";
 export interface ISuggestProps<T> extends IListItemsProps<T> {
@@ -14,8 +13,2 @@ /**
     /**
-     * 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: (itemProps: ISelectItemRendererProps<T>) => JSX.Element;
-    /**
      * Props to spread to `InputGroup`. All props are supported except `ref` (use `inputRef` instead).
@@ -57,3 +50,3 @@ * If you want to control the filter input, you can pass `value` and `onChange` here
     private renderQueryList;
-    private renderItems({activeItem, filteredItems, handleItemSelect});
+    private renderItems({items, renderItem});
     private selectText;
@@ -60,0 +53,0 @@ private handleInputFocus;

lib/esm/components/select/suggest.js

@@ -40,7 +40,6 @@ /*
             var _d = _this.state, isTyping = _d.isTyping, selectedItem = _d.selectedItem, query = _d.query;
-            var ref = inputProps.ref, htmlInputProps = tslib_1.__rest(inputProps, ["ref"]);
             var handleKeyDown = listProps.handleKeyDown, handleKeyUp = listProps.handleKeyUp;
             var inputValue = isTyping ? query : selectedItem ? inputValueRenderer(selectedItem) : "";
             return (React.createElement(Popover, tslib_1.__assign({ autoFocus: false, enforceFocus: false, isOpen: _this.state.isOpen, position: Position.BOTTOM_LEFT }, popoverProps, { className: classNames(listProps.className, popoverProps.className), onInteraction: _this.handlePopoverInteraction, popoverClassName: classNames(Classes.SELECT_POPOVER, popoverProps.popoverClassName), popoverDidOpen: _this.handlePopoverDidOpen, popoverWillClose: _this.handlePopoverWillClose }),
-                React.createElement(InputGroup, tslib_1.__assign({ placeholder: "Search...", value: inputValue }, htmlInputProps, { inputRef: _this.refHandlers.input, onChange: _this.handleQueryChange, onFocus: _this.handleInputFocus, onKeyDown: _this.getTargetKeyDownHandler(handleKeyDown), onKeyUp: _this.getTargetKeyUpHandler(handleKeyUp) })),
+                React.createElement(InputGroup, tslib_1.__assign({ placeholder: "Search...", value: inputValue }, inputProps, { inputRef: _this.refHandlers.input, onChange: _this.handleQueryChange, onFocus: _this.handleInputFocus, onKeyDown: _this.getTargetKeyDownHandler(handleKeyDown), onKeyUp: _this.getTargetKeyUpHandler(handleKeyUp) })),
                 React.createElement("div", { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp },
@@ -161,3 +160,3 @@ React.createElement(Menu, { ulRef: listProps.itemsParentRef }, _this.renderItems(listProps)))));
         // omit props specific to this component, spread the rest.
-        var _a = this.props, itemRenderer = _a.itemRenderer, inputProps = _a.inputProps, noResults = _a.noResults, popoverProps = _a.popoverProps, restProps = tslib_1.__rest(_a, ["itemRenderer", "inputProps", "noResults", "popoverProps"]);
+        var _a = this.props, inputProps = _a.inputProps, noResults = _a.noResults, popoverProps = _a.popoverProps, restProps = tslib_1.__rest(_a, ["inputProps", "noResults", "popoverProps"]);
         return (React.createElement(this.TypedQueryList, tslib_1.__assign({}, restProps, { activeItem: this.state.activeItem, onActiveItemChange: this.handleActiveItemChange, onItemSelect: this.handleItemSelect, query: this.state.query, ref: this.refHandlers.queryList, renderer: this.renderQueryList })));
@@ -171,19 +170,9 @@ };
     Suggest.prototype.renderItems = function (_a) {
-        var activeItem = _a.activeItem, filteredItems = _a.filteredItems, handleItemSelect = _a.handleItemSelect;
-        var _b = this.props, itemRenderer = _b.itemRenderer, noResults = _b.noResults;
-        if (filteredItems.length === 0) {
-            return noResults;
-        }
-        return filteredItems.map(function (item, index) {
-            return itemRenderer({
-                handleClick: function (e) { return handleItemSelect(item, e); },
-                index: index,
-                isActive: item === activeItem,
-                item: item,
-            });
-        });
+        var items = _a.items, renderItem = _a.renderItem;
+        var renderedItems = items.map(renderItem).filter(function (item) { return item != null; });
+        return renderedItems.length > 0 ? renderedItems : this.props.noResults;
     };
-    Suggest.displayName = "Blueprint.Suggest";
+    Suggest.displayName = "Blueprint2.Suggest";
     return Suggest;
 }(React.PureComponent));
 export { Suggest };

lib/esm/index.d.ts

 export * from "./common/classes";
+export * from "./common/itemRenderer";
+export * from "./common/predicate";
 export * from "./components";

package.json

 {
   "name": "@blueprintjs/select",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-rc.1",
   "description": "Components related to selecting items from a list",
@@ -10,2 +10,3 @@ "main": "lib/cjs/index.js",
   "unpkg": "dist/select.bundle.js",
+  "sideEffects": false,
   "scripts": {
@@ -33,3 +34,3 @@ "compile": "npm-run-all -p 'compile:*'",
   "dependencies": {
-    "@blueprintjs/core": "^2.0.0-beta.3",
+    "@blueprintjs/core": "^2.0.0-rc.1",
     "classnames": "^2.2",
@@ -39,7 +40,5 @@ "tslib": "^1.5.0"
   "devDependencies": {
-    "@blueprintjs/karma-build-scripts": "^0.4.0",
-    "@blueprintjs/node-build-scripts": "^0.4.0",
+    "@blueprintjs/karma-build-scripts": "^0.5.0",
+    "@blueprintjs/node-build-scripts": "^0.5.0",
     "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "es6-shim": "^0.35.3",
     "karma": "^1.7.1",
@@ -46,0 +45,0 @@ "mocha": "^4.1.0",

src/components/select/select-component.md

@@ -17,18 +17,18 @@ @# Select
 import { Select } from "@blueprintjs/select";
-import { Film, TOP_100_FILMS, filterFilm, renderFilm } from "./demoData";
+import * as Films from "./films";
 
 // Select<T> is a generic component to work with your data types.
 // In TypeScript, you must first obtain a non-generic reference:
-const FilmSelect = Select.ofType<Film>();
+const FilmSelect = Select.ofType<Films.Film>();
 
 ReactDOM.render(
     <FilmSelect
-        items={TOP_100_FILMS}
-        itemPredicate={filterFilm}
-        itemRenderer={renderFilm}
-        noResults={<MenuItem disabled text="No results." />}
+        items={Films.items}
+        itemPredicate={Films.itemPredicate}
+        itemRenderer={Films.itemRenderer}
+        noResults={<MenuItem disabled={true} text="No results." />}
         onItemSelect={...}
     >
         {/* children become the popover target; render value here */}
-        <Button text={TOP_100_FILMS[0].title} rightIconName="double-caret-vertical" />
+        <Button text={Films.items[0].title} rightIconName="double-caret-vertical" />
     </FilmSelect>,
@@ -47,2 +47,5 @@ document.querySelector("#root")
 
+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.
+
 @### Non-ideal states
@@ -74,24 +77,35 @@
 
-An object with the following properties will be passed to a `Select` `itemRenderer`, for each item being rendered. Only items which pass the predicate will be rendered. Don't forget to define a `key` for each item, or face React's console wrath!
+`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
+`modifiers.filtered` to hide items that don't match the predicate. Also, don't forget to define a `key` for each item,
+or face React's console wrath!
 
-This interface is generic, accepting a type parameter `<T>` for an item in the list.
-
 ```tsx
 import { Classes, MenuItem } from "@blueprintjs/core";
-import { Select, ISelectItemRendererProps } from "@blueprintjs/select";
+import { ItemRenderer, ItemPredicate, Select } from "@blueprintjs/select";
+
 const FilmSelect = Select.ofType<Film>();
 
-const renderMenuItem = ({ handleClick, item: film, isActive }: ISelectItemRendererProps<Film>) => (
-    <MenuItem
-        className={isActive ? Classes.ACTIVE : ""}
-        key={film.title}
-        label={film.year}
-        onClick={handleClick}
-        text={film.title}
-    />
-);
+const filterFilm: ItemPredicate<IFilm> = (query, film) => {
+    return film.title.toLowerCase().indexOf(query.toLowerCase()) >= 0;
+};
 
-<FilmSelect itemRenderer={renderMenuItem} items={...} onItemSelect={...} />
+const renderFilm: ItemRenderer<Film> = (item, { handleClick, modifiers }) => {
+    if (!modifiers.filtered) {
+        return null;
+    }
+    return (
+        <MenuItem
+            className={modifiers.active ? Classes.ACTIVE : ""}
+            key={film.title}
+            label={film.year}
+            onClick={handleClick}
+            text={film.title}
+        />
+    );
+};
+
+<FilmSelect itemPredicate={filterFilm} itemRenderer={renderFilm} items={...} onItemSelect={...} />
 ```
 
-@interface ISelectItemRendererProps
+@interface IItemRendererProps

src/index.ts

@@ -8,2 +8,4 @@ /*
 export * from "./common/classes";
+export * from "./common/itemRenderer";
+export * from "./common/predicate";
 export * from "./components";

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

13

decreased by-13.33%

Number of package files

69

increased by16.95%

Worsened metrics

Total package byte prevSize

286366

decreased by-0.05%

Lines of code

5232

decreased by-0.78%

Dependency changes

• Updated@blueprintjs/core@^2.0.0-rc.1