components: Searchbar functions override

Moved functionality from Element to the parent component SearchBar, so that we can supply them to the Element that overrides.

src/lib/components/SearchBar/SearchBar.js

@@ -31,33 +31,54 @@ class SearchBar extends Component {
     this.updateQueryString(this.state.currentValue);
   };
 
+  onBtnSearchClick = (event, input) => {
+    this.executeSearch();
+  };
+
+  onKeyPress = (event, input) => {
+    if (event.key === 'Enter') {
+      this.executeSearch();
+    }
+  };
+
   render() {
     const { placeholder, overridableId } = this.props;
     return (
       <Element
-        placeholder={placeholder}
-        queryString={this.state.currentValue}
+        onBtnSearchClick={this.onBtnSearchClick}
         onInputChange={this.onInputChange}
+        onKeyPress={this.onKeyPress}
         executeSearch={this.executeSearch}
         overridableId={overridableId}
+        placeholder={placeholder}
+        queryString={this.state.currentValue}
       />
     );
   }
 }
 
 SearchBar.propTypes = {
+  onBtnSearchClick: PropTypes.func,
+  onInputChange: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  overridableId: PropTypes.string,
   placeholder: PropTypes.string,
   queryString: PropTypes.string.isRequired,
   updateQueryString: PropTypes.func.isRequired,
-  overridableId: PropTypes.string,
 };
 
 SearchBar.defaultProps = {
+  onBtnSearchClick: SearchBar.onBtnSearchClick,
+  onInputChange: SearchBar.onInputChange,
+  onKeyPress: SearchBar.onKeyPress,
+  overridableId: '',
   placeholder: '',
   queryString: '',
-  overridableId: '',
 };
 
+// NOTE: Adding the key prop, will recreate the SearchBar in order to update
+// state with the latest redux queryString value.
+// https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key
 const SearchBarUncontrolled = (props) => (
   <SearchBar key={props.queryString} {...props} />
 );
@@ -66,18 +87,11 @@ const Element = ({ overridableId, ...props }) => {
   const {
     placeholder: passedPlaceholder,
     queryString,
+    onBtnSearchClick,
     onInputChange,
-    executeSearch,
+    onKeyPress,
   } = props;
   const placeholder = passedPlaceholder || 'Type something';
-  const onBtnSearchClick = (event, input) => {
-    executeSearch();
-  };
-  const onKeyPress = (event, input) => {
-    if (event.key === 'Enter') {
-      executeSearch();
-    }
-  };
   return (
     <Overridable id={buildUID('SearchBar.element', overridableId)} {...props}>
       <Input