[SwipeableDrawer] Fix SSR issue on iOS

.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: '95.2 KB',
+    limit: '95.4 KB',
   },
   {
     name: 'The main bundle of the docs',

docs/src/modules/components/AppDrawer.js

@@ -118,7 +118,7 @@ function AppDrawer(props, context) {
 
   return (
     <div className={className}>
-      <Hidden lgUp={!disablePermanent}>
+      <Hidden lgUp={!disablePermanent} implementation="js">
         <SwipeableDrawer
           classes={{
             paper: classNames(classes.paper, 'algolia-drawer'),

docs/src/modules/components/HomeBackers.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import NoSSR from '@material-ui/docs/NoSSR';
+import NoSSR from '@material-ui/core/NoSSR';
 import MarkdownElement from '@material-ui/docs/MarkdownElement';
 
 const styles = theme => ({

docs/src/modules/components/HomeSteps.js

@@ -10,7 +10,7 @@ import FileDownloadIcon from '@material-ui/docs/svgIcons/FileDownload';
 import BuildIcon from '@material-ui/icons/Build'; // eslint-disable-line import/no-unresolved
 import WhatshotIcon from '@material-ui/icons/Whatshot';
 import MarkdownElement from '@material-ui/docs/MarkdownElement';
-import NoSSR from '@material-ui/docs/NoSSR';
+import NoSSR from '@material-ui/core/NoSSR';
 import Link from 'docs/src/modules/components/Link';
 
 const styles = theme => ({

docs/src/pages/demos/autocomplete/IntegrationReactSelect.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import Select from 'react-select';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import NoSSR from '@material-ui/docs/NoSSR';
+import NoSSR from '@material-ui/core/NoSSR';
 import TextField from '@material-ui/core/TextField';
 import Chip from '@material-ui/core/Chip';
 import MenuItem from '@material-ui/core/MenuItem';

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

@@ -1,3 +1,2 @@
 export { default as MarkdownElement } from './MarkdownElement';
-export { default as NoSSR } from './NoSSR';
 export { default as NProgressBar } from './NProgressBar';

packages/material-ui/src/NoSSR/NoSSR.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+export interface NoSSRProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+declare const NoSSR: React.ComponentType<NoSSRProps>;
+
+export default NoSSR;

packages/material-ui-docs/src/NoSSR/NoSSR.js → packages/material-ui/src/NoSSR/NoSSR.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import exactProp from '../utils/exactProp';
 
 const Fallback = () => null;
 
@@ -32,6 +33,8 @@ NoSSR.propTypes = {
   fallback: PropTypes.node,
 };
 
+NoSSR.propTypes = exactProp(NoSSR.propTypes);
+
 NoSSR.defaultProps = {
   fallback: <Fallback />,
 };

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

@@ -0,0 +1,53 @@
+// @flow
+
+import React from 'react';
+import { assert } from 'chai';
+import { createMount, createShallow } from '../test-utils';
+import NoSSR from './NoSSR';
+
+describe('<NoSSR />', () => {
+  let mount;
+  let shallow;
+
+  before(() => {
+    mount = createMount();
+    shallow = createShallow({ disableLifecycleMethods: true });
+  });
+
+  after(() => {
+    mount.cleanUp();
+  });
+
+  describe('server side rendering', () => {
+    it('should not render the children as the width is unknown', () => {
+      const wrapper = shallow(
+        <NoSSR>
+          <span>Hello</span>
+        </NoSSR>,
+      );
+      assert.strictEqual(wrapper.name(), 'Fallback');
+    });
+  });
+
+  describe('mounted', () => {
+    it('should render the children', () => {
+      const wrapper = mount(
+        <NoSSR>
+          <span>Hello</span>
+        </NoSSR>,
+      );
+      assert.strictEqual(wrapper.find('span').length, 1);
+    });
+  });
+
+  describe('prop: fallback', () => {
+    it('should render the fallback', () => {
+      const wrapper = shallow(
+        <NoSSR fallback="fallback">
+          <span>Hello</span>
+        </NoSSR>,
+      );
+      assert.strictEqual(wrapper.text(), 'fallback');
+    });
+  });
+});

packages/material-ui/src/NoSSR/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './NoSSR';
+export * from './NoSSR';

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

@@ -11,21 +11,21 @@ export const styles = theme => ({
     position: 'fixed',
     top: 0,
     left: 0,
-    height: '100vh',
+    bottom: 0,
     zIndex: theme.zIndex.drawer - 1,
   },
-  discoveryAnchorLeft: {
+  anchorLeft: {
     right: 'auto',
   },
-  discoveryAnchorRight: {
+  anchorRight: {
     left: 'auto',
     right: 0,
   },
-  discoveryAnchorTop: {
+  anchorTop: {
     bottom: 'auto',
     right: 0,
   },
-  discoveryAnchorBottom: {
+  anchorBottom: {
     top: 'auto',
     bottom: 0,
     right: 0,
@@ -36,13 +36,13 @@ export const styles = theme => ({
  * @ignore - internal component.
  */
 function SwipeArea(props) {
-  const { anchor, classes, swipeAreaWidth, ...other } = props;
+  const { anchor, classes, width, ...other } = props;
 
   return (
     <div
-      className={classNames(classes.root, classes[`discoveryAnchor${capitalize(anchor)}`])}
+      className={classNames(classes.root, classes[`anchor${capitalize(anchor)}`])}
       style={{
-        [isHorizontal(props) ? 'width' : 'height']: swipeAreaWidth,
+        [isHorizontal(props) ? 'width' : 'height']: width,
       }}
       {...other}
     />
@@ -62,7 +62,7 @@ SwipeArea.propTypes = {
    * The width of the left most (or right most) area in pixels where the
    * drawer can be swiped open from.
    */
-  swipeAreaWidth: PropTypes.number.isRequired,
+  width: PropTypes.number.isRequired,
 };
 
 export default withStyles(styles)(SwipeArea);

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

@@ -8,6 +8,7 @@ import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer';
 import { duration } from '../styles/transitions';
 import withTheme from '../styles/withTheme';
 import { getTransitionProps } from '../transitions/utils';
+import NoSSR from '../NoSSR';
 import SwipeArea from './SwipeArea';
 
 // This value is closed to what browsers are using internally to
@@ -332,6 +333,7 @@ class SwipeableDrawer extends React.Component {
 
   render() {
     const {
+      anchor,
       disableBackdropTransition,
       disableDiscovery,
       disableSwipeToOpen,
@@ -365,12 +367,15 @@ class SwipeableDrawer extends React.Component {
             },
             ref: this.handlePaperRef,
           }}
+          anchor={anchor}
           {...other}
         />
         {!disableDiscovery &&
           !disableSwipeToOpen &&
           variant === 'temporary' && (
-            <SwipeArea anchor={other.anchor} swipeAreaWidth={swipeAreaWidth} />
+            <NoSSR>
+              <SwipeArea anchor={anchor} width={swipeAreaWidth} />
+            </NoSSR>
           )}
       </React.Fragment>
     );

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

@@ -50,25 +50,14 @@ describe('<SwipeableDrawer />', () => {
         theme={createMuiTheme()}
       />,
     );
-    if (React.Fragment) {
-      assert.strictEqual(wrapper.childAt(0).type(), Drawer);
-      assert.strictEqual(wrapper.childAt(1).type(), SwipeArea);
-    } else {
-      assert.strictEqual(
-        wrapper
-          .childAt(0)
-          .childAt(0)
-          .type(),
-        Drawer,
-      );
-      assert.strictEqual(
-        wrapper
-          .childAt(0)
-          .childAt(1)
-          .type(),
-        SwipeArea,
-      );
-    }
+    assert.strictEqual(wrapper.childAt(0).type(), Drawer);
+    assert.strictEqual(
+      wrapper
+        .childAt(1)
+        .childAt(0)
+        .type(),
+      SwipeArea,
+    );
     wrapper.unmount();
   });
 

packages/material-ui/src/index.d.ts

@@ -141,6 +141,7 @@ export { default as MenuList } from './MenuList';
 export { default as MobileStepper } from './MobileStepper';
 export { default as Modal, ModalManager } from './Modal';
 export { default as NativeSelect } from './NativeSelect';
+export { default as NoSSR } from './NoSSR';
 export { default as Paper } from './Paper';
 export { default as Popover } from './Popover';
 export { default as Popper } from './Popper';

packages/material-ui/src/index.js

@@ -74,6 +74,7 @@ export { default as MenuList } from './MenuList';
 export { default as MobileStepper } from './MobileStepper';
 export { default as Modal, ModalManager } from './Modal';
 export { default as NativeSelect } from './NativeSelect';
+export { default as NoSSR } from './NoSSR';
 export { default as Paper } from './Paper';
 export { default as Popover } from './Popover';
 export { default as Popper } from './Popper';

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

@@ -35,7 +35,7 @@ describe('withWidth', () => {
   describe('server side rendering', () => {
     it('should not render the children as the width is unknown', () => {
       const wrapper = shallow(<EmptyWithWidth />);
-      assert.strictEqual(wrapper.type(), null, 'should render nothing');
+      assert.strictEqual(wrapper.type(), null);
     });
   });