CSS Cleanup

docs/src/app/components/component-doc.jsx

@@ -10,7 +10,10 @@ var ComponentDoc = React.createClass({
 
   propTypes: {
     code: React.PropTypes.string.isRequired,
-    desc: React.PropTypes.string,
+    desc: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.element
+    ]),
     name: React.PropTypes.string.isRequired,
     componentInfo: React.PropTypes.array.isRequired
   },

docs/src/app/components/pages/components/date-picker.jsx

@@ -69,7 +69,7 @@ var DatePickerPage = React.createClass({
 
         <DatePicker
           hintText="Landscape Dialog"
-          mode="landscape"/>
+          mode="landscape" />
 
       </ComponentDoc>
     );

docs/src/app/components/pages/components/left-nav.jsx

@@ -20,7 +20,9 @@ var LeftNavPage = React.createClass({
       { route: 'css-framework', text: 'CSS Framework' },
       { route: 'components', text: 'Components' },
       { type: MenuItem.Types.SUBHEADER, text: 'Resources' },
-      { type: MenuItem.Types.LINK, payload: 'https://github.com/callemall/material-ui', text: 'GitHub' }
+      { type: MenuItem.Types.LINK, payload: 'https://github.com/callemall/material-ui', text: 'GitHub' },
+      { text: 'Disabled', disabled: true },
+      { type: MenuItem.Types.LINK, payload: 'https://www.google.com', text: 'Disabled Link', disabled: true }
     ];
 
     var code = 
@@ -34,6 +36,16 @@ var LeftNavPage = React.createClass({
       '     payload: \'https://github.com/callemall/material-ui\', \n' +
       '     text: \'GitHub\' \n' +
       '  },\n' +
+      '  { \n' +
+      '     text: \'Disabled\', \n' +
+      '     disabled: true \n' +
+      '  },\n' +
+      '  { \n' +
+      '     type: MenuItem.Types.LINK, \n' +
+      '     payload: \'https://www.google.com\', \n' +
+      '     text: \'Disabled Link\', \n' +
+      '     disabled: true \n' +
+      '  },\n' +
       '];\n\n' +
       '//Docked Left Nav\n' +
       '<LeftNav menuItems={menuItems} />\n\n' +

docs/src/app/components/pages/components/menus.jsx

@@ -31,27 +31,27 @@ var nestedMenuItems = [
   { type: mui.MenuItem.Types.NESTED, text: 'Reports', items: [
     { payload: '1', text: 'Nested Item 1' },
     { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [
-      { payload: '1', text: 'Nested Item 3' },
-      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [
-        { payload: '1', text: 'Nested Item 5' },
-        { payload: '3', text: 'Nested Item 6' }
+      { payload: '1', text: 'Nested Item 2.1' },
+      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2.2', items: [
+        { payload: '1', text: 'Nested Item 2.2.1' },
+        { payload: '3', text: 'Nested Item 2.2.2' }
       ] },
-      { payload: '3', text: 'Nested Item 7' }
+      { payload: '3', text: 'Nested Item 2.3' }
     ] },
-    { payload: '3', text: 'Nested Item 9' },
-    { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [
-      { payload: '1', text: 'Nested Item 3' },
-      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [
-        { payload: '1', text: 'Nested Item 5' },
-        { payload: '3', text: 'Nested Item 6' }
+    { payload: '3', text: 'Nested Item 3' },
+    { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [
+      { payload: '1', text: 'Nested Item 4.1' },
+      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4.2', items: [
+        { payload: '1', text: 'Nested Item 4.2.1', disabled: true },
+        { payload: '3', text: 'Nested Item 4.2.2' }
       ] },
-      { payload: '3', text: 'Nested Item 7' }
+      { payload: '3', text: 'Nested Item 4.3' }
     ] },
-    { payload: '4', text: 'Nested Item 10' }
+    { payload: '4', text: 'Nested Item 5' }
   ] },
   { payload: '1', text: 'Audio Library'},
   { payload: '2', text: 'Settings'},
-  { payload: '3', text: 'Logout'}
+  { payload: '3', text: 'Logout', disabled: true}
 ];
 
 
@@ -160,27 +160,27 @@ var MenusPage = React.createClass({
       "    { type: mui.MenuItem.Types.NESTED, text: 'Reports', items: [\n" +
       "      { payload: '1', text: 'Nested Item 1' },\n" +
       "      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [\n" +
-      "        { payload: '1', text: 'Nested Item 3' },\n" +
-      "        { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [\n" +
-      "          { payload: '1', text: 'Nested Item 5' },\n" +
-      "          { payload: '3', text: 'Nested Item 6' }\n" +
+      "        { payload: '1', text: 'Nested Item 2.1' },\n" +
+      "        { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2.2', items: [\n" +
+      "          { payload: '1', text: 'Nested Item 2.2.1' },\n" +
+      "          { payload: '3', text: 'Nested Item 2.2.2' }\n" +
       "        ] },\n" +
-      "        { payload: '3', text: 'Nested Item 7' }\n" +
+      "        { payload: '3', text: 'Nested Item 2.3' }\n" +
       "      ] },\n" +
-      "      { payload: '3', text: 'Nested Item 9' },\n" +
-      "      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [\n" +
-      "        { payload: '1', text: 'Nested Item 3' },\n" +
-      "       { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [\n" +
-      "          { payload: '1', text: 'Nested Item 5' },\n" +
-      "          { payload: '3', text: 'Nested Item 6' }\n" +
+      "      { payload: '3', text: 'Nested Item 3' },\n" +
+      "      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [\n" +
+      "        { payload: '1', text: 'Nested Item 4.1' },\n" +
+      "        { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4.2', items: [\n" +
+      "          { payload: '1', text: 'Nested Item 4.2.1', disabled: true },\n" +
+      "          { payload: '3', text: 'Nested Item 4.2.2' }\n" +
       "        ] },\n" +
-      "        { payload: '3', text: 'Nested Item 7' }\n" +
+      "        { payload: '3', text: 'Nested Item 4.3' }\n" +
       "      ] },\n" +
-      "      { payload: '4', text: 'Nested Item 10' }\n" +
+      "      { payload: '4', text: 'Nested Item 5' }\n" +
       "    ] },\n" +
       "    { payload: '1', text: 'Audio Library'},\n" +
       "    { payload: '2', text: 'Settings'},\n" +
-      "    { payload: '3', text: 'Logout'}\n" +
+      "    { payload: '3', text: 'Logout', disabled: true}\n" +
       "  ];\n\n" +
       '<Menu menuItems={nestedMenuItems} />';
 

docs/src/app/components/pages/components/switches.jsx

@@ -22,7 +22,7 @@ var SwitchesPage = React.createClass({
       '  name="checkboxName2"\n' +
       '  value="checkboxValue2"\n' + 
       '  label="fed the dog"\n' +
-      '  defaultChecked={true} />\n' +
+      '  defaultSwitched={true} />\n' +
       '<Checkbox\n' +
       '  name="checkboxName3"\n' +
       '  value="checkboxValue3"\n' + 

docs/src/app/components/pages/components/tabs.jsx

@@ -57,6 +57,12 @@ var TabsPage = React.createClass({
       {
         name: 'Tabs Props',
         infoArray: [
+          {
+            name: 'initialSelectedIndex',
+            type: 'number',
+            header: 'optional',
+            desc: 'Specify initial visible tab index. Initial selected index is set by default to 0. If initialSelectedIndex is set but larger than the total amount of specified tabs, initialSelectedIndex will revert back to default'
+          },
           {
             name: 'tabWidth',
             type: 'number',

docs/src/app/components/pages/get-started.jsx

@@ -20,10 +20,10 @@ var GetStarted = React.createClass({
           'module.exports = MyAwesomeReactComponent;\n\n\n',
 
       customizationCode = 
-        '@import "node_modules/material-ui/dist/less/scaffolding.less";\n\n' +
+        '@import "node_modules/material-ui/src/less/scaffolding.less";\n\n' +
         '//Define a custom less file to override\n//any variables defined in scaffolding.less\n' +
         '@import "my-custom-overrides.less";\n\n' +
-        '@import "node_modules/material-ui/dist/less/components.less";',
+        '@import "node_modules/material-ui/src/less/components.less";',
 
       usageNotesCode =
         'var injectTapEventPlugin = require("react-tap-event-plugin");\n\n' +

docs/src/less/main.less

@@ -42,21 +42,6 @@ a {
 }
 
 /* App Specific Styles */
-// .mui-app-canvas {
-
-//   height: 100%;
-
-//   .mui-app-bar {
-//     .github-icon-button {
-//       float: right;
-//       margin-right: -16px;
-//       margin-top: (@app-bar-height - @icon-button-size) / 2;
-//       color: @app-bar-text-color;
-//       fill: @app-bar-text-color;
-//     }
-//   }
-// }
-
 
 .github-icon-button {
   float: right;

package.json

@@ -30,7 +30,7 @@
   "homepage": "http://material-ui.com/",
   "dependencies": {
     "react-classset": "0.0.2",
-    "react-draggable2": "^0.4.2"
+    "react-draggable2": "^0.5.1"
   },
   "peerDependencies": {
     "react": "0.12.x",
@@ -39,7 +39,7 @@
   "devDependencies": {
     "react-tools": "^0.12.2",
     "browserify": "^7.0.3",
-    "reactify": "^0.17.1",   
+    "reactify": "^0.17.1",
     "react-router": "^0.11.6"
   }
 }

src/index.js

@@ -13,8 +13,8 @@ module.exports = {
   FontIcon: require('./js/font-icon'),
   IconButton: require('./js/icon-button'),
   LeftNav: require('./js/left-nav'),
-  MenuItem: require('./js/menu-item'),
-  Menu: require('./js/menu'),
+  Menu: require('./js/menu/menu'),
+  MenuItem: require('./js/menu/menu-item'),
   Mixins: {
     Classable: require('./js/mixins/classable'),
     ClickAwayable: require('./js/mixins/click-awayable'),

src/js/before-after-wrapper.jsx

@@ -56,8 +56,6 @@ var BeforeAfterWrapper = React.createClass({
     }
   },
 
-  /** Styles */
-
   render: function() {
 
     var {
@@ -72,16 +70,14 @@ var BeforeAfterWrapper = React.createClass({
     var beforeElement, afterElement;
 
     if (this.props.beforeStyle) beforeElement = 
-      React.createElement(beforeElementType, 
-                          {style: AutoPrefix.all(beforeStyle), key: "::before"}, beforeStyle.content);
+      React.createElement(this.props.beforeElementType, 
+                          {style: AutoPrefix.all(this.props.beforeStyle), key: "::before"});
     if (this.props.afterStyle) afterElement = 
-      React.createElement(afterElementType, 
-                          {style: AutoPrefix.all(afterStyle), key: "::after"}, afterStyle.content);
+      React.createElement(this.props.afterElementType, 
+                          {style: AutoPrefix.all(this.props.afterStyle), key: "::after"});
 
     var children = [beforeElement, this.props.children, afterElement];
-
-    console.log("BAW props", this.props);
-
+
     var props = other;
     props.style = this.props.style;
 

src/js/date-picker/calendar-toolbar.jsx

@@ -91,4 +91,4 @@ var CalendarToolbar = React.createClass({
 
 });
 
-module.exports = CalendarToolbar;
+module.exports = CalendarToolbar;

src/js/date-picker/date-picker-dialog.jsx

@@ -13,7 +13,9 @@ var DatePickerDialog = React.createClass({
 
   propTypes: {
     initialDate: React.PropTypes.object,
-    onAccept: React.PropTypes.func
+    onAccept: React.PropTypes.func,
+    onShow: React.PropTypes.func,
+    onDismiss: React.PropTypes.func,
   },
 
   windowListeners: {
@@ -99,12 +101,20 @@ var DatePickerDialog = React.createClass({
     this.setState({
       isCalendarActive: true
     });
+
+    if(this.props.onShow) {
+      this.props.onShow();
+    }
   },
 
   _handleDialogDismiss: function() {
     this.setState({
       isCalendarActive: false
     });
+
+    if(this.props.onDismiss) {
+      this.props.onDismiss();
+    }
   },
 
   _handleWindowKeyUp: function(e) {

src/js/date-picker/date-picker.jsx

@@ -16,7 +16,9 @@ var DatePicker = React.createClass({
     mode: React.PropTypes.oneOf(['portrait', 'landscape', 'inline']),
     onFocus: React.PropTypes.func,
     onTouchTap: React.PropTypes.func,
-    onChange: React.PropTypes.func
+    onChange: React.PropTypes.func,
+    onShow: React.PropTypes.func,
+    onDismiss: React.PropTypes.func,
   },
 
   windowListeners: {
@@ -42,6 +44,8 @@ var DatePicker = React.createClass({
       mode,
       onFocus,
       onTouchTap,
+      onShow,
+      onDismiss,
       ...other
     } = this.props;
     var classes = this.getClasses('mui-date-picker', {
@@ -65,8 +69,9 @@ var DatePicker = React.createClass({
         <DatePickerDialog
           ref="dialogWindow"
           initialDate={this.state.dialogDate}
-          mode={this.props.mode}
-          onAccept={this._handleDialogAccept} />
+          onAccept={this._handleDialogAccept}
+          onShow={onShow}
+          onDismiss={onDismiss} />
       </div>
 
     );

src/js/dialog-window.jsx

@@ -43,6 +43,7 @@ var DialogWindow = React.createClass({
 
   componentDidMount: function() {
     this._positionDialog();
+    if (this.props.openImmediately) this.refs.dialogOverlay.preventScrolling();
   },
 
   componentDidUpdate: function(prevProps, prevState) {
@@ -107,7 +108,7 @@ var DialogWindow = React.createClass({
           {this.props.children}
           {actions}
         </Paper>
-        <Overlay show={this.state.open} onTouchTap={this._handleOverlayTouchTap} />
+        <Overlay ref="dialogOverlay" show={this.state.open} autoLockScrolling={false} onTouchTap={this._handleOverlayTouchTap} />
       </div>
     );
   },
@@ -117,22 +118,16 @@ var DialogWindow = React.createClass({
   },
 
   dismiss: function() {
-
     CssEvent.onTransitionEnd(this.getDOMNode(), function() {
-      //allow scrolling
-      var body = document.getElementsByTagName('body')[0];
-      body.style.overflow = '';
-    });
+      this.refs.dialogOverlay.allowScrolling();
+    }.bind(this));
 
     this.setState({ open: false });
     if (this.props.onDismiss) this.props.onDismiss();
   },
 
   show: function() {
-    //prevent scrolling
-    var body = document.getElementsByTagName('body')[0];
-    body.style.overflow = 'hidden';
-
+    this.refs.dialogOverlay.preventScrolling();
     this.setState({ open: true });
     if (this.props.onShow) this.props.onShow();
   },

src/js/drop-down-icon.jsx

@@ -6,8 +6,7 @@ var ClickAwayable = require('./mixins/click-awayable');
 var KeyLine = require('./utils/key-line');
 var Paper = require('./paper');
 var FontIcon = require('./font-icon');
-var Menu = require('./menu');
-var MenuItem = require('./menu-item');
+var Menu = require('./menu/menu');
 
 var DropDownIcon = React.createClass({
 

src/js/drop-down-menu.jsx

@@ -7,9 +7,8 @@ var ClickAwayable = require('./mixins/click-awayable');
 var DropDownArrow = require('./svg-icons/drop-down-arrow');
 var KeyLine = require('./utils/key-line');
 var Paper = require('./paper');
-var Menu = require('./menu');
+var Menu = require('./menu/menu');
 var ClearFix = require('./clearfix');
-
 var DropDownMenu = React.createClass({
 
   mixins: [Classable, StylePropable, ClickAwayable],