Suggestions direction and width based in :root

components/autocomplete/index.jsx

@@ -3,7 +3,7 @@
 import { addons } from 'react/addons';
 import utils from '../utils';
 import Input from '../input';
-import style from './style_test';
+import style from './style';
 
 export default React.createClass({
   mixins: [addons.PureRenderMixin],
@@ -35,12 +35,17 @@ export default React.createClass({
       dataSource: this._indexDataSource(this.props.dataSource),
       focus: false,
       query: '',
-      values: new Map()
+      up: false,
+      values: new Map(),
+      width: undefined
     };
   },
 
   componentDidMount () {
     if (this.props.value) this.setValue(this.props.value);
+    this.setState({
+      width: React.findDOMNode(this).getBoundingClientRect().width
+    });
   },
 
   componentWillReceiveProps (props) {
@@ -75,8 +80,15 @@ export default React.createClass({
   },
 
   handleFocus () {
+    let client = event.target.getBoundingClientRect();
+    let screen_height = window.innerHeight || document.documentElement.offsetHeight;
+
     this.refs.suggestions.getDOMNode().scrollTop = 0;
-    this.setState({active: '', focus: true});
+    this.setState({
+      active: '',
+      up: client.top > ((screen_height / 2) + client.height),
+      focus: true
+    });
   },
 
   handleBlur () {
@@ -179,9 +191,12 @@ export default React.createClass({
 
   render () {
     let containerClassName = style.container;
+    if (this.props.className) containerClassName += ` ${this.props.className}`;
+
     let suggestionsClassName = style.suggestions;
     if (this.state.focus) suggestionsClassName += ` ${style.focus}`;
-    if (this.props.className) containerClassName += ` ${this.props.className}`;
+    if (this.state.up) suggestionsClassName += ` ${style.up}`;
+    let suggestionsStyle = {width: this.state.width};
 
     return (
       <div data-react-toolbox='autocomplete' className={containerClassName}>
@@ -201,6 +216,7 @@ export default React.createClass({
           className={suggestionsClassName}
           onMouseDown={this.handleSelect}
           onMouseOver={this.handleHover}
+          style={suggestionsStyle}
         >
           {this.renderSuggestions()}
         </ul>

components/autocomplete/style.scss

@@ -1,11 +1,11 @@
 @import "../variables";
 @import "../mixins";
-
 $autocomplete-value-background: unquote("rgb(#{$color-primary})");
 $autocomplete-value-color: unquote("rgb(#{$color-primary-contrast})");
 $autocomplete-label-color: unquote("rgb(#{$color-primary})");
 $autocomplete-suggestions-background: unquote("rgb(#{$color-white})");
 $autocomplete-suggestion-active-background: unquote("rgb(#{$palette-grey-200})");
+$autocomplete-max-height-suggestions: 40vh;
 
 .container {
   position: relative;
@@ -14,7 +14,7 @@ $autocomplete-suggestion-active-background: unquote("rgb(#{$palette-grey-200})")
 .label {
   display: inline-block;
   margin-bottom: $unit * .5;
-  font-size: 1.3 * $unit;
+  font-size: $font-size-tiny;
   color: $autocomplete-label-color;
 }
 
@@ -22,7 +22,7 @@ $autocomplete-suggestion-active-background: unquote("rgb(#{$palette-grey-200})")
   display: inline-block;
   padding: $unit * .5 $unit;
   margin: 0 $unit $unit 0;
-  font-size: 1.4 * $unit;
+  font-size: $font-size-small;
   color: $autocomplete-value-color;
   cursor: pointer;
   background-color: $autocomplete-value-background;
@@ -33,34 +33,32 @@ $autocomplete-suggestion-active-background: unquote("rgb(#{$palette-grey-200})")
   position: absolute;
   z-index: 2;
   width: 100%;
-  max-height: 50vh;
-  margin-top: - $input-margin-bottom;
   overflow-x: hidden;
   overflow-y: scroll;
   background-color: $autocomplete-suggestions-background;
   transition-timing-function: $animation-curve-default;
-  transition-duration: .2s;
-  transition-property: height, box-shadow, opacity, transform;
-
+  transition-duration: $animation-duration;
+  transition-property: max-height;
+  box-shadow: $zdepth-shadow-1;
   &:not(.focus) {
-    height: 0;
-    box-shadow: none;
-    opacity: 0;
-    transform: translateY(- $unit);
+    max-height: 0;
+    visibility: hidden;
   }
-
   &.focus {
-    height: auto;
-    box-shadow: $zdepth-shadow-1;
-    opacity: 1;
-    transform: translateY(0%);
+    max-height: $autocomplete-max-height-suggestions;
+    visibility: visible;
+  }
+  &:not(.up) {
+    margin-top: - $input-margin-bottom;
+  }
+  &.up {
+    bottom: $input-margin-bottom;
   }
 }
 
 .suggestion {
   padding: $unit;
   cursor: pointer;
-
   &.active {
     background-color: $autocomplete-suggestion-active-background;
   }