BREAKING(package): update to React 16

.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/src/components/ComponentDoc/ComponentDocLinks.js

@@ -33,7 +33,7 @@ export default class ComponentDocLinks extends PureComponent {
         <List.Item
           content={
             <code>
-              <a href={ghLink} target='_blank'>
+              <a href={ghLink} target='_blank' rel='noopener noreferrer'>
                 {repoPath}
               </a>
             </code>
@@ -43,7 +43,7 @@ export default class ComponentDocLinks extends PureComponent {
         {suiLink && (
           <List.Item
             content={
-              <a href={suiLink} target='_blank'>
+              <a href={suiLink} target='_blank' rel='noopener noreferrer'>
                 Semantic UI {displayName} Docs
               </a>
             }

docs/src/components/IconSearch/IconSearch.js

@@ -115,7 +115,6 @@ export default class IconSearch extends Component {
       mouseEnterDelay={1000}
       inverted
       closeOnTriggerClick={false}
-      closeOnRootNodeClick={false}
       closeOnDocumentClick={false}
       style={{ width: '8em', textAlign: 'center' }}
       size='mini'

docs/src/examples/modules/Accordion/Advanced/AccordionExampleForm.js

@@ -3,10 +3,10 @@ import { Accordion, Button, Form, Segment } from 'semantic-ui-react'
 
 const panels = [
   {
+    key: 'details',
     title: 'Optional Details',
     content: {
       as: Form.Input,
-      key: 'content',
       label: 'Maiden Name',
       placeholder: 'Maiden Name',
     },

docs/src/examples/modules/Accordion/Advanced/AccordionExampleNested.js

@@ -2,8 +2,8 @@ import React from 'react'
 import { Accordion } from 'semantic-ui-react'
 
 const level1Panels = [
-  { title: 'Level 1A', content: 'Level 1A Contents' },
-  { title: 'Level 1B', content: 'Level 1B Contents' },
+  { key: 'panel-1a', title: 'Level 1A', content: 'Level 1A Contents' },
+  { key: 'panel-ba', title: 'Level 1B', content: 'Level 1B Contents' },
 ]
 
 const Level1Content = (
@@ -14,8 +14,8 @@ const Level1Content = (
 )
 
 const level2Panels = [
-  { title: 'Level 2A', content: 'Level 2A Contents' },
-  { title: 'Level 2B', content: 'Level 2B Contents' },
+  { key: 'panel-2a', title: 'Level 2A', content: 'Level 2A Contents' },
+  { key: 'panel-2b', title: 'Level 2B', content: 'Level 2B Contents' },
 ]
 
 const Level2Content = (
@@ -26,8 +26,8 @@ const Level2Content = (
 )
 
 const rootPanels = [
-  { title: 'Level 1', content: { content: Level1Content, key: 'content-1' } },
-  { title: 'Level 2', content: { content: Level2Content, key: 'content-2' } },
+  { key: 'panel-1', title: 'Level 1', content: { content: Level1Content } },
+  { key: 'panel-2', title: 'Level 2', content: { content: Level2Content } },
 ]
 
 const AccordionExampleNested = () => <Accordion defaultActiveIndex={0} panels={rootPanels} styled />

docs/src/examples/modules/Accordion/Advanced/AccordionExampleShorthand.js

@@ -4,13 +4,12 @@ import React from 'react'
 import { Accordion, Label, Message } from 'semantic-ui-react'
 
 const panels = _.times(3, i => ({
+  key: `panel-${i}`,
   title: {
     content: <Label color='blue' content={faker.lorem.sentence()} />,
-    key: `title-${i}`,
   },
   content: {
     content: <Message info header={faker.lorem.sentence()} content={faker.lorem.paragraph()} />,
-    key: `content-${i}`,
   },
 }))
 

docs/src/examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js

@@ -3,20 +3,23 @@ import { Accordion } from 'semantic-ui-react'
 
 const panels = [
   {
+    key: 'what-is-dog',
     title: 'What is a dog?',
     content: [
       'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome',
       'guest in many households across the world.',
     ].join(' '),
   },
   {
+    key: 'kinds-of-dogs',
     title: 'What kinds of dogs are there?',
     content: [
       'There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog',
       'that they find to be compatible with their own lifestyle and desires from a companion.',
     ].join(' '),
   },
   {
+    key: 'acquire-dog',
     title: 'How do you acquire a dog?',
     content: {
       content: (
@@ -33,7 +36,6 @@ const panels = [
           </p>
         </div>
       ),
-      key: 'content-dog',
     },
   },
 ]

docs/src/examples/modules/Accordion/Usage/AccordionExampleActiveIndex.js

@@ -3,7 +3,8 @@ import _ from 'lodash'
 import React, { Component } from 'react'
 import { Accordion, Segment } from 'semantic-ui-react'
 
-const panels = _.times(3, () => ({
+const panels = _.times(3, i => ({
+  key: `panel-${i}`,
   title: faker.lorem.sentence(),
   content: faker.lorem.paragraphs(),
 }))

docs/src/examples/modules/Accordion/Usage/AccordionExampleExclusive.js

@@ -3,7 +3,8 @@ import _ from 'lodash'
 import React from 'react'
 import { Accordion } from 'semantic-ui-react'
 
-const panels = _.times(3, () => ({
+const panels = _.times(3, i => ({
+  key: `panel-${i}`,
   title: faker.lorem.sentence(),
   content: faker.lorem.paragraphs(),
 }))

docs/src/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,7 +21,8 @@ class ModalExampleCloseConfig extends Component {
         <Modal
           open={open}
           closeOnEscape={closeOnEscape}
-          closeOnRootNodeClick={closeOnRootNodeClick}
+          closeOnDimmerClick={closeOnDimmerClick}
+          onClose={this.close}
         >
           <Modal.Header>Delete Your Account</Modal.Header>
           <Modal.Content>

index.d.ts

@@ -8,6 +8,10 @@ export {
   PaginationItemProps,
 } from './dist/commonjs/addons/Pagination/PaginationItem'
 export { default as Portal, PortalProps } from './dist/commonjs/addons/Portal'
+export {
+  default as PortalInner,
+  PortalInnerProps,
+} from './dist/commonjs/addons/Portal/PortalInner'
 export { default as Radio, RadioProps } from './dist/commonjs/addons/Radio'
 export { default as Ref, RefProps } from './dist/commonjs/addons/Ref'
 export {
@@ -212,12 +216,15 @@ export { default as Accordion, AccordionProps } from './dist/commonjs/modules/Ac
 export {
   default as AccordionAccordion,
   AccordionAccordionProps,
-  AccordionPanelProps,
 } from './dist/commonjs/modules/Accordion/AccordionAccordion'
 export {
   default as AccordionContent,
   AccordionContentProps,
 } from './dist/commonjs/modules/Accordion/AccordionContent'
+export {
+  default as AccordionPanel,
+  AccordionPanelProps,
+} from './dist/commonjs/modules/Accordion/AccordionPanel'
 export {
   default as AccordionTitle,
   AccordionTitleProps,

package.json

@@ -160,7 +160,7 @@
     "webpack-hot-middleware": "^2.18.2"
   },
   "peerDependencies": {
-    "react": ">=0.14.0 <= 16",
-    "react-dom": ">=0.14.0 <= 16"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   }
 }

src/addons/Portal/Portal.d.ts

@@ -1,14 +1,12 @@
 import * as React from 'react'
+import { default as PortalInner } from './PortalInner'
 
 export interface PortalProps {
   [key: string]: any
 
   /** Primary content. */
   children?: React.ReactNode
 
-  /** Additional classes. */
-  className?: string
-
   /** Controls whether or not the portal should close on a click outside. */
   closeOnDocumentClick?: boolean
 
@@ -22,14 +20,6 @@ export interface PortalProps {
    */
   closeOnPortalMouseLeave?: boolean
 
-  /**
-   * Controls whether or not the portal should close on a click on the portal background.
-   * NOTE: This differs from closeOnDocumentClick:
-   * - DocumentClick - any click not within the portal
-   * - RootNodeClick - a click not within the portal but within the portal's wrapper
-   */
-  closeOnRootNodeClick?: boolean
-
   /** Controls whether or not the portal should close on blur of the trigger. */
   closeOnTriggerBlur?: boolean
 
@@ -98,13 +88,19 @@ export interface PortalProps {
   /** Controls whether or not the portal should open when mousing over the trigger. */
   openOnTriggerMouseEnter?: boolean
 
-  /** Controls whether the portal should be prepended to the mountNode instead of appended. */
-  prepend?: boolean
-
   /** Element to be rendered in-place where the portal is defined. */
   trigger?: React.ReactNode
+
+  /**
+   * Called when componentDidMount.
+   *
+   * @param {HTMLElement} node - Referred node.
+   */
+  triggerRef?: (node: HTMLElement) => void
 }
 
-declare const Portal: React.ComponentClass<PortalProps>
+declare class Portal extends React.Component<PortalProps, {}> {
+  static Inner: typeof PortalInner
+}
 
 export default Portal