breaking(Portal): use createPortal() API

.eslintrc

@@ -25,6 +25,7 @@
     "semi": [2, "never"],
     "jsx-a11y/alt-text": 1,
     "jsx-a11y/label-has-for": 1,
+    "jsx-a11y/no-static-element-interactions": 1,
     "jsx-a11y/role-has-required-aria-props": 1,
     "import/no-dynamic-require": 0,
     "import/no-extraneous-dependencies": 0,

docs/app/Components/IconSearch/IconSearch.js

@@ -4,14 +4,7 @@ import leven from 'leven'
 import React, { Component } from 'react'
 
 import { SUI } from 'src/lib'
-import {
-  Form,
-  Grid,
-  Header,
-  Icon,
-  Message,
-  Popup,
-} from 'src'
+import { Form, Grid, Header, Icon, Message, Popup } from 'src'
 
 const gridStyle = {
   background: '#fff',
@@ -49,11 +42,7 @@ const similarityScore = (strA, strB) => {
   const aWords = strA.trim().split(' ')
   const bWords = strB.trim().split(' ')
 
-  return _.flow(
-    _.map(a => _.map(b => leven(a, b), bWords)),
-    _.map(_.min),
-    _.sum,
-  )(aWords)
+  return _.flow(_.map(a => _.map(b => leven(a, b), bWords)), _.map(_.min), _.sum)(aWords)
 }
 export default class IconSearch extends Component {
   state = { search: '', includeSimilar: true }
@@ -79,18 +68,17 @@ export default class IconSearch extends Component {
       mouseEnterDelay={1000}
       inverted
       closeOnTriggerClick={false}
-      closeOnRootNodeClick={false}
       closeOnDocumentClick={false}
       style={{ width: '8em', textAlign: 'center' }}
       size='mini'
       position='top center'
       content={this.state.copied ? 'Copied!' : 'Click to copy'}
-      trigger={(
+      trigger={
         <Grid.Column className='docs-icon-set-column' onClick={this.copy(name)}>
           <Icon name={name} size='big' />
           <p className='name'>{name}</p>
         </Grid.Column>
-      )}
+      }
     />
   )
 
@@ -113,15 +101,13 @@ export default class IconSearch extends Component {
       ))
     }
 
-    const iconSearchMatches = SUI.ICONS_AND_ALIASES
-      .filter((name) => {
-        // contains
-        if (name.indexOf(query) !== -1) return true
+    const iconSearchMatches = SUI.ICONS_AND_ALIASES.filter((name) => {
+      // contains
+      if (name.indexOf(query) !== -1) return true
 
-        // similar
-        return includeSimilar && similarityScore(name, query) <= 2
-      })
-      .map(this.renderIconColumn)
+      // similar
+      return includeSimilar && similarityScore(name, query) <= 2
+    }).map(this.renderIconColumn)
 
     // no results
     if (iconSearchMatches.length === 0) {
@@ -131,7 +117,9 @@ export default class IconSearch extends Component {
             <Message
               info
               icon='search'
-              content={`There is no icon name or alias ${includeSimilar ? 'similar' : 'that contains'} to "${query}".`}
+              content={`There is no icon name or alias ${
+                includeSimilar ? 'similar' : 'that contains'
+              } to "${query}".`}
               header='No Results'
             />
           </Grid.Column>
@@ -140,7 +128,11 @@ export default class IconSearch extends Component {
     }
 
     // results
-    return <Grid columns={5} doubling>{iconSearchMatches}</Grid>
+    return (
+      <Grid columns={5} doubling>
+        {iconSearchMatches}
+      </Grid>
+    )
   }
 
   render() {
@@ -153,10 +145,14 @@ export default class IconSearch extends Component {
 
           <Message>
             Semantic includes a complete port of{' '}
-            <a href='http://fontawesome.io/whats-new/' rel='noopener noreferrer' target='_blank'>Font Awesome 4.7.0</a>
-            {' '}designed by{' '}
-            <a href='http://www.twitter.com/davegandy' rel='noopener noreferrer'>Dave Gandy</a> for its standard icon
-            set.
+            <a href='http://fontawesome.io/whats-new/' rel='noopener noreferrer' target='_blank'>
+              Font Awesome 4.7.0
+            </a>{' '}
+            designed by{' '}
+            <a href='http://www.twitter.com/davegandy' rel='noopener noreferrer'>
+              Dave Gandy
+            </a>{' '}
+            for its standard icon set.
           </Message>
 
           <Form>
@@ -176,9 +172,7 @@ export default class IconSearch extends Component {
             </Form.Group>
           </Form>
         </Grid.Column>
-        <Grid.Column textAlign='center'>
-          {this.renderIcons()}
-        </Grid.Column>
+        <Grid.Column textAlign='center'>{this.renderIcons()}</Grid.Column>
       </Grid>
     )
   }

docs/app/Examples/modules/Modal/Variations/ModalExampleCloseConfig.js

@@ -4,14 +4,14 @@ import { Button, Modal } from 'semantic-ui-react'
 class ModalExampleCloseConfig extends Component {
   state = { open: false }
 
-  closeConfigShow = (closeOnEscape, closeOnRootNodeClick) => () => {
-    this.setState({ closeOnEscape, closeOnRootNodeClick, open: true })
+  closeConfigShow = (closeOnEscape, closeOnDimmerClick) => () => {
+    this.setState({ closeOnEscape, closeOnDimmerClick, open: true })
   }
 
   close = () => this.setState({ open: false })
 
   render() {
-    const { open, closeOnEscape, closeOnRootNodeClick } = this.state
+    const { open, closeOnEscape, closeOnDimmerClick } = this.state
 
     return (
       <div>
@@ -21,12 +21,10 @@ class ModalExampleCloseConfig extends Component {
         <Modal
           open={open}
           closeOnEscape={closeOnEscape}
-          closeOnRootNodeClick={closeOnRootNodeClick}
+          closeOnDimmerClick={closeOnDimmerClick}
           onClose={this.close}
         >
-          <Modal.Header>
-            Delete Your Account
-          </Modal.Header>
+          <Modal.Header>Delete Your Account</Modal.Header>
           <Modal.Content>
             <p>Are you sure you want to delete your account</p>
           </Modal.Content>