BREAKING(package): require React 16.3 (#3032)

BREAKING(package): require React 16.3
Semantic-Org · Oct 24, 2018 · 6e83af2 · 6e83af2
1 parent 73f7d05
commit 6e83af2
Show file tree

Hide file tree

Showing 9 changed files with 198 additions and 151 deletions.
diff --git a/docs/src/components/Document.js b/docs/src/components/Document.js
@@ -45,17 +45,17 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
         }.js`}
       />
       <script
-        src={`https://cdnjs.cloudflare.com/ajax/libs/react/${versions.react}/umd/react${
+        src={`https://cdn.jsdelivr.net/npm/react@${versions.react}/umd/react${
           dev ? '.development' : '.production.min'
         }.js`}
       />
       <script
-        src={`https://cdnjs.cloudflare.com/ajax/libs/react-dom/${versions.react}/umd/react-dom${
+        src={`https://cdn.jsdelivr.net/npm/react-dom@${versions.react}/umd/react-dom${
           dev ? '.development' : '.production.min'
         }.js`}
       />
       <script
-        src={`https://cdnjs.cloudflare.com/ajax/libs/react-dom/${
+        src={`https://cdn.jsdelivr.net/npm/react-dom@${
           versions.react
         }/umd/react-dom-server.browser${dev ? '.development' : '.production.min'}.js`}
       />

diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
     "@semantic-ui-react/event-stack": "^3.0.0",
     "classnames": "^2.2.6",
     "keyboard-key": "^1.0.2",
-    "lodash": "^4.17.10",
+    "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
     "shallowequal": "^1.1.0"
   },
@@ -90,15 +90,15 @@
     "@babel/register": "^7.0.0",
     "@babel/standalone": "^7.1.0",
     "@mdx-js/loader": "^0.15.5",
-    "@types/react": "^16.0.18",
+    "@types/react": "^16.4.14",
     "anchor-js": "^4.1.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.4",
     "babel-plugin-filter-imports": "^2.0.3",
-    "babel-plugin-istanbul": "^5.0.1",
+    "babel-plugin-istanbul": "^5.1.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-transform-react-handled-props": "^1.0.2",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.18",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.19",
     "babel-plugin-universal-import": "^2.0.2",
     "chai": "^4.1.2",
     "chai-enzyme": "^1.0.0-beta.1",
@@ -108,8 +108,8 @@
     "dirty-chai": "^2.0.1",
     "doctoc": "^1.3.1",
     "doctrine": "^2.1.0",
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.4.0",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.5.0",
     "eslint": "^4.12.1",
     "eslint-config-airbnb": "^15.1.0",
     "eslint-plugin-import": "^2.7.0",
@@ -136,21 +136,21 @@
     "prettier": "^1.14.2",
     "puppeteer": "^1.7.0",
     "raw-loader": "^0.5.1",
-    "react": "^16.4.2",
+    "react": "^16.6.0",
     "react-ace": "^6.1.4",
     "react-docgen": "^3.0.0-rc.1",
-    "react-dom": "^16.4.2",
-    "react-hot-loader": "^4.3.6",
+    "react-dom": "^16.6.0",
+    "react-hot-loader": "^4.3.11",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
-    "react-source-render": "^1.1.3",
+    "react-source-render": "^1.2.0",
     "react-static": "^5.9.7",
     "react-static-routes": "^1.0.0",
-    "react-test-renderer": "^16.4.2",
+    "react-test-renderer": "^16.5.2",
     "react-universal-component": "^3.0.3",
     "rimraf": "^2.6.2",
     "satisfied": "^1.1.2",
-    "semantic-ui-css": "^2.4.0",
+    "semantic-ui-css": "^2.4.1",
     "simulant": "^0.2.2",
     "sinon": "^6.2.0",
     "sinon-chai": "^3.2.0",
@@ -164,8 +164,8 @@
     "webpack-dev-middleware": "^1.12.0"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
   "resolutions": {
     "babel-plugin-universal-import": "^2.0.2",

diff --git a/src/addons/Portal/Portal.js b/src/addons/Portal/Portal.js
@@ -1,7 +1,7 @@
 import keyboardKey from 'keyboard-key'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { cloneElement } from 'react'
+import React, { cloneElement, Fragment } from 'react'
 
 import {
   AutoControlledComponent as Component,
@@ -338,29 +338,30 @@ class Portal extends Component {
     const { children, mountNode, trigger } = this.props
     const { open } = this.state
 
-    return [
-      open ? (
-        <PortalInner
-          key='inner'
-          mountNode={mountNode}
-          onMount={this.handleMount}
-          onUnmount={this.handleUnmount}
-        >
-          {children}
-        </PortalInner>
-      ) : null,
-      trigger ? (
-        <Ref innerRef={this.handleTriggerRef} key='trigger'>
-          {cloneElement(trigger, {
-            onBlur: this.handleTriggerBlur,
-            onClick: this.handleTriggerClick,
-            onFocus: this.handleTriggerFocus,
-            onMouseLeave: this.handleTriggerMouseLeave,
-            onMouseEnter: this.handleTriggerMouseEnter,
-          })}
-        </Ref>
-      ) : null,
-    ]
+    return (
+      <Fragment>
+        {open && (
+          <PortalInner
+            mountNode={mountNode}
+            onMount={this.handleMount}
+            onUnmount={this.handleUnmount}
+          >
+            {children}
+          </PortalInner>
+        )}
+        {trigger && (
+          <Ref innerRef={this.handleTriggerRef}>
+            {cloneElement(trigger, {
+              onBlur: this.handleTriggerBlur,
+              onClick: this.handleTriggerClick,
+              onFocus: this.handleTriggerFocus,
+              onMouseLeave: this.handleTriggerMouseLeave,
+              onMouseEnter: this.handleTriggerMouseEnter,
+            })}
+          </Ref>
+        )}
+      </Fragment>
+    )
   }
 }
 

diff --git a/src/modules/Accordion/AccordionPanel.js b/src/modules/Accordion/AccordionPanel.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import { Component } from 'react'
+import React, { Component, Fragment } from 'react'
 
 import { createShorthandFactory, customPropTypes } from '../../lib'
 import AccordionTitle from './AccordionTitle'
@@ -42,17 +42,19 @@ class AccordionPanel extends Component {
   render() {
     const { active, content, index, title } = this.props
 
-    return [
-      AccordionTitle.create(title, {
-        autoGenerateKey: false,
-        defaultProps: { active, index, key: 'title' },
-        overrideProps: this.handleTitleOverrides,
-      }),
-      AccordionContent.create(content, {
-        autoGenerateKey: false,
-        defaultProps: { active, key: 'content' },
-      }),
-    ]
+    return (
+      <Fragment>
+        {AccordionTitle.create(title, {
+          autoGenerateKey: false,
+          defaultProps: { active, index },
+          overrideProps: this.handleTitleOverrides,
+        })}
+        {AccordionContent.create(content, {
+          autoGenerateKey: false,
+          defaultProps: { active },
+        })}
+      </Fragment>
+    )
   }
 }
 

diff --git a/src/modules/Transition/TransitionGroup.js b/src/modules/Transition/TransitionGroup.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { cloneElement } from 'react'
+import React, { cloneElement, Fragment } from 'react'
 
 import {
   customPropTypes,
@@ -41,6 +41,7 @@ export default class TransitionGroup extends React.Component {
   }
 
   static defaultProps = {
+    as: Fragment,
     animation: 'fade',
     duration: 500,
   }

diff --git a/test/specs/commonTests/isConformant.js b/test/specs/commonTests/isConformant.js
@@ -16,6 +16,7 @@ import hasValidTypings from './hasValidTypings'
  * @param {Object} [options.eventTargets={}] Map of events and the child component to target.
  * @param {Number} [options.nestingLevel=0] The nesting level of the component.
  * @param {boolean} [options.rendersChildren=false] Does this component render any children?
+ * @param {boolean} [options.rendersFragmentByDefault=false] Does this component renders React.Fragment by default?
  * @param {boolean} [options.rendersPortal=false] Does this component render a Portal powered component?
  * @param {Object} [options.requiredProps={}] Props required to render Component without errors or warnings.
  */
@@ -25,6 +26,7 @@ export default (Component, options = {}) => {
     nestingLevel = 0,
     requiredProps = {},
     rendersChildren = true,
+    rendersFragmentByDefault = false,
     rendersPortal = false,
   } = options
   const { throwError } = helpers('isConformant', Component)
@@ -91,9 +93,11 @@ export default (Component, options = {}) => {
   if (rendersChildren) {
     it('spreads user props', () => {
       const propName = 'data-is-conformant-spread-props'
-      const props = { [propName]: true }
+      const props = { as: rendersFragmentByDefault ? 'div' : undefined, [propName]: true }
 
-      shallow(<Component {...requiredProps} {...props} />).should.have.descendants(props)
+      shallow(<Component {...props} {...requiredProps} />).should.have.descendants({
+        [propName]: true,
+      })
     })
   }
 
@@ -228,7 +232,9 @@ export default (Component, options = {}) => {
             'data-simulate-event-here': true,
           }
 
-          const wrapper = shallow(<Component {...props} />)
+          const wrapper = shallow(
+            <Component as={rendersFragmentByDefault ? 'div' : undefined} {...props} />,
+          )
 
           const eventTarget = eventTargets[listenerName]
             ? wrapper.find(eventTargets[listenerName])
@@ -321,9 +327,16 @@ export default (Component, options = {}) => {
           wrapper.detach()
           document.body.removeChild(mountNode)
         } else {
-          nestedShallow(<Component {...requiredProps} className={className} />, {
-            nestingLevel,
-          }).should.have.className(className)
+          nestedShallow(
+            <Component
+              as={rendersFragmentByDefault ? 'div' : undefined}
+              {...requiredProps}
+              className={className}
+            />,
+            {
+              nestingLevel,
+            },
+          ).should.have.className(className)
         }
       })
 

diff --git a/test/specs/modules/Accordion/AccordionPanel-test.js b/test/specs/modules/Accordion/AccordionPanel-test.js
@@ -9,9 +9,6 @@ import { sandbox } from 'test/utils'
 describe('AccordionPanel', () => {
   common.isConformant(AccordionPanel, { rendersChildren: false })
 
-  // TODO: Reenable tests in future
-  // /~https://github.com/airbnb/enzyme/issues/1553
-  //
   common.implementsShorthandProp(AccordionPanel, {
     assertExactMatch: false,
     autoGenerateKey: false,
@@ -33,17 +30,17 @@ describe('AccordionPanel', () => {
     it('should passed to children', () => {
       const wrapper = shallow(<AccordionPanel active content='Content' title='Title' />)
 
-      wrapper.at(0).should.have.prop('active', true)
-      wrapper.at(1).should.have.prop('active', true)
+      wrapper.childAt(0).should.have.prop('active', true)
+      wrapper.childAt(1).should.have.prop('active', true)
     })
   })
 
   describe('index', () => {
     it('should passed to title', () => {
       const wrapper = shallow(<AccordionPanel content='Content' index={5} title='Title' />)
 
-      wrapper.at(0).should.have.prop('index', 5)
-      wrapper.at(1).should.have.not.prop('index')
+      wrapper.childAt(0).should.have.prop('index', 5)
+      wrapper.childAt(1).should.have.not.prop('index')
     })
   })
 

diff --git a/test/specs/modules/Transition/TransitionGroup-test.js b/test/specs/modules/Transition/TransitionGroup-test.js
@@ -10,7 +10,9 @@ const wrapperMount = (...args) => (wrapper = mount(...args))
 const wrapperShallow = (...args) => (wrapper = shallow(...args))
 
 describe('TransitionGroup', () => {
-  common.isConformant(TransitionGroup)
+  common.isConformant(TransitionGroup, {
+    rendersFragmentByDefault: true,
+  })
 
   beforeEach(() => {
     wrapper = undefined
@@ -72,8 +74,14 @@ describe('TransitionGroup', () => {
       wrapper.setProps({ children: [<div key='first' />, '', <div key='second' />] })
 
       wrapper.children().should.have.length(2)
-      wrapper.childAt(0).key().should.equal('.$first')
-      wrapper.childAt(1).key().should.equal('.$second')
+      wrapper
+        .childAt(0)
+        .key()
+        .should.equal('.$first')
+      wrapper
+        .childAt(1)
+        .key()
+        .should.equal('.$second')
     })
 
     it('sets visible to false when child was removed', () => {
@@ -86,9 +94,15 @@ describe('TransitionGroup', () => {
       wrapper.setProps({ children: [<div key='first' />] })
 
       wrapper.children().should.have.length(2)
-      wrapper.childAt(0).type().should.equal(Transition)
+      wrapper
+        .childAt(0)
+        .type()
+        .should.equal(Transition)
       wrapper.childAt(0).should.have.prop('visible', true)
-      wrapper.childAt(1).type().should.equal(Transition)
+      wrapper
+        .childAt(1)
+        .type()
+        .should.equal(Transition)
       wrapper.childAt(1).should.have.prop('visible', false)
     })
 
@@ -102,11 +116,16 @@ describe('TransitionGroup', () => {
       wrapper.setProps({ children: [<div key='first' />] })
 
       setTimeout(() => {
+        wrapper.update()
+
         wrapper.children().should.have.length(1)
-        // TODO: Re-enable in future
-        // wrapper.childAt(0).key().should.equal('.$first')
+        wrapper
+          .childAt(0)
+          .key()
+          .should.equal('.$first')
+
         done()
-      }, 10)
+      }, 0)
     })
   })
 })