From d7b690769a28deda7df9607e82e96ae67a78d5f6 Mon Sep 17 00:00:00 2001
From: "AzureAD\\JoshHunt" <josh.hunt@cin7.com>
Date: Fri, 23 Oct 2020 09:04:05 +1300
Subject: [PATCH 1/3] Make placeholder configurable

---
 demo/src/examples/Filterable.js          |  2 +-
 src/FilteringContainer.js                |  5 ++++-
 src/__tests__/FilteringContainer.test.js | 12 ++++++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/demo/src/examples/Filterable.js b/demo/src/examples/Filterable.js
index 53b9952..5c61e42 100644
--- a/demo/src/examples/Filterable.js
+++ b/demo/src/examples/Filterable.js
@@ -70,7 +70,7 @@ class Filterable extends Component {
           onChange={this.handleGroupsToogle}
           style={{marginBottom: 15}}
         />
-        <FilteringContainer nodes={this.state.nodes} {...this._groupProps}>
+        <FilteringContainer nodes={this.state.nodes} {...this._groupProps} placeholder="Hi Sherwin">
           {({nodes}) => (
             <div style={{height: 500}}>
               <Tree nodes={nodes} onChange={this.handleChange}>
diff --git a/src/FilteringContainer.js b/src/FilteringContainer.js
index d0f0b9f..2580765 100644
--- a/src/FilteringContainer.js
+++ b/src/FilteringContainer.js
@@ -32,6 +32,7 @@ export default class FilteringContainer extends React.Component {
     debouncer: debounce,
     groupRenderer: DefaultGroupRenderer,
     indexSearch: indexByName,
+    placeholder: 'Search...',
   };
 
   constructor(props) {
@@ -62,6 +63,7 @@ export default class FilteringContainer extends React.Component {
       groupRenderer: GroupRenderer,
       onSelectedGroupChange,
       indexSearch,
+      placeholder,
     } = this.props;
 
     const relevantNodes =
@@ -76,7 +78,7 @@ export default class FilteringContainer extends React.Component {
     return (
       <div className="tree-filter-container">
         <div className={classNames('tree-lookup-input', {group: !!groups})}>
-          <input value={filterText} onChange={this.handleFilterTextChange} placeholder="Search..." />
+          <input value={filterText} onChange={this.handleFilterTextChange} placeholder={placeholder} />
           <i aria-hidden="true" className="mi mi-11 mi-search" />
           {groups && <GroupRenderer groups={groups} selectedGroup={selectedGroup} onChange={onSelectedGroupChange} />}
         </div>
@@ -94,4 +96,5 @@ FilteringContainer.propTypes = {
   groupRenderer: PropTypes.func,
   onSelectedGroupChange: PropTypes.func,
   indexSearch: PropTypes.func,
+  placeholder: PropTypes.string,
 };
diff --git a/src/__tests__/FilteringContainer.test.js b/src/__tests__/FilteringContainer.test.js
index c23add9..b4f0714 100644
--- a/src/__tests__/FilteringContainer.test.js
+++ b/src/__tests__/FilteringContainer.test.js
@@ -82,6 +82,18 @@ describe('FilteringContainer', () => {
 
       expect(getInjectedNodes()).toMatchSnapshot();
     });
+
+    it('should render with the default placeholder', () => {
+      const {wrapper} = setup();
+
+      expect(wrapper.getByPlaceholderText('Search...')).not.toBeNull();
+    });
+
+    it('should render the expected placeholder', () => {
+      const {wrapper} = setup({placeholder: 'Custom Placeholder'});
+
+      expect(wrapper.getByPlaceholderText('Custom Placeholder')).not.toBeNull();
+    });
   });
 
   describe('groups', () => {

From 214cd00d5b2083224849cced04f4cc28f7dfbf0b Mon Sep 17 00:00:00 2001
From: "AzureAD\\JoshHunt" <josh.hunt@cin7.com>
Date: Fri, 23 Oct 2020 09:09:13 +1300
Subject: [PATCH 2/3] Remove test data

---
 demo/src/examples/Filterable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/src/examples/Filterable.js b/demo/src/examples/Filterable.js
index 5c61e42..53b9952 100644
--- a/demo/src/examples/Filterable.js
+++ b/demo/src/examples/Filterable.js
@@ -70,7 +70,7 @@ class Filterable extends Component {
           onChange={this.handleGroupsToogle}
           style={{marginBottom: 15}}
         />
-        <FilteringContainer nodes={this.state.nodes} {...this._groupProps} placeholder="Hi Sherwin">
+        <FilteringContainer nodes={this.state.nodes} {...this._groupProps}>
           {({nodes}) => (
             <div style={{height: 500}}>
               <Tree nodes={nodes} onChange={this.handleChange}>

From 3db1caa6f4fa4d2371bd866b27b5c82f6b99e9e6 Mon Sep 17 00:00:00 2001
From: "AzureAD\\JoshHunt" <josh.hunt@cin7.com>
Date: Wed, 4 Nov 2020 09:24:17 +1300
Subject: [PATCH 3/3] fix types

---
 index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index 7c0e6e5..0a6f6d8 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -97,7 +97,7 @@ interface GroupRendererProps {
 
 export interface FilteringContainerProps {
   nodes: Node[];
-  children: (params: {nodes: Node[]; nodeParentMappings: {[id: NodeId]: NodeId[]}}) => JSX.Element;
+  children: (params: {nodes: Node[]; nodeParentMappings: {[key in NodeId]: NodeId[]}}) => JSX.Element;
   debouncer?: (func: (...p: any[]) => any, timeout: number) => void;
   groups?: {[g: string]: Group};
   selectedGroup?: string;