Resolved merge conflicts and nit in #1613

examples/src/components/Multiselect.js

@@ -27,6 +27,7 @@ var MultiSelectField = createClass({
 			crazy: false,
 			stayOpen: false,
 			value: [],
+			rtl: false,
 		};
 	},
 	handleSelectChange (value) {
@@ -38,6 +39,11 @@ var MultiSelectField = createClass({
 			[e.target.name]: e.target.checked,
 		});
 	},
+	toggleRtl (e) {
+		let rtl = e.target.checked;
+		this.setState({ rtl });
+	},
+
 	render () {
 		const { crazy, disabled, stayOpen, value } = this.state;
 		const options = crazy ? WHY_WOULD_YOU : FLAVOURS;
@@ -51,6 +57,7 @@ var MultiSelectField = createClass({
 					onChange={this.handleSelectChange}
 					options={options}
 					placeholder="Select your favourite(s)"
+					rtl={this.state.rtl}
 					simpleValue
 					value={value}
 				/>
@@ -68,6 +75,10 @@ var MultiSelectField = createClass({
 						<input type="checkbox" className="checkbox-control" name="stayOpen" checked={stayOpen} onChange={this.toggleCheckbox}/>
 						<span className="checkbox-label">Stay open when an Option is selected</span>
 					</label>
+					<label className="checkbox">
+						<input type="checkbox" className="checkbox-control" name="rtl" checked={this.state.rtl} onChange={this.toggleCheckbox} />
+						<span className="checkbox-label">rtl</span>
+					</label>
 				</div>
 			</div>
 		);

examples/src/components/States.js

@@ -24,18 +24,17 @@ var StatesField = createClass({
 			searchable: this.props.searchable,
 			selectValue: 'new-south-wales',
 			clearable: true,
+			rtl: false,
 		};
 	},
 	switchCountry (e) {
 		var newCountry = e.target.value;
-		console.log('Country changed to ' + newCountry);
 		this.setState({
 			country: newCountry,
 			selectValue: null,
 		});
 	},
 	updateValue (newValue) {
-		console.log('State changed to ' + newValue);
 		this.setState({
 			selectValue: newValue,
 		});
@@ -53,22 +52,39 @@ var StatesField = createClass({
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/States.js">(Source)</a></h3>
-				<Select id="state-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
+					id="state-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}
+					rtl={this.state.rtl}
+					searchable={this.state.searchable}
+				/>
+				<button style={{ marginTop: '15px' }} type="button" onClick={this.focusStateSelect}>Focus Select</button>
+				<div className="checkbox-list">
 
-				<div style={{ marginTop: 14 }}>
-					<button type="button" onClick={this.focusStateSelect}>Focus Select</button>
-					<label className="checkbox" style={{ marginLeft: 10 }}>
+					<label className="checkbox">
 						<input type="checkbox" className="checkbox-control" name="searchable" checked={this.state.searchable} onChange={this.toggleCheckbox}/>
 						<span className="checkbox-label">Searchable</span>
 					</label>
-					<label className="checkbox" style={{ marginLeft: 10 }}>
+					<label className="checkbox">
 						<input type="checkbox" className="checkbox-control" name="disabled" checked={this.state.disabled} onChange={this.toggleCheckbox}/>
 						<span className="checkbox-label">Disabled</span>
 					</label>
-					<label className="checkbox" style={{ marginLeft: 10 }}>
+					<label className="checkbox">
 						<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">
+						<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">

less/control.less

@@ -112,6 +112,10 @@
 	.Select-arrow-zone:hover > .Select-arrow {
 		border-top-color: @select-arrow-color-hover;
 	}
+	&.Select--rtl {
+		direction: rtl;
+		text-align: right;
+	}
 }
 
 // base
@@ -255,6 +259,12 @@
 	text-align: center;
 	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 {

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 {

scss/control.scss

@@ -99,6 +99,10 @@
 	.Select-arrow-zone:hover > .Select-arrow {
 		border-top-color: $select-arrow-color-hover;
 	}
+	&.Select--rtl {
+		direction: rtl;
+		text-align: right;
+	}
 }
 
 // base
@@ -251,6 +255,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 {

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 {

src/Select.js

@@ -781,7 +781,7 @@ class Select extends React.Component {
 				[this._instancePrefix + '-list']: isOpen,
 			});
 			return (
-				
+
 				<div
 					{...divProps}
 					role="combobox"
@@ -1005,6 +1005,7 @@ class Select extends React.Component {
 			'is-pseudo-focused': this.state.isPseudoFocused,
 			'is-searchable': this.props.searchable,
 			'has-value': valueArray.length,
+			'Select--rtl': this.props.rtl,
 		});
 
 		let removeMessage = null;
@@ -1113,6 +1114,7 @@ Select.propTypes = {
 	placeholder: stringOrNode,            // field placeholder, displayed when there's no value
 	required: PropTypes.bool,             // applies HTML5 required attribute when needed
 	resetValue: PropTypes.any,            // value to use when you clear the control
+	rtl: PropTypes.bool, 									// set to true in order to use react-select in right-to-left direction
 	scrollMenuIntoView: PropTypes.bool,   // boolean to enable the viewport to shift so that the full menu fully visible when engaged
 	searchable: PropTypes.bool,           // whether to enable searching feature or not
 	simpleValue: PropTypes.bool,          // pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
@@ -1162,6 +1164,7 @@ Select.defaultProps = {
 	pageSize: 5,
 	placeholder: 'Select...',
 	required: false,
+	rtl: false,
 	scrollMenuIntoView: true,
 	searchable: true,
 	simpleValue: false,

test/Select-test.js

@@ -4060,4 +4060,14 @@ describe('Select', () => {
 			expect(warn, 'was called once');
 		});
 	});
+	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'
+				});
+			});
+		});
+	});
 });