[core] Upgrade react and marked (#11689)

.size-limit.js

@@ -27,7 +27,7 @@ module.exports = [
     name: 'The size of all the modules of material-ui.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '94.5 KB',
+    limit: '94.6 KB',
   },
   {
     name: 'The main bundle of the docs',

docs/src/modules/components/withRoot.js

@@ -260,8 +260,8 @@ function findActivePage(currentPages, router) {
 
 function withRoot(Component) {
   class WithRoot extends React.Component {
-    constructor(props, context) {
-      super(props, context);
+    constructor(props) {
+      super(props);
 
       this.redux = initRedux(this.props.reduxServerState || {});
     }

docs/src/modules/utils/generateMarkdown.js

@@ -185,7 +185,7 @@ function generateProps(reactAPI) {
       return textProps;
     }
 
-    let defaultValue = '';
+    let defaultValue = '\u00a0';
 
     if (prop.defaultValue) {
       defaultValue = `<span class="prop-default">${escapeCell(

docs/src/pages/demos/dialogs/ConfirmationDialog.js

@@ -33,8 +33,8 @@ const options = [
 ];
 
 class ConfirmationDialog extends React.Component {
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
 
     this.state.value = this.props.value;
   }

docs/src/pages/demos/tables/CustomPaginationActionsTable.js

@@ -113,8 +113,8 @@ const styles = theme => ({
 });
 
 class CustomPaginationActionsTable extends React.Component {
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
 
     this.state = {
       data: [

docs/src/pages/demos/tables/EnhancedTable.js

@@ -176,8 +176,8 @@ const styles = theme => ({
 });
 
 class EnhancedTable extends React.Component {
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
 
     this.state = {
       order: 'asc',

examples/gatsby/src/withRoot.js

@@ -6,8 +6,8 @@ import getPageContext from './getPageContext';
 
 function withRoot(Component) {
   class WithRoot extends React.Component {
-    constructor(props, context) {
-      super(props, context);
+    constructor(props) {
+      super(props);
 
       this.pageContext = this.props.pageContext || getPageContext();
     }

examples/nextjs/src/withRoot.js

@@ -6,8 +6,8 @@ import getPageContext from './getPageContext';
 
 function withRoot(Component) {
   class WithRoot extends React.Component {
-    constructor(props, context) {
-      super(props, context);
+    constructor(props) {
+      super(props);
 
       this.pageContext = this.props.pageContext || getPageContext();
     }

package.json

@@ -126,10 +126,10 @@
     "postcss": "^6.0.16",
     "prettier": "^1.8.2",
     "raw-loader": "^0.5.1",
-    "react": "16.3.0",
+    "react": "16.4.0",
     "react-autosuggest": "^9.3.2",
     "react-docgen": "^3.0.0-beta10",
-    "react-dom": "16.3.0",
+    "react-dom": "16.4.0",
     "react-inspector": "^2.2.2",
     "react-number-format": "^3.0.2",
     "react-redux": "^5.0.6",

packages/material-ui-docs/package.json

@@ -36,7 +36,7 @@
     "react-dom": "^16.3.0"
   },
   "dependencies": {
-    "marked": "^0.3.12",
+    "marked": "^0.4.0",
     "nprogress": "^0.2.0",
     "prismjs": "^1.8.4"
   },

packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js

@@ -49,8 +49,6 @@ marked.setOptions({
   sanitize: false,
   smartLists: true,
   smartypants: false,
-  // prism uses the following class prefix.
-  langPrefix: 'language-',
   highlight(code, lang) {
     let language;
     switch (lang) {

packages/material-ui/src/ExpansionPanel/ExpansionPanel.js

@@ -77,8 +77,8 @@ export const styles = theme => {
 };
 
 class ExpansionPanel extends React.Component {
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
 
     this.isControlled = props.expanded != null;
     if (!this.isControlled) {

packages/material-ui/src/FormControl/FormControl.js

@@ -41,8 +41,8 @@ export const styles = theme => ({
  *  - InputLabel
  */
 class FormControl extends React.Component {
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
 
     // We need to iterate through the children and find the Input in order
     // to fully support server side rendering.

packages/material-ui/src/Input/Textarea.js

@@ -42,8 +42,8 @@ export const styles = {
  * @ignore - internal component.
  */
 class Textarea extends React.Component {
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
 
     // <Input> expects the components it renders to respond to 'value'
     // so that it can check whether they are filled.

packages/material-ui/src/Modal/Modal.js

@@ -57,8 +57,8 @@ class Modal extends React.Component {
     return null;
   }
 
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
 
     this.state = {
       exited: !this.props.open,

packages/material-ui/src/Modal/Modal.test.js

@@ -371,6 +371,9 @@ describe('<Modal />', () => {
           </Fade>
         </ModalNaked>,
       );
+      wrapper.setProps({
+        open: false,
+      });
       wrapper
         .find('Transition')
         .at(1)

packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js

@@ -10,8 +10,6 @@ import withTheme from '../styles/withTheme';
 import { getTransitionProps } from '../transitions/utils';
 import SwipeArea from './SwipeArea';
 
-const Fragment = React.Fragment || 'div';
-
 // This value is closed to what browsers are using internally to
 // trigger a native scroll.
 const UNCERTAINTY_THRESHOLD = 3; // px
@@ -27,10 +25,23 @@ export function reset() {
 }
 
 class SwipeableDrawer extends React.Component {
-  static getDerivedStateFromProps() {
-    // Reset the maybeSwiping state everytime we receive new properties.
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (typeof prevState.maybeSwiping === 'undefined') {
+      return {
+        maybeSwiping: false,
+        open: nextProps.open,
+      };
+    }
+
+    if (!nextProps.open && prevState.open) {
+      return {
+        maybeSwiping: false,
+        open: nextProps.open,
+      };
+    }
+
     return {
-      maybeSwiping: false,
+      open: nextProps.open,
     };
   }
 
@@ -326,7 +337,7 @@ class SwipeableDrawer extends React.Component {
     const { maybeSwiping } = this.state;
 
     return (
-      <Fragment>
+      <React.Fragment>
         <Drawer
           open={variant === 'temporary' && maybeSwiping ? true : open}
           variant={variant}
@@ -349,7 +360,7 @@ class SwipeableDrawer extends React.Component {
           variant === 'temporary' && (
             <SwipeArea anchor={other.anchor} swipeAreaWidth={swipeAreaWidth} />
           )}
-      </Fragment>
+      </React.Fragment>
     );
   }
 }

packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js

@@ -338,6 +338,22 @@ describe('<SwipeableDrawer />', () => {
       });
     });
 
+    it('should abort when the SwipeableDrawer is closed', () => {
+      wrapper.setProps({
+        open: true,
+      });
+      assert.strictEqual(instance.isSwiping, null);
+      fireBodyMouseEvent('touchstart', { touches: [{ pageX: 0, clientY: 0 }] });
+      assert.strictEqual(instance.isSwiping, null);
+      fireBodyMouseEvent('touchmove', { touches: [{ pageX: 10, clientY: 0 }] });
+      assert.strictEqual(instance.isSwiping, true);
+      assert.strictEqual(wrapper.state().maybeSwiping, true);
+      wrapper.setProps({
+        open: false,
+      });
+      assert.strictEqual(wrapper.state().maybeSwiping, false);
+    });
+
     it('should wait for a clear signal to determin this.isSwiping', () => {
       assert.strictEqual(instance.isSwiping, null);
       fireBodyMouseEvent('touchstart', { touches: [{ pageX: 0, clientY: 0 }] });

packages/material-ui/src/Tooltip/Tooltip.js

@@ -97,8 +97,8 @@ function flipPlacement(placement) {
 }
 
 class Tooltip extends React.Component {
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
 
     this.isControlled = props.open != null;
     if (!this.isControlled) {

packages/material-ui/src/internal/SwitchBase.js

@@ -32,8 +32,8 @@ export const styles = {
 };
 
 class SwitchBase extends React.Component {
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
 
     this.isControlled = props.checked != null;
     if (!this.isControlled) {

pages/api/app-bar.md

@@ -12,8 +12,8 @@ filename: /packages/material-ui/src/AppBar/AppBar.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The content of the component. |
-| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |   | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'default'<br> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">position</span> | <span class="prop-type">enum:&nbsp;'fixed'&nbsp;&#124;<br>&nbsp;'absolute'&nbsp;&#124;<br>&nbsp;'sticky'&nbsp;&#124;<br>&nbsp;'static'<br> | <span class="prop-default">'fixed'</span> | The positioning type. The behavior of the different options is described [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). Note: `sticky` is not universally supported and will fall back to `static` when unavailable. |
 

pages/api/avatar.md

@@ -12,14 +12,14 @@ filename: /packages/material-ui/src/Avatar/Avatar.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">alt</span> | <span class="prop-type">string |  | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. |
-| <span class="prop-name">children</span> | <span class="prop-type">node |  | Used to render icon or text elements inside the Avatar. `src` and `alt` props will not be used and no `img` will be rendered by default.<br>This can be an element, or just a string. |
-| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
+| <span class="prop-name">alt</span> | <span class="prop-type">string |   | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |   | Used to render icon or text elements inside the Avatar. `src` and `alt` props will not be used and no `img` will be rendered by default.<br>This can be an element, or just a string. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
-| <span class="prop-name">imgProps</span> | <span class="prop-type">object |  | Properties applied to the `img` element when the component is used to display an image. |
-| <span class="prop-name">sizes</span> | <span class="prop-type">string |  | The `sizes` attribute for the `img` element. |
-| <span class="prop-name">src</span> | <span class="prop-type">string |  | The `src` attribute for the `img` element. |
-| <span class="prop-name">srcSet</span> | <span class="prop-type">string |  | The `srcSet` attribute for the `img` element. |
+| <span class="prop-name">imgProps</span> | <span class="prop-type">object |   | Properties applied to the `img` element when the component is used to display an image. |
+| <span class="prop-name">sizes</span> | <span class="prop-type">string |   | The `sizes` attribute for the `img` element. |
+| <span class="prop-name">src</span> | <span class="prop-type">string |   | The `src` attribute for the `img` element. |
+| <span class="prop-name">srcSet</span> | <span class="prop-type">string |   | The `srcSet` attribute for the `img` element. |
 
 Any other properties supplied will be spread to the root element (native element).
 

pages/api/backdrop.md

@@ -12,10 +12,10 @@ filename: /packages/material-ui/src/Backdrop/Backdrop.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">invisible</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the backdrop is invisible. It can be used when rendering a popover or a custom select component. |
-| <span class="prop-name required">open *</span> | <span class="prop-type">bool |  | If `true`, the backdrop is open. |
-| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> |  | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name required">open *</span> | <span class="prop-type">bool |   | If `true`, the backdrop is open. |
+| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> |   | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be spread to the root element (native element).
 

pages/api/badge.md

@@ -12,9 +12,9 @@ filename: /packages/material-ui/src/Badge/Badge.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name required">badgeContent *</span> | <span class="prop-type">node |  | The content rendered within the badge. |
-| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The badge will be added relative to this node. |
-| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
+| <span class="prop-name required">badgeContent *</span> | <span class="prop-type">node |   | The content rendered within the badge. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |   | The badge will be added relative to this node. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'error'<br> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'span'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 

pages/api/bottom-navigation-action.md

@@ -12,11 +12,11 @@ filename: /packages/material-ui/src/BottomNavigationAction/BottomNavigationActio
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
-| <span class="prop-name">icon</span> | <span class="prop-type">node |  | The icon element. |
-| <span class="prop-name">label</span> | <span class="prop-type">node |  | The label element. |
-| <span class="prop-name">showLabel</span> | <span class="prop-type">bool |  | If `true`, the BottomNavigationAction will show its label. |
-| <span class="prop-name">value</span> | <span class="prop-type">any |  | You can provide your own value. Otherwise, we fallback to the child position index. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
+| <span class="prop-name">icon</span> | <span class="prop-type">node |   | The icon element. |
+| <span class="prop-name">label</span> | <span class="prop-type">node |   | The label element. |
+| <span class="prop-name">showLabel</span> | <span class="prop-type">bool |   | If `true`, the BottomNavigationAction will show its label. |
+| <span class="prop-name">value</span> | <span class="prop-type">any |   | You can provide your own value. Otherwise, we fallback to the child position index. |
 
 Any other properties supplied will be spread to the root element ([ButtonBase](/api/button-base)).
 

pages/api/bottom-navigation.md

@@ -12,11 +12,11 @@ filename: /packages/material-ui/src/BottomNavigation/BottomNavigation.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The content of the component. |
-| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback<br>*value:* We default to the index of the child |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |   | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback<br>*value:* We default to the index of the child |
 | <span class="prop-name">showLabels</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, all `BottomNavigationAction`s will show their labels. By default, only the selected `BottomNavigationAction` will show its label. |
-| <span class="prop-name">value</span> | <span class="prop-type">any |  | The value of the currently selected `BottomNavigationAction`. |
+| <span class="prop-name">value</span> | <span class="prop-type">any |   | The value of the currently selected `BottomNavigationAction`. |
 
 Any other properties supplied will be spread to the root element (native element).