From ee8d1e9b824f54a51454eb7148e4467de41e64ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kuba=20Niechcia=C5=82?= <jakub.niechcial@netguru.co>
Date: Sat, 18 Jul 2015 12:38:14 +0200
Subject: [PATCH 01/10] extract option component and allow to pass as prop

---
 src/Option.js | 22 ++++++++++++++++++++++
 src/Select.js | 24 +++++++++++++++++-------
 2 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 src/Option.js

diff --git a/src/Option.js b/src/Option.js
new file mode 100644
index 0000000000..7272010e9b
--- /dev/null
+++ b/src/Option.js
@@ -0,0 +1,22 @@
+var React = require('react');
+
+var Option = React.createClass({
+  render: function() {
+    var renderedLabel = this.props.renderFunc(this.props.object);
+    var obj = this.props.object;
+
+    return this.props.object.disabled ? (
+      <div className={this.props.className}>{renderedLabel}</div>
+    ) : (
+      <div className={this.props.className}
+        onMouseEnter={this.props.mouseEnter}
+        onMouseLeave={this.props.mouseLeave}
+        onMouseDown={this.props.mouseDown}
+        onClick={this.props.mouseDown}>
+        { obj.create ? this.props.addLabelText.replace('{label}', obj.label) : renderedLabel }
+      </div>
+    );
+  }
+});
+
+module.exports = Option;
diff --git a/src/Select.js b/src/Select.js
index 927268b34f..f047cad6f0 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -6,6 +6,7 @@ var React = require('react');
 var Input = require('react-input-autosize');
 var classes = require('classnames');
 var Value = require('./Value');
+var Option = require('./Option');
 
 var requestId = 0;
 
@@ -44,7 +45,8 @@ var Select = React.createClass({
 		searchable: React.PropTypes.bool,          // whether to enable searching feature or not
 		searchPromptText: React.PropTypes.string,  // label to prompt for search input
 		value: React.PropTypes.any,                // initial field value
-		valueRenderer: React.PropTypes.func        // valueRenderer: function(option) {}
+		valueRenderer: React.PropTypes.func,       // valueRenderer: function(option) {}
+		optionComponent: React.PropTypes.func      // optionComponent to render
 	},
 
 	getDefaultProps: function() {
@@ -72,7 +74,8 @@ var Select = React.createClass({
 			placeholder: 'Select...',
 			searchable: true,
 			searchPromptText: 'Type to search',
-			value: undefined
+			value: undefined,
+			optionComponent: Option
 		};
 	},
 
@@ -685,11 +688,18 @@ var Select = React.createClass({
 			var mouseDown = this.selectValue.bind(this, op);
 			var renderedLabel = renderLabel(op);
 
-			return op.disabled ? (
-				<div ref={ref} key={'option-' + op.value} className={optionClass}>{renderedLabel}</div>
-			) : (
-				<div ref={ref} key={'option-' + op.value} className={optionClass} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave} onMouseDown={mouseDown} onClick={mouseDown}>{ op.create ? this.props.addLabelText.replace('{label}', op.label) : renderedLabel}</div>
-			);
+			var optionResult = React.createElement(this.props.optionComponent, {
+				key: 'option-' + op.value,
+				className: optionClass,
+				renderFunc: renderLabel,
+				mouseEnter: mouseEnter,
+				mouseDown: mouseDown,
+				click: mouseDown,
+				addLabelText: this.props.addLabelText,
+				object: op
+			});
+
+			return optionResult;
 		}, this);
 
 		return ops.length ? ops : (

From fa35c42d0d096888a8931a96ea518bb1d79f625c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kuba=20Niechcia=C5=82?= <jakub.niechcial@netguru.co>
Date: Sat, 18 Jul 2015 12:38:42 +0200
Subject: [PATCH 02/10] allow to use passed in props value component or default

---
 src/Select.js | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/Select.js b/src/Select.js
index f047cad6f0..32a6ebc691 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -46,7 +46,8 @@ var Select = React.createClass({
 		searchPromptText: React.PropTypes.string,  // label to prompt for search input
 		value: React.PropTypes.any,                // initial field value
 		valueRenderer: React.PropTypes.func,       // valueRenderer: function(option) {}
-		optionComponent: React.PropTypes.func      // optionComponent to render
+		optionComponent: React.PropTypes.func,     // optionComponent to render
+		valueComponent: React.PropTypes.func
 	},
 
 	getDefaultProps: function() {
@@ -75,7 +76,8 @@ var Select = React.createClass({
 			searchable: true,
 			searchPromptText: 'Type to search',
 			value: undefined,
-			optionComponent: Option
+			optionComponent: Option,
+			valueComponent: Value
 		};
 	},
 
@@ -730,14 +732,20 @@ var Select = React.createClass({
 
 		if (this.props.multi) {
 			this.state.values.forEach(function(val) {
-				value.push(<Value
-					key={val.value}
-					option={val}
-					renderer={this.props.valueRenderer}
-					optionLabelClick={!!this.props.onOptionLabelClick}
-					onOptionLabelClick={this.handleOptionLabelClick.bind(this, val)}
-					onRemove={this.removeValue.bind(this, val)}
-					disabled={this.props.disabled} />);
+				var onOptionLabelClick = this.handleOptionLabelClick.bind(this, val);
+				var onRemove = this.removeValue.bind(this, val);
+
+				var valueComponent = React.createElement(this.props.valueComponent, {
+					key: val.value,
+					option: val,
+					renderer: this.props.valueRenderer,
+					optionLabelClick: !!this.props.onOptionLabelClick,
+					onOptionLabelClick: onOptionLabelClick,
+					onRemove: onRemove,
+					disabled: this.props.disabled
+				});
+
+				value.push(valueComponent);
 			}, this);
 		}
 

From b7e751aca7d6b7109d2b3d05484d852a2d15c417 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kuba=20Niechcia=C5=82?= <jakub.niechcial@netguru.co>
Date: Tue, 21 Jul 2015 21:18:53 +0200
Subject: [PATCH 03/10] add SingleValue component to handle single selection
 mode

---
 src/Select.js      | 17 ++++++++++++-----
 src/SingleValue.js | 16 ++++++++++++++++
 2 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 src/SingleValue.js

diff --git a/src/Select.js b/src/Select.js
index 32a6ebc691..adbc127f72 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -6,6 +6,7 @@ var React = require('react');
 var Input = require('react-input-autosize');
 var classes = require('classnames');
 var Value = require('./Value');
+var SingleValue = require('./SingleValue');
 var Option = require('./Option');
 
 var requestId = 0;
@@ -47,7 +48,8 @@ var Select = React.createClass({
 		value: React.PropTypes.any,                // initial field value
 		valueRenderer: React.PropTypes.func,       // valueRenderer: function(option) {}
 		optionComponent: React.PropTypes.func,     // optionComponent to render
-		valueComponent: React.PropTypes.func
+		valueComponent: React.PropTypes.func,      // value component to render in multiple mode
+		singleValueComponent: React.PropTypes.func // single value component when multiple is set to false
 	},
 
 	getDefaultProps: function() {
@@ -77,7 +79,8 @@ var Select = React.createClass({
 			searchPromptText: 'Type to search',
 			value: undefined,
 			optionComponent: Option,
-			valueComponent: Value
+			valueComponent: Value,
+			singleValueComponent: SingleValue
 		};
 	},
 
@@ -751,16 +754,20 @@ var Select = React.createClass({
 
 		if(!this.state.inputValue && (!this.props.multi || !value.length)) {
 			if(this.props.valueRenderer && !!this.state.values.length) {
-				var val = this.state.values[0] || null;
 				value.push(<Value
 						key={0}
 						option={val}
 						renderer={this.props.valueRenderer}
 						disabled={this.props.disabled} />);
 			} else {
-				value.push(<div className="Select-placeholder" key="placeholder">{this.state.placeholder}</div>);
+				var val = this.state.values[0] || null;
+				var singleValueComponent = React.createElement(this.props.singleValueComponent, {
+					key: "placeholder",
+					value: val,
+					placeholder: this.state.placeholder
+				});
+				value.push(singleValueComponent);
 			}
-			
 		}
 
 		var loading = this.state.isLoading ? <span className="Select-loading" aria-hidden="true" /> : null;
diff --git a/src/SingleValue.js b/src/SingleValue.js
new file mode 100644
index 0000000000..63cca0cc8a
--- /dev/null
+++ b/src/SingleValue.js
@@ -0,0 +1,16 @@
+var React = require('react');
+
+var SingleValue = React.createClass({
+  propTypes: {
+    option: React.PropTypes.object,               // selected option
+    placeholder: React.PropTypes.string           // this is default value provided by React-Select based component
+  },
+
+  render: function() {
+    return (
+      <div className="Select-placeholder">{this.props.placeholder}</div>
+    );
+  }
+});
+
+module.exports = SingleValue;

From 8f5fa756bbcc730913c8d34fb2a5ef4fc2808e90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kuba=20Niechcia=C5=82?= <jakub.niechcial@netguru.co>
Date: Tue, 21 Jul 2015 21:19:24 +0200
Subject: [PATCH 04/10] add desc to propTypes and fix naming convention

---
 src/Option.js | 16 +++++++++++++---
 src/Select.js |  4 ++--
 src/Value.js  | 12 ++++++------
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/Option.js b/src/Option.js
index 7272010e9b..7f4a713c6d 100644
--- a/src/Option.js
+++ b/src/Option.js
@@ -1,11 +1,21 @@
 var React = require('react');
 
 var Option = React.createClass({
+  propTypes: {
+    renderFunc: React.PropTypes.func,                   // method passed to ReactSelect component to render label text
+    option: React.PropTypes.object.isRequired,          // object that is base for that option
+    className: React.PropTypes.string,                  // className (based on mouse position)
+    mouseEnter: React.PropTypes.func,                   // method to handle mouseEnter on option element
+    mouseLeave: React.PropTypes.func,                   // method to handle mouseLeave on option element
+    mouseDown: React.PropTypes.func,                    // method to handle click on option element
+    addLabelText: React.PropTypes.string                // string rendered in case of allowCreate option passed to ReactSelect
+  },
+
   render: function() {
-    var renderedLabel = this.props.renderFunc(this.props.object);
-    var obj = this.props.object;
+    var obj = this.props.option;
+    var renderedLabel = this.props.renderFunc(obj);
 
-    return this.props.object.disabled ? (
+    return obj.disabled ? (
       <div className={this.props.className}>{renderedLabel}</div>
     ) : (
       <div className={this.props.className}
diff --git a/src/Select.js b/src/Select.js
index adbc127f72..c3760bebef 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -47,7 +47,7 @@ var Select = React.createClass({
 		searchPromptText: React.PropTypes.string,  // label to prompt for search input
 		value: React.PropTypes.any,                // initial field value
 		valueRenderer: React.PropTypes.func,       // valueRenderer: function(option) {}
-		optionComponent: React.PropTypes.func,     // optionComponent to render
+		optionComponent: React.PropTypes.func,     // option component to render in dropdown
 		valueComponent: React.PropTypes.func,      // value component to render in multiple mode
 		singleValueComponent: React.PropTypes.func // single value component when multiple is set to false
 	},
@@ -701,7 +701,7 @@ var Select = React.createClass({
 				mouseDown: mouseDown,
 				click: mouseDown,
 				addLabelText: this.props.addLabelText,
-				object: op
+				option: op
 			});
 
 			return optionResult;
diff --git a/src/Value.js b/src/Value.js
index f6ead70ad3..0226dc26b3 100644
--- a/src/Value.js
+++ b/src/Value.js
@@ -5,12 +5,12 @@ var Value = React.createClass({
 	displayName: 'Value',
 
 	propTypes: {
-		disabled: React.PropTypes.bool,
-		onOptionLabelClick: React.PropTypes.func,
-		onRemove: React.PropTypes.func,
-		option: React.PropTypes.object.isRequired,
-		optionLabelClick: React.PropTypes.bool,
-		renderer: React.PropTypes.func
+		disabled: React.PropTypes.bool,                   // disabled prop passed to ReactSelect
+		onOptionLabelClick: React.PropTypes.func,         // method to handle click on value label
+		onRemove: React.PropTypes.func,                   // method to handle remove of that value
+		option: React.PropTypes.object.isRequired,        // option passed to component
+		optionLabelClick: React.PropTypes.bool,           // indicates if onOptionLabelClick should be handled
+		renderer: React.PropTypes.func                    // method to render option label passed to ReactSelect
 	},
 
 	blockEvent: function(event) {

From a572edb2c7aaed0803d7d29cdce02fb2f6b367d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kuba=20Niechcia=C5=82?= <jakub.niechcial@netguru.co>
Date: Tue, 21 Jul 2015 21:30:20 +0200
Subject: [PATCH 05/10] add props for external optionCreator

---
 src/Select.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/Select.js b/src/Select.js
index c3760bebef..d106fceaea 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -49,7 +49,8 @@ var Select = React.createClass({
 		valueRenderer: React.PropTypes.func,       // valueRenderer: function(option) {}
 		optionComponent: React.PropTypes.func,     // option component to render in dropdown
 		valueComponent: React.PropTypes.func,      // value component to render in multiple mode
-		singleValueComponent: React.PropTypes.func // single value component when multiple is set to false
+		singleValueComponent: React.PropTypes.func,// single value component when multiple is set to false
+		newOptionCreator: React.PropTypes.func     // factory to create new options when allowCreate set
 	},
 
 	getDefaultProps: function() {
@@ -80,7 +81,8 @@ var Select = React.createClass({
 			value: undefined,
 			optionComponent: Option,
 			valueComponent: Value,
-			singleValueComponent: SingleValue
+			singleValueComponent: SingleValue,
+			newOptionCreator: undefined
 		};
 	},
 
@@ -667,11 +669,12 @@ var Select = React.createClass({
 		if (this.props.allowCreate && this.state.inputValue.trim()) {
 			var inputValue = this.state.inputValue;
 			options = options.slice();
-			options.unshift({
+			var newOption = this.props.newOptionCreator ? this.props.newOptionCreator(inputValue) : {
 				value: inputValue,
 				label: inputValue,
 				create: true
-			});
+			};
+			options.unshift(newOption);
 		}
 
 		var ops = Object.keys(options).map(function(key) {

From 4faecf295996b37c9a9b660f4b612a6b96c28cb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kuba=20Niechcia=C5=82?= <jakub.niechcial@netguru.co>
Date: Wed, 22 Jul 2015 11:45:00 +0200
Subject: [PATCH 06/10] fix tests

---
 src/Select.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Select.js b/src/Select.js
index d106fceaea..0f75efae79 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -701,10 +701,12 @@ var Select = React.createClass({
 				className: optionClass,
 				renderFunc: renderLabel,
 				mouseEnter: mouseEnter,
+				mouseLeave: mouseLeave,
 				mouseDown: mouseDown,
 				click: mouseDown,
 				addLabelText: this.props.addLabelText,
-				option: op
+				option: op,
+				ref: ref
 			});
 
 			return optionResult;

From a1a864884a02b0e34cfc34fba994bf815d485146 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kuba=20Niechcia=C5=82?= <jakub.niechcial@netguru.co>
Date: Wed, 22 Jul 2015 11:45:05 +0200
Subject: [PATCH 07/10] fix linter warnings

---
 src/Option.js | 8 ++++----
 src/Select.js | 3 +--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/Option.js b/src/Option.js
index 7f4a713c6d..fe03b78203 100644
--- a/src/Option.js
+++ b/src/Option.js
@@ -2,13 +2,13 @@ var React = require('react');
 
 var Option = React.createClass({
   propTypes: {
-    renderFunc: React.PropTypes.func,                   // method passed to ReactSelect component to render label text
-    option: React.PropTypes.object.isRequired,          // object that is base for that option
+    addLabelText: React.PropTypes.string,               // string rendered in case of allowCreate option passed to ReactSelect
     className: React.PropTypes.string,                  // className (based on mouse position)
+    mouseDown: React.PropTypes.func,                    // method to handle click on option element
     mouseEnter: React.PropTypes.func,                   // method to handle mouseEnter on option element
     mouseLeave: React.PropTypes.func,                   // method to handle mouseLeave on option element
-    mouseDown: React.PropTypes.func,                    // method to handle click on option element
-    addLabelText: React.PropTypes.string                // string rendered in case of allowCreate option passed to ReactSelect
+    option: React.PropTypes.object.isRequired,          // object that is base for that option
+    renderFunc: React.PropTypes.func                    // method passed to ReactSelect component to render label text
   },
 
   render: function() {
diff --git a/src/Select.js b/src/Select.js
index 0f75efae79..6f6a5de463 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -694,7 +694,6 @@ var Select = React.createClass({
 			var mouseEnter = this.focusOption.bind(this, op);
 			var mouseLeave = this.unfocusOption.bind(this, op);
 			var mouseDown = this.selectValue.bind(this, op);
-			var renderedLabel = renderLabel(op);
 
 			var optionResult = React.createElement(this.props.optionComponent, {
 				key: 'option-' + op.value,
@@ -767,7 +766,7 @@ var Select = React.createClass({
 			} else {
 				var val = this.state.values[0] || null;
 				var singleValueComponent = React.createElement(this.props.singleValueComponent, {
-					key: "placeholder",
+					key: 'placeholder',
 					value: val,
 					placeholder: this.state.placeholder
 				});

From 198f684736da3287c733a218297031567cac2c5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kuba=20Niechcia=C5=82?= <jakub.niechcial@netguru.co>
Date: Wed, 22 Jul 2015 14:53:04 +0200
Subject: [PATCH 08/10] fix to use value instead of option prop

---
 src/SingleValue.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/SingleValue.js b/src/SingleValue.js
index 63cca0cc8a..7dc7106a32 100644
--- a/src/SingleValue.js
+++ b/src/SingleValue.js
@@ -2,8 +2,8 @@ var React = require('react');
 
 var SingleValue = React.createClass({
   propTypes: {
-    option: React.PropTypes.object,               // selected option
-    placeholder: React.PropTypes.string           // this is default value provided by React-Select based component
+    placeholder: React.PropTypes.string,           // this is default value provided by React-Select based component
+    value: React.PropTypes.object                  // selected option
   },
 
   render: function() {

From ee3b4bdd579defd3b0d188852b2160984fa13e67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kuba=20Niechcia=C5=82?= <jakub.niechcial@netguru.co>
Date: Wed, 22 Jul 2015 14:54:42 +0200
Subject: [PATCH 09/10] add example with user avatars in menu and value

This example shows how we can easily integrate other React components
thanks to customizable Option/Value component based on React Gravatar
component.
---
 examples/src/CustomOption.js      | 33 +++++++++++++++++++++++++++++++
 examples/src/CustomSingleValue.js | 30 ++++++++++++++++++++++++++++
 examples/src/app.js               | 27 +++++++++++++++++++++++++
 examples/src/data/users.js        |  5 +++++
 package.json                      |  1 +
 5 files changed, 96 insertions(+)
 create mode 100644 examples/src/CustomOption.js
 create mode 100644 examples/src/CustomSingleValue.js
 create mode 100644 examples/src/data/users.js

diff --git a/examples/src/CustomOption.js b/examples/src/CustomOption.js
new file mode 100644
index 0000000000..704f17421e
--- /dev/null
+++ b/examples/src/CustomOption.js
@@ -0,0 +1,33 @@
+var React = require('react');
+
+var Gravatar = require('react-gravatar');
+
+var Option = React.createClass({
+  propTypes: {
+    addLabelText: React.PropTypes.string,
+    className: React.PropTypes.string,
+    mouseDown: React.PropTypes.func,
+    mouseEnter: React.PropTypes.func,
+    mouseLeave: React.PropTypes.func,
+    option: React.PropTypes.object.isRequired,
+    renderFunc: React.PropTypes.func
+  },
+
+  render: function() {
+    var obj = this.props.option;
+    var size = 15;
+
+    return (
+      <div className={this.props.className}
+        onMouseEnter={this.props.mouseEnter}
+        onMouseLeave={this.props.mouseLeave}
+        onMouseDown={this.props.mouseDown}
+        onClick={this.props.mouseDown}>
+        <Gravatar email={obj.email} size={size}/>
+        {obj.value}
+      </div>
+    );
+  }
+});
+
+module.exports = Option;
diff --git a/examples/src/CustomSingleValue.js b/examples/src/CustomSingleValue.js
new file mode 100644
index 0000000000..a7dab9b1a3
--- /dev/null
+++ b/examples/src/CustomSingleValue.js
@@ -0,0 +1,30 @@
+var React = require('react');
+var Gravatar = require('react-gravatar');
+
+var SingleValue = React.createClass({
+  propTypes: {
+    placeholder: React.PropTypes.string,
+    value: React.PropTypes.object
+  },
+
+  render: function() {
+    var obj = this.props.value;
+    var size = 15;
+
+    return (
+      <div className="Select-placeholder">
+        {obj ? (
+            <div>
+              <Gravatar email={obj.email} size={size}/>
+              {obj.value}
+            </div>
+          ) : (
+            this.props.placeholder
+          )
+        }
+      </div>
+    );
+  }
+});
+
+module.exports = SingleValue;
diff --git a/examples/src/app.js b/examples/src/app.js
index e679c07818..47fc88d187 100644
--- a/examples/src/app.js
+++ b/examples/src/app.js
@@ -2,8 +2,11 @@
 
 var React = require('react');
 var Select = require('react-select');
+var GravatarOption = require('./CustomOption');
+var GravatarValue = require('./CustomSingleValue');
 
 var STATES = require('./data/states');
+var USERS = require('./data/users');
 var id = 0;
 
 function logChange(value) {
@@ -20,6 +23,29 @@ var CountrySelect = React.createClass({
 	}
 });
 
+var UsersField = React.createClass({
+	getDefaultProps: function () {
+		return {
+			searchable: true,
+			label: 'Users: (with custom option and value component)'
+		};
+	},
+	render: function() {
+
+		return (
+			<div>
+				<label>{this.props.label}</label>
+				<Select
+					onOptionLabelClick={this.onLabelClick}
+					placeholder="Select user"
+					optionComponent={GravatarOption}
+					singleValueComponent={GravatarValue}
+					options={USERS.users}/>
+			</div>
+		);
+	}
+});
+
 var StatesField = React.createClass({
 	getDefaultProps: function () {
 		return {
@@ -285,6 +311,7 @@ React.render(
 	<div>
 		<StatesField />
 		<StatesField label="States (non-searchable):" searchable={false} />
+		<UsersField />
 		<MultiSelectField label="Multiselect:"/>
 		<SelectedValuesField label="Clickable labels (labels as links):" />
 		<SelectedValuesFieldCreate label="Option Creation (tags mode):" />
diff --git a/examples/src/data/users.js b/examples/src/data/users.js
new file mode 100644
index 0000000000..d767cae07c
--- /dev/null
+++ b/examples/src/data/users.js
@@ -0,0 +1,5 @@
+exports.users = [
+    { value: 'John Smith', label: 'John Smith', email: 'john@smith.com' },
+    { value: 'Merry Jane', label: 'Merry Jane', email: 'merry@jane.com' },
+    { value: 'Stan Hoper', label: 'Stan Hoper', email: 'stan@hoper.com' }
+];
diff --git a/package.json b/package.json
index 61942e07f0..558fa05b9f 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "mocha": "^2.2.5",
     "mocha-jsdom": "^1.0.0",
     "react": ">=0.13.3",
+    "react-gravatar": "2.0.0",
     "react-component-gulp-tasks": "^0.7.0",
     "sinon": "^1.15.4",
     "sinon-chai": "^2.8.0",

From 6a69e5edb4a1ed08d989c676fc38b65bf1114a3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kuba=20Niechcia=C5=82?= <jakub.niechcial@netguru.co>
Date: Sun, 2 Aug 2015 19:26:06 +0200
Subject: [PATCH 10/10] Fix undefined val variable

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

diff --git a/src/Select.js b/src/Select.js
index 6f6a5de463..099e79f609 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -757,6 +757,7 @@ var Select = React.createClass({
 		}
 
 		if(!this.state.inputValue && (!this.props.multi || !value.length)) {
+			var val = this.state.values[0] || null;
 			if(this.props.valueRenderer && !!this.state.values.length) {
 				value.push(<Value
 						key={0}
@@ -764,7 +765,6 @@ var Select = React.createClass({
 						renderer={this.props.valueRenderer}
 						disabled={this.props.disabled} />);
 			} else {
-				var val = this.state.values[0] || null;
 				var singleValueComponent = React.createElement(this.props.singleValueComponent, {
 					key: 'placeholder',
 					value: val,