From 27fb2c95a3e3c77fd078fd82ad7208dc90d6147c Mon Sep 17 00:00:00 2001
From: Andrew Durber <aidurber@gmail.com>
Date: Sun, 9 Dec 2018 19:47:07 +0000
Subject: [PATCH] feat(Filter): Add filterPlaceholder prop

Override the default filter placeholder

re #86
---
 README.md           |  1 +
 dist/index.js       |  2 +-
 docs/README.md      |  1 +
 index.d.ts          |  9 +++++++++
 src/Filter.js       |  7 +++++--
 src/Picky.js        |  7 +++++--
 tests/Picky.test.js | 22 ++++++++++++++++++++++
 7 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 916a64d..11d03d3 100644
--- a/README.md
+++ b/README.md
@@ -157,6 +157,7 @@ Picky.propTypes = {
 - `renderSelectAll` - Used for rendering a custom select all
 - `defaultFocusFilter` - If set to true, will focus the filter by default when opened.
 - `renderList` - Render prop for whole list, you can use this to add virtualization/windowing if necessary
+- `filterPlaceholder` - Override the filter placeholder. Defaults to 'Filter...'
 
 ## Custom rendering
 
diff --git a/dist/index.js b/dist/index.js
index 7bab8bc..aae4dab 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -1 +1 @@
-"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=require("react"),React__default=_interopDefault(React);function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var l=t[r];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,l.key,l)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),e}function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _objectSpread(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},l=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(l=l.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),l.forEach(function(e){_defineProperty(t,e,r[e])})}return t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&_setPrototypeOf(e,t)}function _getPrototypeOf(e){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function _setPrototypeOf(e,t){return(_setPrototypeOf=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _possibleConstructorReturn(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?_assertThisInitialized(e):t}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_nonIterableSpread()}function _arrayWithoutHoles(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t<e.length;t++)r[t]=e[t];return r}}function _iterableToArray(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance")}require("prop-types");var debounce=function(r,l){var n=null;return function(){clearTimeout(n);var e=arguments,t=this;n=setTimeout(function(){r.apply(t,e)},l)}},includes=function(e,t){return-1<String(e).toLowerCase().indexOf(String(t).toLowerCase())},isDataObject=function(e,t,r){return"object"===_typeof(e)&&e.hasOwnProperty(t)&&e.hasOwnProperty(r)},generateGuid=function(){function e(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}return e()+e()+"-"+e()+"-"+e()+"-"+e()+"-"+e()+e()+e()},hasItem=function(e,t,r,l,n){if(!e||!t)return!1;if(Array.isArray(e)){if(isDataObject(t,r,l)){var i=e.findIndex(function(e){return e[r]===t[r]});return n?i:-1<i}var a=e.indexOf(t);return n?a:-1<a}return isDataObject(t,r,l)?e[r]===t[r]:e===t},hasItemIndex=function(e,t,r,l){return hasItem(e,t,r,l,!0)},keyExtractor=function(e,t,r){return isDataObject(e,t,r)?e[t]:e},sortCollection=function(e,r){return r?e.sort(function(e,t){return e[r]-t[r]}):e.sort(function(e,t){return e-t})};function arraysEqual(e,t){if(e.length!==t.length)return!1;for(var r=e.length;r;){if(e[r]!==t[r])return!1;r--}return!0}function split(e){var t=1,r="",l=e.split("%"),n=l.length;0<n&&(r+=l[0]);for(var i=1;i<n;i++){if("s"===l[i][0]||"d"===l[i][0]){var a=arguments[t++];r+="d"===l[i][0]?Math.floor(a):a}else l[i][0]?r+="%"+l[i][0]:r+="%"+l[++i][0];r+=l[i].substring(1)}return r}var regex=/%[sdj]/;function format(e){return regex.test(e)?split.apply(null,arguments):Array.from(arguments).join(" ")}var isEmptyValue=function(e){return null==e||Array.isArray(e)&&!e.length},Placeholder=function(e){var t=e.placeholder,r=e.value,l=e.numberDisplayed,n=e.multiple,i=e.valueKey,a=e.labelKey,o=e.manySelectedPlaceholder,s=e.allSelectedPlaceholder,c=e.allSelected,u="";if(isEmptyValue(r))u=t;else if(Array.isArray(r)&&n)r.length<=l?u=r.map(function(e){return isDataObject(e,i,a)?e[a]:e}).join(", "):o&&!c?u=includes(o,"%s")?format(o,r.length):o:c&&s&&(u=includes(s,"%s")?format(s,r.length):s);else{var p=Array.isArray(r)?r[0]:r;u=isDataObject(p,i,a)?p[a]:p}return React__default.createElement("span",{className:"picky__placeholder"},u)};Placeholder.defaultProps={placeholder:"None selected",allSelectedPlaceholder:"%s selected",manySelectedPlaceholder:"%s selected",allSelected:!1};var Filter=function(e){function t(){return _classCallCheck(this,t),_possibleConstructorReturn(this,_getPrototypeOf(t).apply(this,arguments))}return _inherits(t,React.PureComponent),_createClass(t,[{key:"render",value:function(){var t=this;return React__default.createElement("div",{className:"picky__filter"},React__default.createElement("input",{type:"text",ref:function(e){return t.filterInput=e},className:"picky__filter__input",placeholder:"Filter...",tabIndex:this.props.tabIndex,"aria-label":"filter options",onChange:function(e){return t.props.onFilterChange(e.target.value)}}))}}]),t}(),Option=function(e){var t=e.id,r=e.item,l=e.isSelected,n=e.labelKey,i=e.valueKey,a=e.selectValue,o=e.style,s=e.multiple,c=e.tabIndex,u=l?"option selected":"option",p=isDataObject(r,n,i)?r[n]:r,d=s?"checkbox":"radio";return React__default.createElement("div",{tabIndex:c,id:t,role:"option",style:o,"data-selected":l?"selected":"","aria-selected":l,className:u,onClick:function(){return a(r)},onKeyPress:function(e){e.preventDefault(),a(r)}},React__default.createElement("input",{type:d,readOnly:!0,tabIndex:-1,checked:l,"aria-label":p}),p)},Picky=function(e){function r(e){var t;return _classCallCheck(this,r),(t=_possibleConstructorReturn(this,_getPrototypeOf(r).call(this,e))).state={selectedValue:e.value||(e.multiple?[]:null),open:e.open,filtered:!1,filteredOptions:[],id:generateGuid(),allSelected:!1},t.toggleDropDown=t.toggleDropDown.bind(_assertThisInitialized(_assertThisInitialized(t))),t.toggleSelectAll=t.toggleSelectAll.bind(_assertThisInitialized(_assertThisInitialized(t))),t.onFilterChange=t.onFilterChange.bind(_assertThisInitialized(_assertThisInitialized(t))),t.selectValue=t.selectValue.bind(_assertThisInitialized(_assertThisInitialized(t))),t.allSelected=t.allSelected.bind(_assertThisInitialized(_assertThisInitialized(t))),t.handleOutsideClick=t.handleOutsideClick.bind(_assertThisInitialized(_assertThisInitialized(t))),t.isItemSelected=t.isItemSelected.bind(_assertThisInitialized(_assertThisInitialized(t))),t.focusFilterInput=t.focusFilterInput.bind(_assertThisInitialized(_assertThisInitialized(t))),t}return _inherits(r,React__default.PureComponent),_createClass(r,[{key:"UNSAFE_componentWillMount",value:function(){this.setState({allSelected:this.allSelected()})}},{key:"componentDidMount",value:function(){this.focusFilterInput(this.state.open)}},{key:"UNSAFE_componentWillReceiveProps",value:function(e){if(this.props.options!==e.options||this.props.value!==e.value){var t=Array.isArray(e.value)?arraysEqual(e.value,this.props.value):e.value===this.props.value;this.setState({allSelected:t?this.allSelected():this.allSelected(e.value)})}}},{key:"selectValue",value:function(e){var t=this,r=this.props.value;if(this.props.multiple&&Array.isArray(r)){var l=hasItemIndex(r,e,this.props.valueKey,this.props.labelKey),n=[];n=-1<l?_toConsumableArray(r.slice(0,l)).concat(_toConsumableArray(r.slice(l+1))):_toConsumableArray(this.props.value).concat([e]),this.setState({allSelected:this.allSelected(n)},function(){t.props.onChange(n)})}else this.props.onChange(e)}},{key:"allSelected",value:function(e){var t=e||this.props.value,r=this.props.options,l=isDataObject(r&&r[0],this.props.valueKey,this.props.labelKey),n=r.slice(0),i=Array.isArray(t)?t.slice(0):[];return arraysEqual(n,i=l?(n=sortCollection(n,this.props.valueKey),sortCollection(i,this.props.valueKey)):(n=sortCollection(n),sortCollection(i)))}},{key:"toggleSelectAll",value:function(){var t=this;this.setState(function(e){return _objectSpread({},e,{allSelected:!t.state.allSelected})},function(){t.state.allSelected?t.props.onChange(t.props.options):t.props.onChange([])})}},{key:"isItemSelected",value:function(e){return hasItem(this.props.value,e,this.props.valueKey,this.props.labelKey)}},{key:"renderPlainList",value:function(e){var n=this,t=this.props,i=t.labelKey,a=t.valueKey,o=t.multiple,s=t.render,c=t.tabIndex,r=t.renderList;return r?r({items:e,selected:this.props.value,multiple:o,tabIndex:c,getIsSelected:this.isItemSelected,selectValue:this.selectValue}):e.map(function(e,t){var r=keyExtractor(e,a,i),l=n.isItemSelected(e);return"function"==typeof s?s({index:t,item:e,isSelected:l,selectValue:n.selectValue,labelKey:i,valueKey:a,multiple:o}):React__default.createElement(Option,{key:r,item:e,isSelected:l,selectValue:n.selectValue,labelKey:i,valueKey:a,multiple:o,tabIndex:c,id:n.state.id+"-option-"+t})})}},{key:"renderOptions",value:function(){return this.renderPlainList(this.state.filtered?this.state.filteredOptions:this.props.options)}},{key:"onFilterChange",value:function(t){var r=this;if(!t.trim())return this.setState({filtered:!1,filteredOptions:[]});var l=isDataObject(this.props.options&&this.props.options[0],this.props.valueKey,this.props.labelKey),e=this.props.options.filter(function(e){return includes(l?e[r.props.labelKey]:e,t)});this.setState({filtered:!0,filteredOptions:e},function(){r.props.onFiltered&&r.props.onFiltered(e)})}},{key:"handleOutsideClick",value:function(e){var t=this.props.keepOpen||this.props.multiple;this.node&&this.node.contains(e.target)&&t||this.toggleDropDown()}},{key:"focusFilterInput",value:function(e){e&&this.props.defaultFocusFilter&&this.filter&&this.filter.filterInput&&this.filter.filterInput.focus()}},{key:"toggleDropDown",value:function(){var t=this;this.state.open?document.removeEventListener("click",this.handleOutsideClick,!1):document.addEventListener("click",this.handleOutsideClick,!1),this.setState(function(e){return _objectSpread({},e,{open:!e.open})},function(){var e=t.state.open;t.focusFilterInput(e),e&&t.props.onOpen?t.props.onOpen():!e&&t.props.onClose&&t.props.onClose()})}},{key:"render",value:function(){var t=this,e=this.props,r=e.className,l=e.placeholder,n=e.value,i=e.multiple,a=e.numberDisplayed,o=e.includeSelectAll,s=e.includeFilter,c=e.filterDebounce,u=e.valueKey,p=e.labelKey,d=e.tabIndex,f=e.dropdownHeight,h=e.renderSelectAll,y=this.state.open,b="";y&&(b+=this.state.id+"-list");var _="".concat(this.state.id,"__button"),v={maxHeight:f,overflowY:"scroll"};return React__default.createElement("div",{ref:function(e){t.node=e},className:["picky",r].join(" "),id:this.state.id,role:"combobox","aria-controls":_,"aria-expanded":y,"aria-haspopup":y,"aria-owns":b,tabIndex:d},React__default.createElement("button",{id:"".concat(this.state.id,"__button"),type:"button",className:"picky__input",onClick:this.toggleDropDown},React__default.createElement(Placeholder,{allSelected:this.state.allSelected,placeholder:l,manySelectedPlaceholder:this.props.manySelectedPlaceholder,allSelectedPlaceholder:this.props.allSelectedPlaceholder,value:n,multiple:i,numberDisplayed:a,valueKey:u,labelKey:p})),React__default.createElement("div",{className:"picky__dropdown",id:this.state.id+"-list","aria-hidden":!y,style:y?v:{visibility:"hidden"}},s&&React__default.createElement(Filter,{ref:function(e){return t.filter=e},onFilterChange:0<c?debounce(this.onFilterChange,c):this.onFilterChange}),h&&h({filtered:this.state.filtered,allSelected:this.state.allSelected,toggleSelectAll:this.toggleSelectAll,tabIndex:d,multiple:i}),!h&&o&&i&&!this.state.filtered&&React__default.createElement("div",{tabIndex:d,role:"option",id:this.state.id+"-option-selectall","data-selectall":"true","aria-selected":this.state.allSelected,className:this.state.allSelected?"option selected":"option",onClick:this.toggleSelectAll,onKeyPress:this.toggleSelectAll},React__default.createElement("input",{type:"checkbox",readOnly:!0,tabIndex:-1,checked:this.state.allSelected,"aria-label":"select all"}),React__default.createElement("span",null,this.props.selectAllText)),y&&React__default.createElement("div",null,this.renderOptions())))}}]),r}();Picky.defaultProps={numberDisplayed:3,options:[],filterDebounce:150,dropdownHeight:300,onChange:function(){},tabIndex:0,keepOpen:!0,selectAllText:"Select all"},Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),r=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var l=arguments[1],n=0;n<r;){var i=t[n];if(e.call(l,i,n,t))return n;n++}return-1}}),module.exports=Picky;
+"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=require("react"),React__default=_interopDefault(React);function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var l=0;l<t.length;l++){var r=t[l];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function _createClass(e,t,l){return t&&_defineProperties(e.prototype,t),l&&_defineProperties(e,l),e}function _defineProperty(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function _objectSpread(t){for(var e=1;e<arguments.length;e++){var l=null!=arguments[e]?arguments[e]:{},r=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(l).filter(function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable}))),r.forEach(function(e){_defineProperty(t,e,l[e])})}return t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&_setPrototypeOf(e,t)}function _getPrototypeOf(e){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function _setPrototypeOf(e,t){return(_setPrototypeOf=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _possibleConstructorReturn(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?_assertThisInitialized(e):t}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_nonIterableSpread()}function _arrayWithoutHoles(e){if(Array.isArray(e)){for(var t=0,l=new Array(e.length);t<e.length;t++)l[t]=e[t];return l}}function _iterableToArray(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance")}require("prop-types");var debounce=function(l,r){var n=null;return function(){clearTimeout(n);var e=arguments,t=this;n=setTimeout(function(){l.apply(t,e)},r)}},includes=function(e,t){return-1<String(e).toLowerCase().indexOf(String(t).toLowerCase())},isDataObject=function(e,t,l){return"object"===_typeof(e)&&e.hasOwnProperty(t)&&e.hasOwnProperty(l)},generateGuid=function(){function e(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}return e()+e()+"-"+e()+"-"+e()+"-"+e()+"-"+e()+e()+e()},hasItem=function(e,t,l,r,n){if(!e||!t)return!1;if(Array.isArray(e)){if(isDataObject(t,l,r)){var i=e.findIndex(function(e){return e[l]===t[l]});return n?i:-1<i}var a=e.indexOf(t);return n?a:-1<a}return isDataObject(t,l,r)?e[l]===t[l]:e===t},hasItemIndex=function(e,t,l,r){return hasItem(e,t,l,r,!0)},keyExtractor=function(e,t,l){return isDataObject(e,t,l)?e[t]:e},sortCollection=function(e,l){return l?e.sort(function(e,t){return e[l]-t[l]}):e.sort(function(e,t){return e-t})};function arraysEqual(e,t){if(e.length!==t.length)return!1;for(var l=e.length;l;){if(e[l]!==t[l])return!1;l--}return!0}function split(e){var t=1,l="",r=e.split("%"),n=r.length;0<n&&(l+=r[0]);for(var i=1;i<n;i++){if("s"===r[i][0]||"d"===r[i][0]){var a=arguments[t++];l+="d"===r[i][0]?Math.floor(a):a}else r[i][0]?l+="%"+r[i][0]:l+="%"+r[++i][0];l+=r[i].substring(1)}return l}var regex=/%[sdj]/;function format(e){return regex.test(e)?split.apply(null,arguments):Array.from(arguments).join(" ")}var isEmptyValue=function(e){return null==e||Array.isArray(e)&&!e.length},Placeholder=function(e){var t=e.placeholder,l=e.value,r=e.numberDisplayed,n=e.multiple,i=e.valueKey,a=e.labelKey,o=e.manySelectedPlaceholder,s=e.allSelectedPlaceholder,c=e.allSelected,u="";if(isEmptyValue(l))u=t;else if(Array.isArray(l)&&n)l.length<=r?u=l.map(function(e){return isDataObject(e,i,a)?e[a]:e}).join(", "):o&&!c?u=includes(o,"%s")?format(o,l.length):o:c&&s&&(u=includes(s,"%s")?format(s,l.length):s);else{var p=Array.isArray(l)?l[0]:l;u=isDataObject(p,i,a)?p[a]:p}return React__default.createElement("span",{className:"picky__placeholder"},u)};Placeholder.defaultProps={placeholder:"None selected",allSelectedPlaceholder:"%s selected",manySelectedPlaceholder:"%s selected",allSelected:!1};var Filter=function(e){function t(){return _classCallCheck(this,t),_possibleConstructorReturn(this,_getPrototypeOf(t).apply(this,arguments))}return _inherits(t,React.PureComponent),_createClass(t,[{key:"render",value:function(){var t=this;return React__default.createElement("div",{className:"picky__filter"},React__default.createElement("input",{type:"text",ref:function(e){return t.filterInput=e},className:"picky__filter__input",placeholder:this.props.placeholder,tabIndex:this.props.tabIndex,"aria-label":"filter options",onChange:function(e){return t.props.onFilterChange(e.target.value)}}))}}]),t}();Filter.defaultProps={placeholder:"Filter..."};var Option=function(e){var t=e.id,l=e.item,r=e.isSelected,n=e.labelKey,i=e.valueKey,a=e.selectValue,o=e.style,s=e.multiple,c=e.tabIndex,u=r?"option selected":"option",p=isDataObject(l,n,i)?l[n]:l,d=s?"checkbox":"radio";return React__default.createElement("div",{tabIndex:c,id:t,role:"option",style:o,"data-selected":r?"selected":"","aria-selected":r,className:u,onClick:function(){return a(l)},onKeyPress:function(e){e.preventDefault(),a(l)}},React__default.createElement("input",{type:d,readOnly:!0,tabIndex:-1,checked:r,"aria-label":p}),p)},Picky=function(e){function l(e){var t;return _classCallCheck(this,l),(t=_possibleConstructorReturn(this,_getPrototypeOf(l).call(this,e))).state={selectedValue:e.value||(e.multiple?[]:null),open:e.open,filtered:!1,filteredOptions:[],id:generateGuid(),allSelected:!1},t.toggleDropDown=t.toggleDropDown.bind(_assertThisInitialized(_assertThisInitialized(t))),t.toggleSelectAll=t.toggleSelectAll.bind(_assertThisInitialized(_assertThisInitialized(t))),t.onFilterChange=t.onFilterChange.bind(_assertThisInitialized(_assertThisInitialized(t))),t.selectValue=t.selectValue.bind(_assertThisInitialized(_assertThisInitialized(t))),t.allSelected=t.allSelected.bind(_assertThisInitialized(_assertThisInitialized(t))),t.handleOutsideClick=t.handleOutsideClick.bind(_assertThisInitialized(_assertThisInitialized(t))),t.isItemSelected=t.isItemSelected.bind(_assertThisInitialized(_assertThisInitialized(t))),t.focusFilterInput=t.focusFilterInput.bind(_assertThisInitialized(_assertThisInitialized(t))),t}return _inherits(l,React__default.PureComponent),_createClass(l,[{key:"UNSAFE_componentWillMount",value:function(){this.setState({allSelected:this.allSelected()})}},{key:"componentDidMount",value:function(){this.focusFilterInput(this.state.open)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("click",this.handleOutsideClick,!1)}},{key:"UNSAFE_componentWillReceiveProps",value:function(e){if(this.props.options!==e.options||this.props.value!==e.value){var t=Array.isArray(e.value)?arraysEqual(e.value,this.props.value):e.value===this.props.value;this.setState({allSelected:t?this.allSelected():this.allSelected(e.value)})}}},{key:"selectValue",value:function(e){var t=this,l=this.props.value;if(this.props.multiple&&Array.isArray(l)){var r=hasItemIndex(l,e,this.props.valueKey,this.props.labelKey),n=[];n=-1<r?_toConsumableArray(l.slice(0,r)).concat(_toConsumableArray(l.slice(r+1))):_toConsumableArray(this.props.value).concat([e]),this.setState({allSelected:this.allSelected(n)},function(){t.props.onChange(n)})}else this.props.onChange(e)}},{key:"allSelected",value:function(e){var t=e||this.props.value,l=this.props.options,r=isDataObject(l&&l[0],this.props.valueKey,this.props.labelKey),n=l.slice(0),i=Array.isArray(t)?t.slice(0):[];return arraysEqual(n,i=r?(n=sortCollection(n,this.props.valueKey),sortCollection(i,this.props.valueKey)):(n=sortCollection(n),sortCollection(i)))}},{key:"toggleSelectAll",value:function(){var t=this;this.setState(function(e){return _objectSpread({},e,{allSelected:!t.state.allSelected})},function(){t.state.allSelected?t.props.onChange(t.props.options):t.props.onChange([])})}},{key:"isItemSelected",value:function(e){return hasItem(this.props.value,e,this.props.valueKey,this.props.labelKey)}},{key:"renderPlainList",value:function(e){var n=this,t=this.props,i=t.labelKey,a=t.valueKey,o=t.multiple,s=t.render,c=t.tabIndex,l=t.renderList;return l?l({items:e,selected:this.props.value,multiple:o,tabIndex:c,getIsSelected:this.isItemSelected,selectValue:this.selectValue}):e.map(function(e,t){var l=keyExtractor(e,a,i),r=n.isItemSelected(e);return"function"==typeof s?s({index:t,item:e,isSelected:r,selectValue:n.selectValue,labelKey:i,valueKey:a,multiple:o}):React__default.createElement(Option,{key:l,item:e,isSelected:r,selectValue:n.selectValue,labelKey:i,valueKey:a,multiple:o,tabIndex:c,id:n.state.id+"-option-"+t})})}},{key:"renderOptions",value:function(){return this.renderPlainList(this.state.filtered?this.state.filteredOptions:this.props.options)}},{key:"onFilterChange",value:function(t){var l=this;if(!t.trim())return this.setState({filtered:!1,filteredOptions:[]});var r=isDataObject(this.props.options&&this.props.options[0],this.props.valueKey,this.props.labelKey),e=this.props.options.filter(function(e){return includes(r?e[l.props.labelKey]:e,t)});this.setState({filtered:!0,filteredOptions:e},function(){l.props.onFiltered&&l.props.onFiltered(e)})}},{key:"handleOutsideClick",value:function(e){var t=this.props.keepOpen||this.props.multiple;this.node&&this.node.contains(e.target)&&t||this.toggleDropDown()}},{key:"focusFilterInput",value:function(e){e&&this.props.defaultFocusFilter&&this.filter&&this.filter.filterInput&&this.filter.filterInput.focus()}},{key:"toggleDropDown",value:function(){var t=this;this.state.open?document.removeEventListener("click",this.handleOutsideClick,!1):document.addEventListener("click",this.handleOutsideClick,!1),this.setState(function(e){return _objectSpread({},e,{open:!e.open})},function(){var e=t.state.open;t.focusFilterInput(e),e&&t.props.onOpen?t.props.onOpen():!e&&t.props.onClose&&t.props.onClose()})}},{key:"render",value:function(){var t=this,e=this.props,l=e.className,r=e.placeholder,n=e.value,i=e.multiple,a=e.numberDisplayed,o=e.includeSelectAll,s=e.includeFilter,c=e.filterDebounce,u=e.valueKey,p=e.labelKey,d=e.tabIndex,f=e.dropdownHeight,h=e.renderSelectAll,y=e.filterPlaceholder,b=this.state.open,_="";b&&(_+=this.state.id+"-list");var v="".concat(this.state.id,"__button"),m={maxHeight:f,overflowY:"scroll"};return React__default.createElement("div",{ref:function(e){t.node=e},className:["picky",l].join(" "),id:this.state.id,role:"combobox","aria-controls":v,"aria-expanded":b,"aria-haspopup":b,"aria-owns":_,tabIndex:d},React__default.createElement("button",{id:"".concat(this.state.id,"__button"),type:"button",className:"picky__input",onClick:this.toggleDropDown},React__default.createElement(Placeholder,{allSelected:this.state.allSelected,placeholder:r,manySelectedPlaceholder:this.props.manySelectedPlaceholder,allSelectedPlaceholder:this.props.allSelectedPlaceholder,value:n,multiple:i,numberDisplayed:a,valueKey:u,labelKey:p})),React__default.createElement("div",{className:"picky__dropdown",id:this.state.id+"-list","aria-hidden":!b,style:b?m:{visibility:"hidden"}},s&&React__default.createElement(Filter,{ref:function(e){return t.filter=e},placeholder:y,onFilterChange:0<c?debounce(this.onFilterChange,c):this.onFilterChange}),h&&h({filtered:this.state.filtered,allSelected:this.state.allSelected,toggleSelectAll:this.toggleSelectAll,tabIndex:d,multiple:i}),!h&&o&&i&&!this.state.filtered&&React__default.createElement("div",{tabIndex:d,role:"option",id:this.state.id+"-option-selectall","data-selectall":"true","aria-selected":this.state.allSelected,className:this.state.allSelected?"option selected":"option",onClick:this.toggleSelectAll,onKeyPress:this.toggleSelectAll},React__default.createElement("input",{type:"checkbox",readOnly:!0,tabIndex:-1,checked:this.state.allSelected,"aria-label":"select all"}),React__default.createElement("span",null,this.props.selectAllText)),b&&React__default.createElement("div",null,this.renderOptions())))}}]),l}();Picky.defaultProps={numberDisplayed:3,options:[],filterDebounce:150,dropdownHeight:300,onChange:function(){},tabIndex:0,keepOpen:!0,selectAllText:"Select all"},Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),l=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var r=arguments[1],n=0;n<l;){var i=t[n];if(e.call(r,i,n,t))return n;n++}return-1}}),module.exports=Picky;
diff --git a/docs/README.md b/docs/README.md
index 916a64d..11d03d3 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -157,6 +157,7 @@ Picky.propTypes = {
 - `renderSelectAll` - Used for rendering a custom select all
 - `defaultFocusFilter` - If set to true, will focus the filter by default when opened.
 - `renderList` - Render prop for whole list, you can use this to add virtualization/windowing if necessary
+- `filterPlaceholder` - Override the filter placeholder. Defaults to 'Filter...'
 
 ## Custom rendering
 
diff --git a/index.d.ts b/index.d.ts
index d850bfb..af539fb 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -368,6 +368,15 @@ declare module 'react-picky' {
      * @memberof PickyProps
      */
     renderList?: (props: RenderListProps) => any;
+
+
+    /**
+     * Override the placeholder of the filter
+     *
+     * @type {string}
+     * @memberof PickyProps
+     */
+    filterPlaceholder?:string;
   }
 
   export default class Picky extends React.PureComponent<PickyProps, any> {
diff --git a/src/Filter.js b/src/Filter.js
index afa3b64..92c49c3 100644
--- a/src/Filter.js
+++ b/src/Filter.js
@@ -9,7 +9,7 @@ class Filter extends PureComponent {
           ref={input => (this.filterInput = input)}
           className="picky__filter__input"
           data-testid="picky__filter__input"
-          placeholder="Filter..."
+          placeholder={this.props.placeholder}
           tabIndex={this.props.tabIndex}
           aria-label="filter options"
           onChange={e => this.props.onFilterChange(e.target.value)}
@@ -18,10 +18,13 @@ class Filter extends PureComponent {
     );
   }
 }
-
+Filter.defaultProps = {
+  placeholder: 'Filter...',
+};
 Filter.propTypes = {
   onFilterChange: PropTypes.func.isRequired,
   tabIndex: PropTypes.number,
+  placeholder: PropTypes.string,
 };
 
 export default Filter;
diff --git a/src/Picky.js b/src/Picky.js
index 49c4ef8..af05163 100644
--- a/src/Picky.js
+++ b/src/Picky.js
@@ -46,11 +46,11 @@ class Picky extends React.PureComponent {
   componentDidMount() {
     this.focusFilterInput(this.state.open);
   }
-  
+
   componentWillUnmount() {
     document.removeEventListener('click', this.handleOutsideClick, false);
   }
-  
+
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (
       this.props.options !== nextProps.options ||
@@ -337,6 +337,7 @@ class Picky extends React.PureComponent {
       tabIndex,
       dropdownHeight,
       renderSelectAll,
+      filterPlaceholder,
     } = this.props;
     const { open } = this.state;
     let ariaOwns = '';
@@ -388,6 +389,7 @@ class Picky extends React.PureComponent {
           {includeFilter && (
             <Filter
               ref={filter => (this.filter = filter)}
+              placeholder={filterPlaceholder}
               onFilterChange={
                 filterDebounce > 0
                   ? debounce(this.onFilterChange, filterDebounce)
@@ -482,6 +484,7 @@ Picky.propTypes = {
   defaultFocusFilter: PropTypes.bool,
   className: PropTypes.string,
   renderList: PropTypes.func,
+  filterPlaceholder: PropTypes.string,
 };
 
 export default Picky;
diff --git a/tests/Picky.test.js b/tests/Picky.test.js
index b9fb269..d7ffede 100644
--- a/tests/Picky.test.js
+++ b/tests/Picky.test.js
@@ -863,5 +863,27 @@ describe('Picky', () => {
         expect(onChange).toHaveBeenCalledTimes(1);
       });
     });
+
+    test('should override filter placeholder if supplied', () => {
+      const { getByTestId } = rtlRender(
+        <Picky
+          options={[1, 2, 3]}
+          open={true}
+          includeFilter
+          filterPlaceholder="Hello..."
+        />
+      );
+      const filter = getByTestId('picky__filter__input');
+
+      expect(filter.placeholder).toEqual('Hello...');
+    });
+    test('filter placeholder default to Filter... if not supplied', () => {
+      const { getByTestId } = rtlRender(
+        <Picky options={[1, 2, 3]} open={true} includeFilter />
+      );
+      const filter = getByTestId('picky__filter__input');
+
+      expect(filter.placeholder).toEqual('Filter...');
+    });
   });
 });