Rename some components to new naming approach

.babelrc

@@ -1,5 +1,5 @@
 {
-  "stage": 2,
+  "stage": 1,
   "optional": ["es7.classProperties"],
   "env": {
     "development": {

.eslintrc

@@ -210,9 +210,30 @@
     "yoda": [2, "never", {
       "exceptRange": true
     }],
-    "react/jsx-uses-react": [2],
-    "react/jsx-uses-vars": [2],
-    "react/react-in-jsx-scope": [2],
-    "babel/object-shorthand": [2]
+    "babel/object-shorthand": [2],
+    "react/display-name": 0,
+    "react/jsx-boolean-value": 1,
+    "react/jsx-closing-bracket-location": 0,
+    "react/jsx-curly-spacing": 1,
+    "react/jsx-max-props-per-line": 0,
+    "react/jsx-indent-props": 0,
+    "react/jsx-no-duplicate-props": 1,
+    "react/jsx-no-undef": 1,
+    "react/jsx-pascal-case": 1,
+    "react/jsx-sort-prop-types": 1,
+    "react/jsx-sort-props": 0,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1,
+    "react/no-danger": 0,
+    "react/no-did-mount-set-state": 0,
+    "react/no-did-update-set-state": 1,
+    "react/no-multi-comp": 1,
+    "react/no-unknown-property": 1,
+    "react/prop-types": [2, {"ignore": ["onMouseDown", "onTouchStart"]}],
+    "react/react-in-jsx-scope": 1,
+    "react/require-extension": 1,
+    "react/self-closing-comp": 1,
+    "react/sort-comp": 1,
+    "react/wrap-multilines": 1
   }
 }

components/app/App.jsx

@@ -3,6 +3,7 @@ import style from './style';
 
 class App extends React.Component {
   static propTypes = {
+    children: React.PropTypes.node,
     className: React.PropTypes.string
   };
 

components/app/index.js

@@ -0,0 +1 @@
+export default from './App.jsx';

components/app_bar/AppBar.jsx

@@ -15,6 +15,7 @@ const AppBar = (props) => {
 };
 
 AppBar.propTypes = {
+  children: React.PropTypes.node,
   className: React.PropTypes.string,
   fixed: React.PropTypes.bool,
   flat: React.PropTypes.bool

components/app_bar/index.js

@@ -0,0 +1 @@
+export default from './AppBar.jsx';

components/autocomplete/Autocomplete.jsx

@@ -87,7 +87,7 @@ class Autocomplete extends React.Component {
     if (this.props.direction === 'auto') {
       const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
       const screen_height = window.innerHeight || document.documentElement.offsetHeight;
-      const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
+      const up = client.top > ((screen_height / 2) + client.height);
       return up ? 'up' : 'down';
     } else {
       return this.props.direction;
@@ -179,8 +179,8 @@ class Autocomplete extends React.Component {
 
     return (
       <div data-react-toolbox='autocomplete' className={className}>
-        { this.props.label ? <label className={style.label}>{this.props.label}</label> : null }
-        { this.renderSelected() }
+        {this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
+        {this.renderSelected()}
         <Input
           ref='input'
           {...this.props}
@@ -192,7 +192,7 @@ class Autocomplete extends React.Component {
           onKeyUp={this.handleQueryKeyUp}
           value={this.state.query}
         />
-        { this.renderSuggestions() }
+        {this.renderSuggestions()}
       </div>
     );
   }

components/autocomplete/index.js

@@ -0,0 +1 @@
+export default from './Autocomplete.jsx';

components/button/Button.jsx

@@ -8,10 +8,12 @@ import events from '../utils/events';
 class Button extends React.Component {
   static propTypes = {
     accent: React.PropTypes.bool,
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     flat: React.PropTypes.bool,
     floating: React.PropTypes.bool,
+    href: React.PropTypes.string,
     icon: React.PropTypes.string,
     label: React.PropTypes.string,
     loading: React.PropTypes.bool,

components/button/index.js

@@ -0,0 +1 @@
+export default from './Button.jsx';

components/card/Card.jsx

@@ -11,6 +11,7 @@ class Card extends React.Component {
     image: React.PropTypes.string,
     loading: React.PropTypes.bool,
     onClick: React.PropTypes.func,
+    subtitle: React.PropTypes.string,
     text: React.PropTypes.string,
     title: React.PropTypes.string,
     type: React.PropTypes.oneOf(['wide', 'event', 'image'])
@@ -49,9 +50,9 @@ class Card extends React.Component {
     if (this.props.title || this.props.image) {
       return (
         <figure className={style.figure} style={styleFigure}>
-          { this.props.title ? <h5 data-role='title'>{this.props.title}</h5> : null }
-          { this.props.subtitle ? <small data-role='subtitle'>{this.props.subtitle}</small> : null }
-          { this.props.color ? <div className={style.overflow} style={styleOverflow}></div> : null }
+          {this.props.title ? <h5 data-role='title'>{this.props.title}</h5> : null}
+          {this.props.subtitle ? <small data-role='subtitle'>{this.props.subtitle}</small> : null}
+          {this.props.color ? <div className={style.overflow} style={styleOverflow}></div> : null}
         </figure>
       );
     }
@@ -72,9 +73,9 @@ class Card extends React.Component {
         className={className}
         onMouseDown={this.handleMouseDown}
       >
-        { this.renderTitle() }
-        { this.props.text ? <p data-role='text' className={style.text}>{this.props.text}</p> : null }
-        { this.renderActions() }
+        {this.renderTitle()}
+        {this.props.text ? <p data-role='text' className={style.text}>{this.props.text}</p> : null}
+        {this.renderActions()}
         <Ripple
           ref='ripple'
           className={style.ripple}

components/card/index.js

@@ -0,0 +1 @@
+export default from './Card.jsx';

components/checkbox/Checkbox.jsx

@@ -38,6 +38,14 @@ class Checkbox extends React.Component {
     }
   };
 
+  blur () {
+    this.refs.input.blur();
+  }
+
+  focus () {
+    this.refs.input.focus();
+  }
+
   render () {
     let fieldClassName = style.field;
     let checkboxClassName = style.check;
@@ -61,18 +69,10 @@ class Checkbox extends React.Component {
         <span data-role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
           <Ripple ref='ripple' data-role='ripple' className={style.ripple} spread={3} centered />
         </span>
-        { this.props.label ? <span data-role='label' className={style.text}>{this.props.label}</span> : null }
+        {this.props.label ? <span data-role='label' className={style.text}>{this.props.label}</span> : null}
       </label>
     );
   }
-
-  blur () {
-    this.refs.input.blur();
-  }
-
-  focus () {
-    this.refs.input.focus();
-  }
 }
 
 export default Checkbox;

components/checkbox/index.js

@@ -0,0 +1 @@
+export default from './Checkbox.jsx';

components/date_picker/DatePicker.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import CalendarDialog from './dialog';
+import CalendarDialog from './DatePickerDialog';
 import events from '../utils/events';
 import Input from '../input';
 import style from './style';
@@ -42,7 +42,7 @@ class DatePicker extends React.Component {
           className={style.input}
           onMouseDown={this.handleInputMouseDown}
           label={this.props.label}
-          readOnly={true}
+          readOnly
           type='text'
           value={date}
         />

components/date_picker/DatePickerDialog.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Calendar from './calendar';
-import Dialog from '../dialog';
+import Dialog from '../Dialog';
 import style from './style';
 import time from '../utils/time';
 

components/date_picker/calendar/Calendar.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import CSSTransitionGroup from 'react-addons-css-transition-group';
+import CssTransitionGroup from 'react-addons-css-transition-group';
 import { SlideLeft, SlideRight } from '../../animations';
 import FontIcon from '../../font_icon';
 import Ripple from '../../ripple';
-import Month from './month';
+import Month from './Month';
 import time from '../../utils/time';
 import utils from '../../utils/utils';
 import style from './style';
@@ -77,13 +77,13 @@ class Calendar extends React.Component {
       props.ref = 'activeYear';
     }
 
-    return <li {...props}>{ year }</li>;
+    return <li {...props}>{year}</li>;
   }
 
   renderYears () {
     return (
       <ul ref="years" className={style.years}>
-        { utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
+        {utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
       </ul>
     );
   }
@@ -98,7 +98,7 @@ class Calendar extends React.Component {
         <FontIcon className={style.next} value='chevron-right' onMouseDown={this.incrementViewMonth}>
           <Ripple ref='rippleRight' className={style.ripple} spread={1.2} centered />
         </FontIcon>
-        <CSSTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
+        <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
           <Month
             key={this.state.viewDate.getMonth()}
             maxDate={this.props.maxDate}
@@ -106,7 +106,7 @@ class Calendar extends React.Component {
             viewDate={this.state.viewDate}
             selectedDate={this.props.selectedDate}
             onDayClick={this.handleDayClick} />
-        </CSSTransitionGroup>
+        </CssTransitionGroup>
       </div>
     );
   }
@@ -114,7 +114,7 @@ class Calendar extends React.Component {
   render () {
     return (
       <div className={style.root}>
-        { this.props.display === 'months' ? this.renderMonths() : this.renderYears() }
+        {this.props.display === 'months' ? this.renderMonths() : this.renderYears()}
       </div>
     );
   }

components/date_picker/calendar/index.js

@@ -0,0 +1 @@
+export default from './Calendar.jsx';

components/date_picker/calendar/month.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import time from '../../utils/time';
 import utils from '../../utils/utils';
-import Day from './day';
+import Day from './Day';
 import style from './style';
 
 class Month extends React.Component {
@@ -19,7 +19,7 @@ class Month extends React.Component {
 
   renderWeeks () {
     return utils.range(0, 7).map(i => {
-      return <span key={i}>{ time.getFullDayOfWeek(i).charAt(0) }</span>;
+      return <span key={i}>{time.getFullDayOfWeek(i).charAt(0)}</span>;
     });
   }
 
@@ -45,10 +45,10 @@ class Month extends React.Component {
     return (
       <div className={style.month}>
         <span className={style.title}>
-          { time.getFullMonth(this.props.viewDate)} { this.props.viewDate.getFullYear() }
+          {time.getFullMonth(this.props.viewDate)} {this.props.viewDate.getFullYear()}
         </span>
-        <div className={style.week}>{ this.renderWeeks() }</div>
-        <div className={style.days}>{ this.renderDays() }</div>
+        <div className={style.week}>{this.renderWeeks()}</div>
+        <div className={style.days}>{this.renderDays()}</div>
       </div>
     );
   }

components/date_picker/index.js

@@ -0,0 +1 @@
+export default from './DatePicker.jsx';

components/dialog/Dialog.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Button from '../button';
 import Overlay from '../overlay';
-import style from './style';
+import style from './style.scss';
 
 const Dialog = (props) => {
   const actions = props.actions.map((action, idx) => {
@@ -18,11 +18,11 @@ const Dialog = (props) => {
     <Overlay active={props.active} onClick={props.onOverlayClick}>
       <div data-react-toolbox='dialog' className={className}>
         <section role='body' className={style.body}>
-          { props.title ? <h6 className={style.title}>{props.title}</h6> : null }
-          { props.children }
+          {props.title ? <h6 className={style.title}>{props.title}</h6> : null}
+          {props.children}
         </section>
         <nav role='navigation' className={style.navigation}>
-          { actions }
+          {actions}
         </nav>
       </div>
     </Overlay>
@@ -32,6 +32,7 @@ const Dialog = (props) => {
 Dialog.propTypes = {
   actions: React.PropTypes.array,
   active: React.PropTypes.bool,
+  children: React.PropTypes.node,
   className: React.PropTypes.string,
   onOverlayClick: React.PropTypes.func,
   title: React.PropTypes.string,

components/dialog/index.js

@@ -0,0 +1 @@
+export default from './Dialog.jsx';

components/drawer/Drawer.jsx

@@ -11,7 +11,7 @@ const Drawer = (props) => {
     <Overlay active={props.active} onClick={props.onOverlayClick}>
       <div data-react-toolbox='drawer' className={className}>
         <aside className={style.content}>
-          { props.children }
+          {props.children}
         </aside>
       </div>
     </Overlay>
@@ -20,6 +20,7 @@ const Drawer = (props) => {
 
 Drawer.propTypes = {
   active: React.PropTypes.bool,
+  children: React.PropTypes.node,
   className: React.PropTypes.string,
   onOverlayClick: React.PropTypes.func,
   type: React.PropTypes.oneOf(['left', 'right'])

components/drawer/index.js

@@ -0,0 +1 @@
+export default from './Drawer.jsx';

components/dropdown/Dropdown.jsx

@@ -52,7 +52,7 @@ class Dropdown extends React.Component {
     const className = item.value === this.props.value ? style.selected : null;
     return (
       <li key={idx} className={className} onMouseDown={this.handleSelect.bind(this, item.value)}>
-        { this.props.template ? this.props.template(item) : item.label }
+        {this.props.template ? this.props.template(item) : item.label}
       </li>
     );
   }
@@ -67,14 +67,14 @@ class Dropdown extends React.Component {
 
     return (
       <div data-react-toolbox='dropdown' className={className}>
-        { this.props.label ? <label className={style.label}>{this.props.label}</label> : null }
+        {this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
 
         <ul ref='values' className={style.values}>
-          { this.props.source.map(this.renderItem.bind(this)) }
+          {this.props.source.map(this.renderItem.bind(this))}
         </ul>
 
         <div ref='value' className={style.value} onClick={this.handleClick}>
-          { this.props.template ? this.props.template(selected) : <span>{selected.label}</span> }
+          {this.props.template ? this.props.template(selected) : <span>{selected.label}</span>}
         </div>
       </div>
     );

components/dropdown/index.js

@@ -0,0 +1 @@
+export default from './Dropdown.jsx';

components/font_icon/FontIcon.jsx

@@ -12,6 +12,7 @@ const FontIcon = props => {
 };
 
 FontIcon.propTypes = {
+  children: React.PropTypes.any,
   className: React.PropTypes.string,
   value: React.PropTypes.string
 };

components/font_icon/index.js

@@ -0,0 +1 @@
+export default from './FontIcon.jsx';

components/form/Form.jsx

@@ -14,6 +14,7 @@ import TimePicker from '../time_picker';
 class Form extends React.Component {
   static propTypes = {
     attributes: React.PropTypes.array,
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     onChange: React.PropTypes.func,
     onError: React.PropTypes.func,
@@ -69,45 +70,6 @@ class Form extends React.Component {
     }
   };
 
-  render () {
-    const className = `${style.root} ${this.props.className}`;
-    const attributes = this.state.attributes.map((attribute, index) => {
-      if (attribute.type === 'autocomplete') {
-        return <Autocomplete key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'submit') {
-        return <Button key={index} {...attribute} ref='submit' onClick={this.onSubmit} type='square' />;
-      } else if (attribute.type === 'checkbox') {
-        return <Checkbox key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'date_picker') {
-        return <DatePicker key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'dropdown') {
-        return <Dropdown key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'radio_group') {
-        return <RadioGroup key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'slider') {
-        return <Slider key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'switch') {
-        return <Switch key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'time_picker') {
-        return <TimePicker key={index} {...attribute} onChange={this.onChange}/>;
-      } else {
-        return <Input key={index} {...attribute} />;
-      }
-    });
-
-    return (
-      <form
-        data-react-toolbox='form'
-        className={className}
-        onChange={this.onChange}
-        onSubmit={this.onSubmit}
-      >
-        { attributes }
-        { this.props.children }
-      </form>
-    );
-  }
-
   storage (props, value) {
     const key = `react-toolbox-form-${props.storage}`;
     if (value) {
@@ -160,6 +122,45 @@ class Form extends React.Component {
       }
     }
   }
+
+  render () {
+    const className = `${style.root} ${this.props.className}`;
+    const attributes = this.state.attributes.map((attribute, index) => {
+      if (attribute.type === 'autocomplete') {
+        return <Autocomplete key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'submit') {
+        return <Button key={index} {...attribute} ref='submit' onClick={this.onSubmit} type='square' />;
+      } else if (attribute.type === 'checkbox') {
+        return <Checkbox key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'date_picker') {
+        return <DatePicker key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'dropdown') {
+        return <Dropdown key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'radio_group') {
+        return <RadioGroup key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'slider') {
+        return <Slider key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'switch') {
+        return <Switch key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'time_picker') {
+        return <TimePicker key={index} {...attribute} onChange={this.onChange}/>;
+      } else {
+        return <Input key={index} {...attribute} />;
+      }
+    });
+
+    return (
+      <form
+        data-react-toolbox='form'
+        className={className}
+        onChange={this.onChange}
+        onSubmit={this.onSubmit}
+      >
+        {attributes}
+        {this.props.children}
+      </form>
+    );
+  }
 }
 
 export default Form;

components/form/index.js

@@ -0,0 +1 @@
+export default from './Form.jsx';

components/input/Input.jsx

@@ -54,6 +54,14 @@ class Input extends React.Component {
     if (error || counter) return <span className={style.underline}>{error}{counter}</span>;
   }
 
+  blur () {
+    this.refs.input.blur();
+  }
+
+  focus () {
+    this.refs.input.focus();
+  }
+
   render () {
     const className = classNames({
       [style.root]: true,
@@ -71,23 +79,15 @@ class Input extends React.Component {
 
     return (
       <div data-react-toolbox='input' className={className}>
-        { this.renderInput() }
-        { this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null }
+        {this.renderInput()}
+        {this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null}
         <span className={style.bar}></span>
-        { this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
-        { this.renderUnderline() }
-        { this.props.tooltip ? <Tooltip label={this.props.tooltip} delay={this.props.tooltipDelay}/> : null }
+        {this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null}
+        {this.renderUnderline()}
+        {this.props.tooltip ? <Tooltip label={this.props.tooltip} delay={this.props.tooltipDelay}/> : null}
       </div>
     );
   }
-
-  blur () {
-    this.refs.input.blur();
-  }
-
-  focus () {
-    this.refs.input.focus();
-  }
 }
 
 export default Input;

components/input/index.js

@@ -0,0 +1 @@
+export default from './Input.jsx';

components/link/Link.jsx

@@ -12,9 +12,9 @@ const Link = (props) => {
       data-react-toolbox='link'
       className={className}
     >
-      { props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null }
-      { props.label ? <abbr>{props.label}</abbr> : null }
-      { props.count && parseInt(props.count) !== 0 ? <small>{props.count}</small> : null}
+      {props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null}
+      {props.label ? <abbr>{props.label}</abbr> : null}
+      {props.count && parseInt(props.count) !== 0 ? <small>{props.count}</small> : null}
     </a>
   );
 };

components/link/index.js

@@ -0,0 +1 @@
+export default from './Link.jsx';

components/list/checkbox.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Checkbox from '../checkbox';
-import ListItemContent from './content';
+import ListItemContent from './Content';
 import style from './style';
 
 const ListCheckbox = (props) => {

components/list/content.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import style from './style';
 
-const ListItemContent = ({ caption, legend }) => (
+const ListItemContent = ({caption, legend}) => (
   <span className={style.text}>
     <span className={style.caption}>{caption}</span>
     <span className={style.legend}>{legend}</span>

components/list/index.jsx

@@ -1,7 +1,5 @@
-import List from './list';
-import ListItem from './item';
-import ListDivider from './divider';
-import ListCheckbox from './checkbox';
-import ListSubHeader from './subheader';
-
-export default {List, ListItem, ListDivider, ListCheckbox, ListSubHeader};
+export List from './List';
+export ListItem from './Item';
+export ListDivider from './Divider';
+export ListCheckbox from './Checkbox';
+export ListSubHeader from './Subheader';

components/list/item.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import FontIcon from '../font_icon';
-import ListItemContent from './content';
+import ListItemContent from './Content';
 import Ripple from '../ripple';
 import style from './style';
 
@@ -8,9 +8,11 @@ class ListItem extends React.Component {
   static propTypes = {
     avatar: React.PropTypes.string,
     caption: React.PropTypes.string.isRequired,
+    className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     leftIcon: React.PropTypes.string,
     legend: React.PropTypes.string,
+    onClick: React.PropTypes.func,
     rightIcon: React.PropTypes.string,
     ripple: React.PropTypes.bool,
     selectable: React.PropTypes.bool,
@@ -44,11 +46,11 @@ class ListItem extends React.Component {
 
     return (
       <span className={className}>
-        { this.props.leftIcon ? <FontIcon className={`${style.icon} ${style.left}`} value={this.props.leftIcon} /> : null }
-        { this.props.avatar ? <img className={style.avatar} src={this.props.avatar} /> : null }
+        {this.props.leftIcon ? <FontIcon className={`${style.icon} ${style.left}`} value={this.props.leftIcon} /> : null}
+        {this.props.avatar ? <img className={style.avatar} src={this.props.avatar} /> : null}
         <ListItemContent caption={this.props.caption} legend={this.props.legend} />
-        { this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2} /> : null }
-        { this.props.rightIcon ? <FontIcon className={`${style.icon} ${style.right}`} value={this.props.rightIcon} /> : null }
+        {this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2} /> : null}
+        {this.props.rightIcon ? <FontIcon className={`${style.icon} ${style.right}`} value={this.props.rightIcon} /> : null}
       </span>
     );
   }
@@ -56,7 +58,7 @@ class ListItem extends React.Component {
   render () {
     return (
       <li className={style['list-item']} onClick={this.handleClick} onMouseDown={this.handleMouseDown}>
-        { this.props.to ? <a href={this.props.to}>{this.renderContent()}</a> : this.renderContent() }
+        {this.props.to ? <a href={this.props.to}>{this.renderContent()}</a> : this.renderContent()}
       </li>
     );
   }

components/list/list.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import ListItem from './item';
+import ListItem from './Item';
 import style from './style';
 
 class List extends React.Component {
   static propTypes = {
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     ripple: React.PropTypes.bool,
     selectable: React.PropTypes.bool

components/list/subheader.jsx

@@ -8,7 +8,8 @@ const ListSubHeader = (props) => {
 };
 
 ListSubHeader.propTypes = {
-  caption: React.PropTypes.string
+  caption: React.PropTypes.string,
+  className: React.PropTypes.string
 };
 
 export default ListSubHeader;

components/menu/IconMenu.jsx

@@ -1,19 +1,20 @@
 import React from 'react';
 import FontIcon from '../font_icon';
-import Menu from './menu';
+import Menu from './Menu';
 import Ripple from '../ripple';
 import style from './style.icon_menu';
 
 class IconMenu extends React.Component {
   static propTypes = {
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     icon: React.PropTypes.string,
     iconRipple: React.PropTypes.bool,
     menuRipple: React.PropTypes.bool,
     onClick: React.PropTypes.func,
     onHide: React.PropTypes.func,
-    onShow: React.PropTypes.func,
     onSelect: React.PropTypes.func,
+    onShow: React.PropTypes.func,
     position: React.PropTypes.string,
     selectable: React.PropTypes.bool,
     selected: React.PropTypes.any
@@ -61,9 +62,9 @@ class IconMenu extends React.Component {
           selectable={this.props.selectable}
           selected={this.props.selected}
         >
-          { this.props.children }
+          {this.props.children}
         </Menu>
-        { this.props.iconRipple ? <Ripple ref='ripple' className={style.ripple} spread={2.4} centered /> : null }
+        {this.props.iconRipple ? <Ripple ref='ripple' className={style.ripple} spread={2.4} centered /> : null}
       </div>
     );
   }

components/menu/MenuItem.jsx

@@ -9,9 +9,10 @@ class MenuItem extends React.Component {
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     icon: React.PropTypes.string,
+    onClick: React.PropTypes.func,
     ripple: React.PropTypes.bool,
-    shortcut: React.PropTypes.string,
-    selected: React.PropTypes.bool
+    selected: React.PropTypes.bool,
+    shortcut: React.PropTypes.string
   };
 
   static defaultProps = {
@@ -46,10 +47,10 @@ class MenuItem extends React.Component {
         onClick={this.handleClick}
         onMouseDown={this.handleMouseDown}
       >
-        { this.props.icon ? <FontIcon value={this.props.icon} className={style.icon}/> : null }
+        {this.props.icon ? <FontIcon value={this.props.icon} className={style.icon}/> : null}
         <span className={style.caption}>{this.props.caption}</span>
-        { this.props.shortcut ? <small className={style.shortcut}>{this.props.shortcut}</small> : null }
-        { this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2.5} /> : null }
+        {this.props.shortcut ? <small className={style.shortcut}>{this.props.shortcut}</small> : null}
+        {this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2.5} /> : null}
       </li>
     );
   }

components/menu/index.jsx

@@ -1,11 +1,4 @@
-import Menu from './menu';
-import MenuItem from './menu_item';
-import MenuDivider from './menu_divider';
-import IconMenu from './icon_menu';
-
-export default {
-  Menu,
-  MenuItem,
-  MenuDivider,
-  IconMenu
-};
+export Menu from './Menu';
+export MenuItem from './MenuItem';
+export MenuDivider from './MenuDivider';
+export IconMenu from './IconMenu';

components/menu/menu.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import MenuItem from './menu_item';
+import MenuItem from './MenuItem';
 import { events, utils } from '../utils';
 import style from './style.menu';
 
@@ -16,6 +16,7 @@ const POSITION = {
 class Menu extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     onHide: React.PropTypes.func,
     onSelect: React.PropTypes.func,
@@ -46,15 +47,6 @@ class Menu extends React.Component {
     this.setState({ position, width, height });
   }
 
-  componentDidUpdate (prevProps, prevState) {
-    if (prevState.active && !this.state.active) {
-      if (this.props.onHide) this.props.onHide();
-      events.removeEventsFromDocument({click: this.handleDocumentClick});
-    } else if (!prevState.active && this.state.active && this.props.onShow) {
-      this.props.onShow();
-    }
-  }
-
   componentWillReceiveProps (nextProps) {
     if (this.props.position !== nextProps.position) {
       const position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
@@ -62,12 +54,6 @@ class Menu extends React.Component {
     }
   }
 
-  componentWillUpdate (prevState, nextState) {
-    if (!prevState.active && nextState.active) {
-      events.addEventsToDocument({click: this.handleDocumentClick});
-    }
-  }
-
   shouldComponentUpdate (nextProps, nextState) {
     if (!this.state.active && nextState.active && this.props.position === POSITION.AUTO) {
       const position = this.calculatePosition();
@@ -81,6 +67,21 @@ class Menu extends React.Component {
     return true;
   }
 
+  componentWillUpdate (prevState, nextState) {
+    if (!prevState.active && nextState.active) {
+      events.addEventsToDocument({click: this.handleDocumentClick});
+    }
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    if (prevState.active && !this.state.active) {
+      if (this.props.onHide) this.props.onHide();
+      events.removeEventsFromDocument({click: this.handleDocumentClick});
+    } else if (!prevState.active && this.state.active && this.props.onShow) {
+      this.props.onShow();
+    }
+  }
+
   handleDocumentClick = (event) => {
     if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
       this.setState({active: false, rippled: false});
@@ -149,21 +150,13 @@ class Menu extends React.Component {
 
     return (
       <div className={className} style={this.getRootStyle()}>
-        { this.props.outline ? <div className={style.outline} style={outlineStyle}></div> : null }
+        {this.props.outline ? <div className={style.outline} style={outlineStyle}></div> : null}
         <ul ref='menu' className={style.menu} style={this.getMenuStyle()}>
-          { this.renderItems() }
+          {this.renderItems()}
         </ul>
       </div>
     );
   }
-
-  show () {
-    this.setState({active: true});
-  }
-
-  hide () {
-    this.setState({active: false});
-  }
 }
 
 export default Menu;