[Portal] Second iteration on the component (#9613)

.size-limit

@@ -1,7 +1,7 @@
 [
   {
     "path": "build/index.js",
-    "limit": "91.2 KB"
+    "limit": "92.8 KB"
   },
   {
     "path": "test/size/overhead.js",

docs/scripts/buildApi.js

@@ -32,7 +32,7 @@ function buildDocs(options) {
   const { componentPath, pagesMarkdown } = options;
   const src = readFileSync(componentPath, 'utf8');
 
-  if (src.match(/@ignore - internal component\./)) {
+  if (src.match(/@ignore - internal component\./) || src.match(/@ignore - do not document\./)) {
     return;
   }
 

docs/src/modules/components/withRoot.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import find from 'lodash/find';
 import { Provider } from 'react-redux';
 import pure from 'recompose/pure';
-import wrapDisplayName from 'recompose/wrapDisplayName';
 import AppWrapper from 'docs/src/modules/components/AppWrapper';
 import initRedux from 'docs/src/modules/redux/initRedux';
 import findPages from /* preval */ 'docs/src/modules/utils/findPages';
@@ -131,6 +130,9 @@ const pages = [
         pathname: '/layout/css-in-js',
         title: 'CSS in JS',
       },
+      {
+        pathname: '/layout/portal',
+      },
     ],
   },
   {
@@ -268,10 +270,6 @@ function withRoot(BaseComponent) {
     }
   }
 
-  if (process.env.NODE_ENV !== 'production') {
-    WithRoot.displayName = wrapDisplayName(BaseComponent, 'withRoot');
-  }
-
   return WithRoot;
 }
 

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

@@ -7,7 +7,6 @@ import Dialog, {
   DialogTitle,
 } from 'material-ui/Dialog';
 import Slide from 'material-ui/transitions/Slide';
-import NoSSR from 'docs/src/modules/components/NoSSR'; // Temporary workaround for SSR Portal issue.
 
 function Transition(props) {
   return <Slide direction="up" {...props} />;
@@ -30,34 +29,32 @@ class AlertDialogSlide extends React.Component {
     return (
       <div>
         <Button onClick={this.handleClickOpen}>Slide in alert dialog</Button>
-        <NoSSR>
-          <Dialog
-            open={this.state.open}
-            transition={Transition}
-            keepMounted
-            onClose={this.handleClose}
-            aria-labelledby="alert-dialog-slide-title"
-            aria-describedby="alert-dialog-slide-description"
-          >
-            <DialogTitle id="alert-dialog-slide-title">
-              {"Use Google's location service?"}
-            </DialogTitle>
-            <DialogContent>
-              <DialogContentText id="alert-dialog-slide-description">
-                Let Google help apps determine location. This means sending anonymous location data
-                to Google, even when no apps are running.
-              </DialogContentText>
-            </DialogContent>
-            <DialogActions>
-              <Button onClick={this.handleClose} color="primary">
-                Disagree
-              </Button>
-              <Button onClick={this.handleClose} color="primary">
-                Agree
-              </Button>
-            </DialogActions>
-          </Dialog>
-        </NoSSR>
+        <Dialog
+          open={this.state.open}
+          transition={Transition}
+          keepMounted
+          onClose={this.handleClose}
+          aria-labelledby="alert-dialog-slide-title"
+          aria-describedby="alert-dialog-slide-description"
+        >
+          <DialogTitle id="alert-dialog-slide-title">
+            {"Use Google's location service?"}
+          </DialogTitle>
+          <DialogContent>
+            <DialogContentText id="alert-dialog-slide-description">
+              Let Google help apps determine location. This means sending anonymous location data to
+              Google, even when no apps are running.
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleClose} color="primary">
+              Disagree
+            </Button>
+            <Button onClick={this.handleClose} color="primary">
+              Agree
+            </Button>
+          </DialogActions>
+        </Dialog>
       </div>
     );
   }

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

@@ -65,8 +65,8 @@ class ConfirmationDialog extends React.Component {
 
     return (
       <Dialog
-        ignoreBackdropClick
-        ignoreEscapeKeyUp
+        disableBackdropClick
+        disableEscapeKeyDown
         maxWidth="xs"
         onEntering={this.handleEntering}
         aria-labelledby="confirmation-dialog-title"

docs/src/pages/demos/drawers/MiniDrawer.js

@@ -32,7 +32,7 @@ const styles = theme => ({
   },
   appBar: {
     position: 'absolute',
-    zIndex: theme.zIndex.navDrawer + 1,
+    zIndex: theme.zIndex.drawer + 1,
     transition: theme.transitions.create(['width', 'margin'], {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,

docs/src/pages/demos/modals/SimpleModal.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import Typography from 'material-ui/Typography';
+import Modal from 'material-ui/Modal';
+import Button from 'material-ui/Button';
+
+function rand() {
+  return Math.floor(Math.random() * 20) - 10;
+}
+
+function getModalStyle() {
+  const top = 50 + rand();
+  const left = 50 + rand();
+
+  return {
+    position: 'absolute',
+    width: 8 * 50,
+    top: `${top}%`,
+    left: `${left}%`,
+    transform: `translate(-${top}%, -${left}%)`,
+    border: '1px solid #e5e5e5',
+    backgroundColor: '#fff',
+    boxShadow: '0 5px 15px rgba(0, 0, 0, .5)',
+    padding: 8 * 4,
+  };
+}
+
+class SimpleModal extends React.Component {
+  state = {
+    open: false,
+  };
+
+  handleOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  render() {
+    return (
+      <div>
+        <Typography gutterBottom>Click to get the full Modal experience!</Typography>
+        <Button onClick={this.handleOpen}>Open Modal</Button>
+        <Modal
+          aria-labelledby="simple-modal-title"
+          aria-describedby="simple-modal-description"
+          open={this.state.open}
+          onClose={this.handleClose}
+        >
+          <div style={getModalStyle()}>
+            <Typography type="title" id="modal-title">
+              Text in a modal
+            </Typography>
+            <Typography type="subheading" id="simple-modal-description">
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </Typography>
+            <SimpleModal />
+          </div>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default SimpleModal;

docs/src/pages/demos/modals/modals.md

@@ -0,0 +1,24 @@
+---
+components: Modal
+---
+
+# Modals
+
+The modal component provides a solid foundation for creating dialogs,
+popovers, lightboxes, or whatever else.
+The component renders its `children` node in front of a backdrop component.
+
+The `Modal` offers a few helpful features over using just a [`Portal`](/layout/portal)
+component and some styles:
+- Manages dialog stacking when one-at-a-time just isn't enough.
+- Creates a backdrop, for disabling interaction below the modal.
+- It properly manages focus; moving to the modal content,
+  and keeping it there until the modal is closed.
+- It disables scrolling of the page content while open.
+- Adds the appropriate ARIA roles are automatically.
+
+This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
+
+## Simple modal
+
+{{"demo": "pages/demos/modals/SimpleModal.js"}}

docs/src/pages/demos/selects/DialogSelect.js

@@ -44,8 +44,8 @@ class DialogSelect extends React.Component {
       <div>
         <Button onClick={this.handleClickOpen}>Open select dialog</Button>
         <Dialog
-          ignoreBackdropClick
-          ignoreEscapeKeyUp
+          disableBackdropClick
+          disableEscapeKeyDown
           open={this.state.open}
           onClose={this.handleClose}
         >

docs/src/pages/discover-more/related-projects.md

@@ -1,17 +1,21 @@
 # Related projects
 
+Because the scope of problems Material-UI solves is limited, we try to play nicely with
+other libraries.
+We have built a carefully curated collection of libraries that worth giving a look at.
+Feel free to submit a pull-request to add more projects. We will accept them if they match our criterias.
+
 ## Material-UI Specific Projects
 
 - [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/) A data grid for Material-UI with paging, sorting, filtering, grouping and editing features.
-- [material-ui-time-picker](https://github.com/TeamWertarbyte/material-ui-time-picker) A TimePicker for Material-UI.
 - [material-ui-pickers](https://github.com/dmtrKovalenko/material-ui-pickers) Components, that implement Material Design date and time pickers for Material-UI.
+- [material-ui-time-picker](https://github.com/TeamWertarbyte/material-ui-time-picker) A TimePicker for Material-UI.
 
 ## Complementary Projects
 
 - [react-autosuggest](https://github.com/moroshko/react-autosuggest) WAI-ARIA compliant React autosuggest component.
+- [react-number-format](https://github.com/s-yadav/react-number-format) React component to format numbers in an input or as a text.
 - [react-popper](https://github.com/souporserious/react-popper) React wrapper around PopperJS.
-- [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views)
-A React component for swipeable views. Plays well with the `Tabs` component.
-- [redux-form](http://redux-form.com/6.1.1/examples/material-ui/) Manage your form state in Redux.
+- [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) A React component for swipeable views. Plays well with the `Tabs` component.
 - [react-text-mask](https://github.com/text-mask/text-mask) Input mask for React, Angular, Ember, Vue, & plain JavaScript.
-- [react-number-format](https://github.com/s-yadav/react-number-format) React component to format numbers in an input or as a text.
+- [redux-form](http://redux-form.com/6.1.1/examples/material-ui/) Manage your form state in Redux.

docs/src/pages/layout/SimplePortal.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Portal from 'material-ui/Portal';
+import Button from 'material-ui/Button';
+import Typography from 'material-ui/Typography';
+import { withStyles } from 'material-ui/styles';
+
+const styles = theme => ({
+  alert: {
+    padding: theme.spacing.unit,
+    margin: `${theme.spacing.unit}px 0`,
+    border: '1px solid',
+    borderColor: theme.palette.text.primary,
+  },
+});
+
+class SimplePortal extends React.Component {
+  state = {
+    show: false,
+  };
+
+  handleClick = () => {
+    this.setState({ show: !this.state.show });
+  };
+
+  container = null;
+
+  render() {
+    const { classes } = this.props;
+    const { show } = this.state;
+    return (
+      <div>
+        <Button onClick={this.handleClick}>{show ? 'Unmount children' : 'Mount children'}</Button>
+        <div className={classes.alert}>
+          <Typography>It looks like I will render here.</Typography>
+          {show ? (
+            <Portal container={this.container}>
+              <Typography>But I actually render here!</Typography>
+            </Portal>
+          ) : null}
+        </div>
+        <div
+          className={classes.alert}
+          ref={node => {
+            this.container = node;
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+SimplePortal.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SimplePortal);

docs/src/pages/layout/basics.md

@@ -1,8 +1,10 @@
-# Responsive UI
+# Basics
+
+## Responsive UI
 
 [Responsive layouts](https://material.io/guidelines/layout/responsive-ui.html) in Material Design adapt to any possible screen size.
 
-## Breakpoints
+### Breakpoints
 
 For optimal user experience, material design interfaces need to be able to adapt their layout at various breakpoints.
 Material-UI uses a **simplified** implementation of the original [specification](https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints).
@@ -13,3 +15,9 @@ Each breakpoint matches with a *fixed* screen width:
 - **md**, medium: 960dp or larger
 - **lg**, large: 1280dp or larger
 - **xl**, xlarge: 1920dp or larger
+
+## z-index
+
+Several Material-UI components utilize `z-index`, the CSS property that helps control layout by providing a third axis to arrange content.
+We utilize a default z-index scale in Material-UI that's been designed to properly layer drawers,
+modals, snackbars, tooltips, and more.

docs/src/pages/layout/portal.md

@@ -0,0 +1,17 @@
+---
+components: Portal
+---
+
+# Portal
+
+The portal component renders its children into a new "subtree"
+outside of current component hierarchy.
+The children of the portal component will be appended to the `container` specified.
+
+The component is used interally by our [`Modal`](/api/modal) component.
+On the server, the content won't be rendered.
+You have to wait for the client side reconciliation to see the children.
+
+## Simple Portal
+
+{{"demo": "pages/layout/SimplePortal.js"}}

examples/create-react-app-with-flow/src/components/withRoot.js

@@ -4,7 +4,6 @@ import React from 'react';
 import type { ComponentType } from 'react';
 import JssProvider from 'react-jss/lib/JssProvider';
 import { withStyles, MuiThemeProvider } from 'material-ui/styles';
-import wrapDisplayName from 'recompose/wrapDisplayName';
 import createContext from '../styles/createContext';
 
 // Apply some reset
@@ -54,10 +53,6 @@ function withRoot(Component: ComponentType<*>) {
     }
   }
 
-  if (process.env.NODE_ENV !== 'production') {
-    WithRoot.displayName = wrapDisplayName(Component, 'withRoot');
-  }
-
   return WithRoot;
 }
 

examples/create-react-app-with-typescript/typings/misc.d.ts

@@ -1,3 +1,3 @@
-declare module 'jss'
-declare module 'jss-preset-default'
-declare module 'react-jss/*'
+declare module 'jss';
+declare module 'jss-preset-default';
+declare module 'react-jss/*';