Merge branch 'fix/broken-touch-scroll-on-nested-menu-items' into cust…

…om-build

* fix/broken-touch-scroll-on-nested-menu-items:
  [Menu] Ignore loosing focus on click away for item with menu items
  [examples] Remove browserify
  Fixes mui#7559 (mui#7560)
  [docs] Update ROADMAP (mui#7543)
  [Table] Row click on empty cell to not die in IE (mui#7520)
  Internal(EnhancedSwitch): fix checked prop (mui#7499)
  fix: comment typo (mui#7523)
  [Docs] Add v0.18.7 to versions.json
  v0.18.7
  [CHANGELOG] Prepare v0.18.7
  [ListItem] Fix triggers onTouchTap when disabled (mui#7486)
  [Popover] Scroll Container issue (mui#7472)
  [Table] Don't set height to tbody (mui#7484)
  docs: fix typo in Avatar readme (mui#7478)

CHANGELOG.md

@@ -1,5 +1,31 @@
 ## HEAD
 
+## 0.18.7
+###### _Jul 23, 2017_
+
+Big thanks to the 11 contributors who made this release possible.
+As always, we are focusing on bug fixes.
+
+##### Component Fixes / Enhancements
+
+- [Table] Don't set height to tbody (#7484) @GAumala
+- [Popover] Scroll Container issue (#7472) @gorkemcnr
+- [ListItem] Fix triggers onTouchTap when disabled (#7486) @jonashartwig
+- [Chip] Fix warning when using onRequestDelete (#7407) @leMaik
+- [Datepicker] Option to select year first (#7367) @chrisjbrown
+- [List] Fix clicking "Toggle Nested Items" icon triggering left checkbox toggle (#7171) @hwo411
+
+##### Docs
+
+- [ROADMAP] Update the release plan for v1: fasteeer (#7428) @oliviertassinari
+- [docs] Update ROADMAP.md with v1-alpha branch (#7345) @whyvez
+- [docs] Update CONTRIBUTING.md with v1-alpha branch (#7371) @akshaynaik404
+- [docs] Fix typo in Avatar (#7478) @brianlheim
+
+##### Core
+
+N.A
+
 ## 0.18.6
 ###### _Jul 4, 2017_
 

ROADMAP.md

@@ -15,14 +15,14 @@ The ecosystem has evolved a lot since then, we have also learned a lot.
 taking advantage of this knowledge to address long-standing issues.
 Expect various **breaking changes**.
 
-The core team is now helping him in the [v1-alpha](https://github.com/callemall/material-ui/tree/v1-alpha) branch.
-If you are interested in following our progress or if you want to help us reach that goal faster, you can have a look at the two following milestones:
-- [v1.0.0-beta](https://github.com/callemall/material-ui/milestone/22)
+The core team is now helping him in the [v1-beta](https://github.com/callemall/material-ui/tree/v1-beta) branch.
+If you are interested in following our progress or if you want to help us reach that goal faster, you can have a look at the following milestones:
+- ~~[v1.0.0-beta](https://github.com/callemall/material-ui/milestone/22)~~ - complete!
 - [v1.0.0-prerelease](https://github.com/callemall/material-ui/milestone/14)
 
-## Q&A with the v1-alpha branch
+## Q&A with the v1-beta branch
 
-The `v1-alpha` branch has become more mature.
+The `v1-beta` branch has become more mature.
 We think that it's a good time to communicate more on this effort.
 We have a lot of people opening PRs and getting them closed, this is not a good thing.
 This Q&A tries to answer some of your questions.
@@ -61,7 +61,7 @@ Yes, it does. You can have a look at [this presentation](https://github.com/oliv
 
 ## What does it mean to migrate a component? Should we discuss each one of them first?
 
-Migrating a component to the `v1-alpha` branch isn't just a style migration.
+Migrating a component to the `v1-beta` branch isn't just a style migration.
 We think that it's our best opportunity to clear the API and improve the implementation of the components.
 @nathanmarks ended up fixing a lot of long standing issues in the process.
 
@@ -74,24 +74,24 @@ We should answer the following questions:
 
 That conversation could start on one of the following [issues](https://github.com/callemall/material-ui/issues?q=is%3Aissue+is%3Aopen+label%3ARefactoring+label%3Anext).
 
-### How do I know if a component still needs to be migrated `v1-alpha`?
+### How do I know if a component still needs to be migrated `v1-beta`?
 
-We have [Github project](https://github.com/callemall/material-ui/projects/1) to **coordinate** the work toward the `v1-alpha` release.
-You can check the *Component to migrate* column to know the ones needing to be migrated to `v1-alpha`.
+We have [Github project](https://github.com/callemall/material-ui/projects/1) to **coordinate** the work toward the `v1-beta` release.
+You can check the *Component to migrate* column to know the ones needing to be migrated to `v1-beta`.
 
-### How do I start migrating components to the `v1-alpha` branch?
+### How do I start migrating components to the `v1-beta` branch?
 
 Once we agree on the migration plan you're gonna have to get your hands dirty.
 That's really up to you. At least, you gonna have to
-- clone the `v1-alpha` branch
+- clone the `v1-beta` branch
 - install the npm dependencies
 - play with the documentation site
 - write some documentation
 - write some tests (unit, integration, visual)
 
-### When do we intend to release `v1-alpha`?
+### When do we intend to release `v1-beta`?
 
-We don't have an ETA for the release of the `v1-alpha` branch,
+We don't have an ETA for the release of the `v1-beta` branch,
 however, we are going to try to follow this plan:
 
 1. We completely address the styling issue before moving from *alpha* to [*beta*](https://github.com/callemall/material-ui/milestone/22).

docs/src/app/components/pages/components/Avatar/README.md

@@ -1,5 +1,5 @@
 ## Avatar
 
-Avatars can be used to represent people or object.
+Avatars can be used to represent people or objects.
 
 ### Examples

docs/src/app/components/pages/components/Checkbox/ExampleSimple.js

@@ -14,41 +14,63 @@ const styles = {
   },
 };
 
-const CheckboxExampleSimple = () => (
-  <div style={styles.block}>
-    <Checkbox
-      label="Simple"
-      style={styles.checkbox}
-    />
-    <Checkbox
-      checkedIcon={<ActionFavorite />}
-      uncheckedIcon={<ActionFavoriteBorder />}
-      label="Custom icon"
-      style={styles.checkbox}
-    />
-    <Checkbox
-      checkedIcon={<Visibility />}
-      uncheckedIcon={<VisibilityOff />}
-      label="Custom icon of different shapes"
-      style={styles.checkbox}
-    />
-    <Checkbox
-      label="Disabled unchecked"
-      disabled={true}
-      style={styles.checkbox}
-    />
-    <Checkbox
-      label="Disabled checked"
-      checked={true}
-      disabled={true}
-      style={styles.checkbox}
-    />
-    <Checkbox
-      label="Label on the left"
-      labelPosition="left"
-      style={styles.checkbox}
-    />
-  </div>
-);
+class CheckboxExampleSimple extends React.Component {
+  state = {
+    checked: false,
+  }
+
+  updateCheck() {
+    this.setState((oldState) => {
+      return {
+        checked: !oldState.checked,
+      };
+    });
+  }
+
+  render() {
+    return (
+      <div style={styles.block}>
+        <Checkbox
+          label="Simple"
+          style={styles.checkbox}
+        />
+        <Checkbox
+          label="Simple with controlled value"
+          checked={this.state.checked}
+          onCheck={this.updateCheck.bind(this)}
+          style={styles.checkbox}
+        />
+        <Checkbox
+          checkedIcon={<ActionFavorite />}
+          uncheckedIcon={<ActionFavoriteBorder />}
+          label="Custom icon"
+          style={styles.checkbox}
+        />
+        <Checkbox
+          checkedIcon={<Visibility />}
+          uncheckedIcon={<VisibilityOff />}
+          label="Custom icon of different shapes"
+          style={styles.checkbox}
+        />
+        <Checkbox
+          label="Disabled unchecked"
+          disabled={true}
+          style={styles.checkbox}
+        />
+        <Checkbox
+          label="Disabled checked"
+          checked={true}
+          disabled={true}
+          style={styles.checkbox}
+        />
+        <Checkbox
+          label="Label on the left"
+          labelPosition="left"
+          style={styles.checkbox}
+        />
+      </div>
+    );
+  }
+}
 
 export default CheckboxExampleSimple;

docs/src/www/versions.json

@@ -1,5 +1,6 @@
 [
   "HEAD",
+  "v0.18.7",
   "v0.18.6",
   "v0.18.5",
   "v0.18.4",

package.json

@@ -2,7 +2,7 @@
   "name": "material-ui-build",
   "private": true,
   "author": "Material-UI Team",
-  "version": "0.18.6",
+  "version": "0.18.7",
   "description": "React Components that Implement Google's Material Design.",
   "main": "./src/index.js",
   "keywords": [

src/List/ListItem.js

@@ -584,6 +584,7 @@ class ListItem extends Component {
       onMouseLeave, // eslint-disable-line no-unused-vars
       onNestedListToggle, // eslint-disable-line no-unused-vars
       onTouchStart, // eslint-disable-line no-unused-vars
+      onTouchTap, // eslint-disable-line no-unused-vars
       rightAvatar,
       rightIcon,
       rightIconButton,
@@ -729,6 +730,7 @@ class ListItem extends Component {
               onTouchStart={this.handleTouchStart}
               onTouchEnd={this.handleTouchEnd}
               onTouchTap={this.handleTouchTap}
+              disabled={disabled}
               ref={(node) => this.button = node}
               style={Object.assign({}, styles.root, style)}
             >

src/Menu/Menu.js

@@ -19,7 +19,7 @@ function getStyles(props, context) {
 
   const styles = {
     root: {
-      // Nested div bacause the List scales x faster than it scales y
+      // Nested div because the List scales x faster than it scales y
       zIndex: muiTheme.zIndex.menu,
       maxHeight: maxHeight,
       overflowY: maxHeight ? 'auto' : null,
@@ -235,6 +235,17 @@ class Menu extends Component {
       return;
     }
 
+    const {focusIndex} = this.state;
+    if (focusIndex < 0) {
+      return;
+    }
+
+    const filteredChildren = this.getFilteredChildren(this.props.children);
+    const focusedItem = filteredChildren[focusIndex];
+    if (focusedItem.props.menuItems && focusedItem.props.menuItems.length > 0) {
+      return;
+    }
+
     this.setFocusIndex(event, -1, false);
   };
 

src/Menu/Menu.spec.js

@@ -257,4 +257,27 @@ describe('<Menu />', () => {
       assert.deepEqual(wrapper.state().value, ['item2', 'item3']);
     });
   });
+
+  describe('Nested menu', () => {
+    it('should ignore loosing focus on click away for item with menu items', () => {
+      const menuItems = [<MenuItem />, <MenuItem />];
+
+      const wrapper = mountWithContext(
+        <Menu className="menu">
+          <MenuItem className="item1" />
+          <MenuItem className="item2" menuItems={menuItems} />
+        </Menu>
+      );
+
+      wrapper.find('.item1').simulate('touchTap');
+      assert.strictEqual(wrapper.state('focusIndex'), 0);
+      document.body.dispatchEvent(new window.Event('mouseup', {bubbles: true}));
+      assert.strictEqual(wrapper.state('focusIndex'), -1);
+
+      wrapper.find('.item2').simulate('touchTap');
+      assert.strictEqual(wrapper.state('focusIndex'), 1);
+      document.body.dispatchEvent(new window.Event('mouseup', {bubbles: true}));
+      assert.strictEqual(wrapper.state('focusIndex'), 1);
+    });
+  });
 });

src/Popover/Popover.js

@@ -67,6 +67,14 @@ class Popover extends Component {
      * If true, the popover is visible.
      */
     open: PropTypes.bool,
+    /**
+     * Represents the parent scrollable container.
+     * It can be an element or a string like `window`.
+     */
+    scrollableContainer: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string,
+    ]),
     /**
      * Override the inline-styles of the root element.
      */
@@ -101,6 +109,7 @@ class Popover extends Component {
     canAutoPosition: true,
     onRequestClose: () => {},
     open: false,
+    scrollableContainer: 'window',
     style: {
       overflowY: 'auto',
     },
@@ -192,6 +201,7 @@ class Popover extends Component {
       style,
       targetOrigin,
       useLayerForClickAway, // eslint-disable-line no-unused-vars
+      scrollableContainer, // eslint-disable-line no-unused-vars
       ...other
     } = this.props;
 
@@ -304,8 +314,8 @@ class Popover extends Component {
       targetPosition = this.applyAutoPositionIfNeeded(anchor, target, targetOrigin, anchorOrigin, targetPosition);
     }
 
-    targetEl.style.top = `${Math.max(0, targetPosition.top)}px`;
-    targetEl.style.left = `${Math.max(0, targetPosition.left)}px`;
+    targetEl.style.top = `${targetPosition.top}px`;
+    targetEl.style.left = `${targetPosition.left}px`;
     targetEl.style.maxHeight = `${window.innerHeight}px`;
   };
 
@@ -395,7 +405,7 @@ class Popover extends Component {
     return (
       <div style={styles.root}>
         <EventListener
-          target="window"
+          target={this.props.scrollableContainer}
           onScroll={this.handleScroll}
           onResize={this.handleResize}
         />

src/Table/Table.js

@@ -186,7 +186,6 @@ class Table extends Component {
         onRowHoverExit: this.onRowHoverExit,
         onRowSelection: this.onRowSelection,
         selectable: this.props.selectable,
-        style: Object.assign({height: this.props.height}, base.props.style),
       }
     );
   }

src/Table/TableBody.js

@@ -291,7 +291,9 @@ class TableBody extends Component {
 
     if (this.props.selectable) {
       // Prevent text selection while selecting rows.
-      window.getSelection().removeAllRanges();
+      if (window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects.length > 0) {
+        window.getSelection().removeAllRanges();
+      }
       this.processRowSelection(event, rowNumber);
     }
   };

src/internal/EnhancedSwitch.js

@@ -111,6 +111,10 @@ class EnhancedSwitch extends Component {
     isKeyboardFocused: false,
   };
 
+  componentWillMount() {
+    this.componentWillReceiveProps(this.props);
+  }
+
   componentDidMount() {
     const inputNode = this.refs.checkbox;
     if ((!this.props.switched || inputNode.checked !== this.props.switched) &&
@@ -253,6 +257,7 @@ class EnhancedSwitch extends Component {
     const {
       name,
       value,
+      checked, // eslint-disable-line no-unused-vars
       iconStyle,
       inputStyle,
       inputType,
@@ -335,6 +340,7 @@ class EnhancedSwitch extends Component {
         style={prepareStyles(Object.assign(styles.input, inputStyle))}
         name={name}
         value={value}
+        checked={this.state.switched}
         disabled={disabled}
         onBlur={this.handleBlur}
         onFocus={this.handleFocus}