From da6a5f75e989afb84359c7630553f7147903ada5 Mon Sep 17 00:00:00 2001
From: Dekel <dekelb@gmail.com>
Date: Tue, 21 Mar 2017 18:32:53 +0200
Subject: [PATCH 1/3] added rtl support

---
 examples/src/components/Multiselect.js | 12 +++++++++++-
 examples/src/components/States.js      |  7 ++++++-
 less/control.less                      |  9 +++++++++
 less/multi.less                        | 16 +++++++++++++++-
 src/Select.js                          |  2 ++
 5 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/examples/src/components/Multiselect.js b/examples/src/components/Multiselect.js
index 3142e75ef9..7122b1aba5 100644
--- a/examples/src/components/Multiselect.js
+++ b/examples/src/components/Multiselect.js
@@ -25,6 +25,7 @@ var MultiSelectField = React.createClass({
 			crazy: false,
 			options: FLAVOURS,
 			value: [],
+			rtl: false,
 		};
 	},
 	handleSelectChange (value) {
@@ -41,11 +42,16 @@ var MultiSelectField = React.createClass({
 			options: crazy ? WHY_WOULD_YOU : FLAVOURS,
 		});
 	},
+	toggleRtl (e) {
+		let rtl = e.target.checked;
+		this.setState({ rtl });
+	},
+
 	render () {
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label}</h3>
-				<Select multi simpleValue disabled={this.state.disabled} value={this.state.value} placeholder="Select your favourite(s)" options={this.state.options} onChange={this.handleSelectChange} />
+				<Select multi simpleValue disabled={this.state.disabled} value={this.state.value} placeholder="Select your favourite(s)" options={this.state.options} onChange={this.handleSelectChange} rtl={this.state.rtl} />
 
 				<div className="checkbox-list">
 					<label className="checkbox">
@@ -56,6 +62,10 @@ var MultiSelectField = React.createClass({
 						<input type="checkbox" className="checkbox-control" checked={this.state.crazy} onChange={this.toggleChocolate} />
 						<span className="checkbox-label">I don't like Chocolate (disabled the option)</span>
 					</label>
+					<label className="checkbox">
+						<input type="checkbox" className="checkbox-control" checked={this.state.rtl} onChange={this.toggleRtl} />
+						<span className="checkbox-label">rtl</span>
+					</label>
 				</div>
 			</div>
 		);
diff --git a/examples/src/components/States.js b/examples/src/components/States.js
index 8103c2eb90..01c8e54734 100644
--- a/examples/src/components/States.js
+++ b/examples/src/components/States.js
@@ -22,6 +22,7 @@ var StatesField = React.createClass({
 			searchable: this.props.searchable,
 			selectValue: 'new-south-wales',
 			clearable: true,
+			rtl: false,
 		};
 	},
 	switchCountry (e) {
@@ -51,7 +52,7 @@ var StatesField = React.createClass({
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label}</h3>
-				<Select ref="stateSelect" autofocus options={options} simpleValue clearable={this.state.clearable} name="selected-state" disabled={this.state.disabled} value={this.state.selectValue} onChange={this.updateValue} searchable={this.state.searchable} />
+				<Select ref="stateSelect" autofocus options={options} simpleValue clearable={this.state.clearable} name="selected-state" disabled={this.state.disabled} value={this.state.selectValue} onChange={this.updateValue} searchable={this.state.searchable} rtl={this.state.rtl} />
 
 				<div style={{ marginTop: 14 }}>
 					<button type="button" onClick={this.focusStateSelect}>Focus Select</button>
@@ -67,6 +68,10 @@ var StatesField = React.createClass({
 						<input type="checkbox" className="checkbox-control" name="clearable" checked={this.state.clearable} onChange={this.toggleCheckbox}/>
 						<span className="checkbox-label">Clearable</span>
 					</label>
+					<label className="checkbox" style={{ marginLeft: 10 }}>
+						<input type="checkbox" className="checkbox-control" name="rtl" checked={this.state.rtl} onChange={this.toggleCheckbox}/>
+						<span className="checkbox-label">rtl</span>
+					</label>
 				</div>
 				<div className="checkbox-list">
 					<label className="checkbox">
diff --git a/less/control.less b/less/control.less
index 6a5ced741d..c71b0b2d49 100644
--- a/less/control.less
+++ b/less/control.less
@@ -40,6 +40,10 @@
 		pointer-events: none;
 		opacity: 0.35;
 	}
+	&.Select-rtl {
+		direction: rtl;
+		text-align: right;
+	}
 }
 
 // base
@@ -231,6 +235,11 @@
 	vertical-align: middle;
 	width: (@select-arrow-width * 5);
 	padding-right: @select-arrow-width;
+
+	.Select-rtl & {
+		padding-right: 0;
+		padding-left: @select-arrow-width;
+	}
 }
 
 .Select-arrow {
diff --git a/less/multi.less b/less/multi.less
index ee5449fe4e..faad188eaf 100644
--- a/less/multi.less
+++ b/less/multi.less
@@ -14,6 +14,10 @@
 		margin-left: @select-padding-horizontal;
 		padding: 0;
 	}
+	&.Select-rtl .Select-input {
+		margin-left: 0;
+		margin-right: @select-padding-horizontal;
+	}
 
 	// reduce margin once there is value
 	&.has-value .Select-input {
@@ -80,7 +84,17 @@
 			background-color: @select-item-border-color;
 		}
 	}
-
+	&.Select-rtl {
+		.Select-value {
+		  margin-left: 0;
+		  margin-right: @select-item-gutter;
+		}
+		.Select-value-icon {
+			border-right: none;
+			border-left: 1px solid @select-item-border-color-fb; /* Fallback color for IE 8 */
+			border-left: 1px solid @select-item-border-color;
+		}
+	}
 }
 
 .Select--multi.is-disabled {
diff --git a/src/Select.js b/src/Select.js
index cbb8024a3d..37974a658a 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -103,6 +103,7 @@ const Select = React.createClass({
 		placeholder: stringOrNode,                  // field placeholder, displayed when there's no value
 		required: React.PropTypes.bool,             // applies HTML5 required attribute when needed
 		resetValue: React.PropTypes.any,            // value to use when you clear the control
+		rtl: React.PropTypes.bool,                  // set to true in order to use react-select in right-to-left direction
 		scrollMenuIntoView: React.PropTypes.bool,   // boolean to enable the viewport to shift so that the full menu fully visible when engaged
 		searchable: React.PropTypes.bool,           // whether to enable searching feature or not
 		simpleValue: React.PropTypes.bool,          // pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
@@ -1084,6 +1085,7 @@ const Select = React.createClass({
 			'is-pseudo-focused': this.state.isPseudoFocused,
 			'is-searchable': this.props.searchable,
 			'has-value': valueArray.length,
+			'Select-rtl': this.props.rtl,
 		});
 
 		let removeMessage = null;

From 9ba05e6eff75d046f5b945c6e9b4e8c39185a490 Mon Sep 17 00:00:00 2001
From: Dekel <dekelb@gmail.com>
Date: Fri, 26 May 2017 21:32:36 +0300
Subject: [PATCH 2/3] rtl to scss files

---
 scss/control.scss |  9 +++++++++
 scss/multi.scss   | 14 ++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/scss/control.scss b/scss/control.scss
index 360a32f9ac..b3ee47f85f 100644
--- a/scss/control.scss
+++ b/scss/control.scss
@@ -27,6 +27,10 @@
 		cursor: default;
 		pointer-events: none;
 	}
+	&.Select-rtl {
+		direction: rtl;
+		text-align: right;
+	}
 }
 
 // base
@@ -230,6 +234,11 @@
 	vertical-align: middle;
 	width: ($select-arrow-width * 5);
 	padding-right: $select-arrow-width;
+
+	.Select-rtl & {
+		padding-right: 0;
+		padding-left: $select-arrow-width;
+	}
 }
 
 .Select-arrow {
diff --git a/scss/multi.scss b/scss/multi.scss
index fce8369012..48d6c799af 100644
--- a/scss/multi.scss
+++ b/scss/multi.scss
@@ -14,6 +14,10 @@
 		margin-left: $select-padding-horizontal;
 		padding: 0;
 	}
+	&.Select-rtl .Select-input {
+		margin-left: 0;
+		margin-right: $select-padding-horizontal;
+	}
 
 	// reduce margin once there is value
 	&.has-value .Select-input {
@@ -75,6 +79,16 @@
 		}
 	}
 
+	&.Select-rtl {
+		.Select-value {
+		  margin-left: 0;
+		  margin-right: $select-item-gutter;
+		}
+		.Select-value-icon {
+			border-right: none;
+			border-left: 1px solid $select-item-border-color;
+		}
+	}
 }
 
 .Select--multi.is-disabled {

From 1d390267068a11745aff6557a1c06448f41ba1c9 Mon Sep 17 00:00:00 2001
From: Dekel <dekelb@gmail.com>
Date: Sun, 11 Jun 2017 01:52:58 +0300
Subject: [PATCH 3/3] added rtl prop test

---
 test/Select-test.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/test/Select-test.js b/test/Select-test.js
index d8df285436..53ee46d48f 100644
--- a/test/Select-test.js
+++ b/test/Select-test.js
@@ -3893,4 +3893,15 @@ describe('Select', () => {
 			expect(input, 'to equal', document.activeElement);
 		});
 	});
+
+	describe('rtl', () => {
+		describe('className', () => {
+			it('assigns the className Select-rtl to the outer-most element', () => {
+				var instance = createControl({ rtl: true });
+				expect(ReactDOM.findDOMNode(instance), 'to have attributes', {
+					class: 'Select-rtl'
+				});
+			});
+		});
+	});
 });