added rtl support

examples/src/components/Multiselect.js

@@ -27,6 +27,7 @@ var MultiSelectField = createClass({
 			crazy: false,
 			options: FLAVOURS,
 			value: [],
+			rtl: false,
 		};
 	},
 	handleSelectChange (value) {
@@ -43,11 +44,16 @@ var MultiSelectField = 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">
@@ -58,6 +64,10 @@ var MultiSelectField = 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>
 		);

examples/src/components/States.js

@@ -24,6 +24,7 @@ var StatesField = createClass({
 			searchable: this.props.searchable,
 			selectValue: 'new-south-wales',
 			clearable: true,
+			rtl: false,
 		};
 	},
 	switchCountry (e) {
@@ -53,7 +54,7 @@ var StatesField = 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>
@@ -69,6 +70,10 @@ var StatesField = 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">

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 {

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

@@ -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 {

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

@@ -106,6 +106,7 @@ const Select = createClass({
 		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
@@ -1089,6 +1090,7 @@ const Select = createClass({
 			'is-pseudo-focused': this.state.isPseudoFocused,
 			'is-searchable': this.props.searchable,
 			'has-value': valueArray.length,
+			'Select-rtl': this.props.rtl,
 		});
 
 		let removeMessage = null;

test/Select-test.js

@@ -3916,4 +3916,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'
+				});
+			});
+		});
+	});
 });