Merge branch 'master' into switch-transition

Author: dimensi

.eslintrc.yml

@@ -3,6 +3,9 @@ parser: babel-eslint
 extends:
   - jason/react
   - plugin:jsx-a11y/recommended
+settings:
+  react:
+    version: detect
 env:
   node: true
   browser: true

CHANGELOG.md

@@ -1,3 +1,47 @@
+# [4.0.0](https://github.com/reactjs/react-transition-group/compare/v3.0.0...v4.0.0) (2019-04-16)
+
+
+### Features
+
+* support esm via package.json routes ([#488](https://github.com/reactjs/react-transition-group/issues/488)) ([6337bf5](https://github.com/reactjs/react-transition-group/commit/6337bf5)), closes [#77](https://github.com/reactjs/react-transition-group/issues/77)
+
+
+### BREAKING CHANGES
+
+* in environments where esm is supported importing from commonjs requires explicitly adding the `.default` after `require()` when resolving to the esm build
+
+# [3.0.0](https://github.com/reactjs/react-transition-group/compare/v2.9.0...v3.0.0) (2019-04-15)
+
+
+### Features
+
+* use stable context API ([#471](https://github.com/reactjs/react-transition-group/issues/471)) ([aee4901](https://github.com/reactjs/react-transition-group/commit/aee4901)), closes [#429](https://github.com/reactjs/react-transition-group/issues/429)
+
+
+### BREAKING CHANGES
+
+* use new style react context
+
+```diff
+// package.json
+-"react": "^15.0.0",
++"react": "^16.6.0",
+-"react-dom": "^15.0.0", 
++"react-dom": "^16.6.0", 
+```
+
+# [2.9.0](https://github.com/reactjs/react-transition-group/compare/v2.8.0...v2.9.0) (2019-04-06)
+
+
+### Features
+
+* **CSSTransition:** add "done" class for appear ([fe3c156](https://github.com/reactjs/react-transition-group/commit/fe3c156)), closes [#383](https://github.com/reactjs/react-transition-group/issues/383) [#327](https://github.com/reactjs/react-transition-group/issues/327) [#327](https://github.com/reactjs/react-transition-group/issues/327)
+
+
+### Reverts
+
+* bump semantic release dependencies ([1bdcaec](https://github.com/reactjs/react-transition-group/commit/1bdcaec))
+
 # [2.8.0](https://github.com/reactjs/react-transition-group/compare/v2.7.1...v2.8.0) (2019-04-02)
 
 

package.json

@@ -1,15 +1,19 @@
 {
   "name": "react-transition-group",
-  "version": "2.8.0",
+  "version": "4.0.0",
   "description": "A react component toolset for managing animations",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "scripts": {
     "test": "npm run lint && npm run testonly",
     "testonly": "jest --verbose",
     "tdd": "jest --watch",
-    "build": "babel src --out-dir lib --delete-dir-on-start && npm run build:dist && cp README.md LICENSE ./lib",
+    "build": "rimraf lib && yarn build:cjs && yarn build:esm && yarn build:pick && yarn build:dist && cp README.md LICENSE ./lib",
     "build:docs": "npm -C www run build",
-    "build:dist": "cross-env BABEL_ENV=esm yarn rollup -c",
+    "build:cjs": "babel src --out-dir lib/cjs",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --out-dir lib/esm",
+    "build:pick": "cherry-pick --name=react-transition-group --cwd=lib --input-dir=../src --cjs-dir=cjs --esm-dir=esm",
+    "build:dist": "cross-env BABEL_ENV=esm rollup -c",
     "bootstrap": "yarn && yarn --cwd www",
     "lint": "eslint src test",
     "release": "release",
@@ -50,57 +54,55 @@
     ]
   },
   "peerDependencies": {
-    "react": ">=15.0.0",
-    "react-dom": ">=15.0.0"
+    "react": ">=16.6.0",
+    "react-dom": ">=16.6.0"
   },
   "dependencies": {
-    "dom-helpers": "^3.3.1",
+    "dom-helpers": "^3.4.0",
     "loose-envify": "^1.4.0",
-    "prop-types": "^15.6.2",
-    "react-lifecycles-compat": "^3.0.4"
+    "prop-types": "^15.6.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.1.0",
-    "@babel/core": "^7.1.0",
+    "@babel/cli": "^7.4.3",
+    "@babel/core": "^7.4.3",
     "@semantic-release/changelog": "^3.0.0",
     "@semantic-release/git": "^7.0.4",
     "@semantic-release/github": "^5.0.5",
     "@semantic-release/npm": "^5.0.4",
     "@storybook/addon-actions": "^4.1.4",
     "@storybook/react": "^4.1.4",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^9.0.0",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.2",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.18",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.5",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-preset-jason": "^6.0.1",
+    "cherry-pick": "^0.3.0",
     "cross-env": "^5.2.0",
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.5.0",
-    "eslint": "^5.6.0",
-    "eslint-config-jason": "^4.1.0",
-    "eslint-config-prettier": "^3.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-prettier": "^2.6.2",
-    "eslint-plugin-react": "^7.11.1",
-    "husky": "^1.0.0-rc.15",
-    "jest": "^23.6.0",
-    "prettier": "^1.14.3",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
-    "react-test-renderer": "^16.5.2",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.12.0",
+    "eslint": "^5.16.0",
+    "eslint-config-jason": "^5.0.0",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
+    "husky": "^1.3.1",
+    "jest": "^24.7.1",
+    "prettier": "^1.16.4",
+    "react": "~16.6.3",
+    "react-dom": "~16.6.3",
     "release-script": "^1.0.2",
-    "rimraf": "^2.6.1",
-    "rollup": "^1.1.0",
-    "rollup-plugin-babel": "^4.3.0",
-    "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-node-resolve": "^4.0.0",
-    "rollup-plugin-replace": "^2.1.0",
+    "rimraf": "^2.6.3",
+    "rollup": "^1.9.0",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^9.3.4",
+    "rollup-plugin-node-resolve": "^4.2.0",
+    "rollup-plugin-replace": "^2.1.1",
     "rollup-plugin-size-snapshot": "^0.8.0",
     "rollup-plugin-terser": "^4.0.2",
     "semantic-release": "^15.9.16",
-    "semantic-release-alt-publish-dir": "^2.1.1",
+    "semantic-release-alt-publish-dir": "^3.0.0",
     "travis-deploy-once": "^5.0.8"
   },
   "release": {

rollup.config.js

@@ -5,7 +5,7 @@ import replace from 'rollup-plugin-replace';
 import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
 import { terser } from 'rollup-plugin-terser';
 
-const input = './src/umd.js';
+const input = './src/index.js';
 const name = 'ReactTransitionGroup';
 const globals = {
   react: 'React',

src/CSSTransition.js

@@ -64,7 +64,7 @@ const removeClass = (node, classes) => node && classes && classes.split(' ').for
  * }
  * .my-node-exit-active {
  *   opacity: 0;
- *   transition: opacity: 200ms;
+ *   transition: opacity 200ms;
  * }
  * ```
  *
@@ -98,7 +98,11 @@ class CSSTransition extends React.Component {
   }
 
   onEntered = (node, appearing) => {
-    const { doneClassName } = this.getClassNames('enter');
+    const appearClassName = this.getClassNames('appear').doneClassName;
+    const enterClassName = this.getClassNames('enter').doneClassName;
+    const doneClassName = appearing
+      ? `${appearClassName} ${enterClassName}`
+      : enterClassName;
 
     this.removeClasses(node, appearing ? 'appear' : 'enter');
     addClass(node, doneClassName);
@@ -203,17 +207,29 @@ CSSTransition.propTypes = {
   ...Transition.propTypes,
 
   /**
-   * The animation classNames applied to the component as it enters, exits or has finished the transition.
-   * A single name can be provided and it will be suffixed for each stage: e.g.
+   * The animation classNames applied to the component as it enters, exits or
+   * has finished the transition. A single name can be provided and it will be
+   * suffixed for each stage: e.g.
+   *
+   * `classNames="fade"` applies `fade-enter`, `fade-enter-active`,
+   * `fade-enter-done`, `fade-exit`, `fade-exit-active`, `fade-exit-done`,
+   * `fade-appear`, `fade-appear-active`, and `fade-appear-done`.
+   *
+   * **Note**: `fade-appear-done` and `fade-enter-done` will _both_ be applied.
+   * This allows you to define different behavior for when appearing is done and
+   * when regular entering is done, using selectors like
+   * `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply an
+   * epic entrance animation when element first appears in the DOM using
+   * [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can
+   * simply use `fade-enter-done` for defining both cases.
    *
-   * `classNames="fade"` applies `fade-enter`, `fade-enter-active`, `fade-enter-done`,
-   * `fade-exit`, `fade-exit-active`, `fade-exit-done`, `fade-appear`, and `fade-appear-active`.
    * Each individual classNames can also be specified independently like:
    *
    * ```js
    * classNames={{
    *  appear: 'my-appear',
    *  appearActive: 'my-active-appear',
+   *  appearDone: 'my-done-appear',
    *  enter: 'my-enter',
    *  enterActive: 'my-active-enter',
    *  enterDone: 'my-done-enter',
@@ -229,8 +245,8 @@ CSSTransition.propTypes = {
    * import styles from './styles.css';
    * ```
    *
-   * you might want to use camelCase in your CSS file, that way could simply spread
-   * them instead of listing them one by one:
+   * you might want to use camelCase in your CSS file, that way could simply
+   * spread them instead of listing them one by one:
    *
    * ```js
    * classNames={{ ...styles }}
@@ -239,6 +255,7 @@ CSSTransition.propTypes = {
    * @type {string | {
    *  appear?: string,
    *  appearActive?: string,
+   *  appearDone?: string,
    *  enter?: string,
    *  enterActive?: string,
    *  enterDone?: string,
@@ -273,7 +290,6 @@ CSSTransition.propTypes = {
    */
   onEntered: PropTypes.func,
 
-
   /**
    * A `<Transition>` callback fired immediately after the 'exit' class is
    * applied.

src/Transition.js

@@ -1,9 +1,9 @@
 import * as PropTypes from 'prop-types'
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { polyfill } from 'react-lifecycles-compat'
 
 import { timeoutsShape } from './utils/PropTypes'
+import TransitionGroupContext from './TransitionGroupContext'
 
 export const UNMOUNTED = 'unmounted'
 export const EXITED = 'exited'
@@ -44,8 +44,10 @@ export const EXITING = 'exiting'
  * }
  *
  * const transitionStyles = {
- *   entering: { opacity: 0 },
+ *   entering: { opacity: 1 },
  *   entered:  { opacity: 1 },
+ *   exiting:  { opacity: 0 },
+ *   exited:  { opacity: 0 },
  * };
  *
  * const Fade = ({ in: inProp }) => (
@@ -101,17 +103,12 @@ export const EXITING = 'exiting'
  * `'exiting'` to `'exited'`.
  */
 class Transition extends React.Component {
-  static contextTypes = {
-    transitionGroup: PropTypes.object,
-  }
-  static childContextTypes = {
-    transitionGroup: () => {},
-  }
+  static contextType = TransitionGroupContext
 
   constructor(props, context) {
     super(props, context)
 
-    let parentGroup = context.transitionGroup
+    let parentGroup = context
     // In the context of a TransitionGroup all enters are really appears
     let appear =
       parentGroup && !parentGroup.isMounting ? props.enter : props.appear
@@ -140,10 +137,6 @@ class Transition extends React.Component {
     this.nextCallback = null
   }
 
-  getChildContext() {
-    return { transitionGroup: null } // allows for nested Transitions
-  }
-
   static getDerivedStateFromProps({ in: nextIn }, prevState) {
     if (nextIn && prevState.status === UNMOUNTED) {
       return { status: EXITED }
@@ -230,8 +223,8 @@ class Transition extends React.Component {
 
   performEnter(node, mounting) {
     const { enter } = this.props
-    const appearing = this.context.transitionGroup
-      ? this.context.transitionGroup.isMounting
+    const appearing = this.context
+      ? this.context.isMounting
       : mounting
 
     const timeouts = this.getTimeouts()
@@ -358,11 +351,21 @@ class Transition extends React.Component {
     delete childProps.onExited
 
     if (typeof children === 'function') {
-      return children(status, childProps)
+      // allows for nested Transitions
+      return (
+        <TransitionGroupContext.Provider value={null}>
+          {children(status, childProps)}
+        </TransitionGroupContext.Provider>
+      )
     }
 
     const child = React.Children.only(children)
-    return React.cloneElement(child, childProps)
+    return (
+      // allows for nested Transitions
+      <TransitionGroupContext.Provider value={null}>
+        {React.cloneElement(child, childProps)}
+      </TransitionGroupContext.Provider>
+    )
   }
 }
 
@@ -542,4 +545,4 @@ Transition.ENTERING = 2
 Transition.ENTERED = 3
 Transition.EXITING = 4
 
-export default polyfill(Transition)
+export default Transition