Merge pull request #1 from reactjs/master

update

.eslintignore

@@ -1,3 +1,4 @@
 **/node_modules
 www/.cache/
 www/public/
+lib

.eslintrc.yml

@@ -8,3 +8,11 @@ env:
   browser: true
 plugins:
   - jsx-a11y
+
+overrides:
+  - files: www/**/*
+    env:
+      es6: true
+  - files: stories/**/*
+    rules:
+      no-console: off

.github/ISSUE_TEMPLATE/bug-report.md

@@ -0,0 +1,17 @@
+---
+name: Bug report
+about: Something isn't working as expected.
+---
+
+> What is the current behavior?
+
+<!-- ... -->
+
+> What is the expected behavior?
+<!-- If your use case is complicated, please be as descriptive as possible. -->
+
+<!-- ... -->
+
+> Could you provide a [CodeSandbox](https://codesandbox.io/) demo reproducing the bug?
+
+<!-- ... -->

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,8 @@
+---
+name: Feature request
+about: I have a suggestion on how to improve the library.
+---
+
+> What would you like improved?
+
+<!-- ... -->

.size-snapshot.json

@@ -1,12 +1,12 @@
 {
   "./lib/dist/react-transition-group.js": {
-    "bundled": 79410,
-    "minified": 22589,
-    "gzipped": 6905
+    "bundled": 80859,
+    "minified": 22686,
+    "gzipped": 6939
   },
   "./lib/dist/react-transition-group.min.js": {
-    "bundled": 46139,
-    "minified": 14975,
-    "gzipped": 4685
+    "bundled": 46875,
+    "minified": 15056,
+    "gzipped": 4715
   }
 }

.travis.yml

@@ -1,7 +1,7 @@
 sudo: false
 language: node_js
 node_js:
-  - stable
+  - "11.10"
 cache: yarn
 script:
   - yarn test

CHANGELOG.md

@@ -1,3 +1,32 @@
+# [2.8.0](https://github.com/reactjs/react-transition-group/compare/v2.7.1...v2.8.0) (2019-04-02)
+
+
+### Features
+
+* add support for empty classNames ([#481](https://github.com/reactjs/react-transition-group/issues/481)) ([d755dc6](https://github.com/reactjs/react-transition-group/commit/d755dc6))
+
+## [2.7.1](https://github.com/reactjs/react-transition-group/compare/v2.7.0...v2.7.1) (2019-03-25)
+
+
+### Bug Fixes
+
+* revert tree-shaking support because it was a breaking change ([271364c](https://github.com/reactjs/react-transition-group/commit/271364c))
+
+# [2.7.0](https://github.com/reactjs/react-transition-group/compare/v2.6.1...v2.7.0) (2019-03-22)
+
+
+### Features
+
+* support ESM (tree-shaking) ([#455](https://github.com/reactjs/react-transition-group/issues/455)) ([ef3e357](https://github.com/reactjs/react-transition-group/commit/ef3e357))
+
+## [2.6.1](https://github.com/reactjs/react-transition-group/compare/v2.6.0...v2.6.1) (2019-03-14)
+
+
+### Bug Fixes
+
+* **Transition:** make `exit` key optional when passing an object to the `timeout` prop ([#464](https://github.com/reactjs/react-transition-group/pull/464)) ([3a4cf9c](https://github.com/reactjs/react-transition-group/commit/3a4cf9c91ab5f25caaa9501b129bce66ec9bb56b))
+* **package.json:** mark react-transition-group as side-effect free for webpack tree shaking ([#472](https://github.com/reactjs/react-transition-group/issues/472)) ([b81dc89](https://github.com/reactjs/react-transition-group/commit/b81dc89))
+
 # [2.6.0](https://github.com/reactjs/react-transition-group/compare/v2.5.3...v2.6.0) (2019-02-26)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-transition-group",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "A react component toolset for managing animations",
   "main": "lib/index.js",
   "scripts": {
@@ -101,7 +101,6 @@
     "rollup-plugin-terser": "^4.0.2",
     "semantic-release": "^15.9.16",
     "semantic-release-alt-publish-dir": "^2.1.1",
-    "sinon": "^6.3.4",
     "travis-deploy-once": "^5.0.8"
   },
   "release": {
@@ -123,5 +122,6 @@
     "transform": [
       "loose-envify"
     ]
-  }
+  },
+  "sideEffects": false
 }

rollup.config.js

@@ -1,15 +1,15 @@
-import nodeResolve from "rollup-plugin-node-resolve";
-import babel from "rollup-plugin-babel";
-import commonjs from "rollup-plugin-commonjs";
-import replace from "rollup-plugin-replace";
-import { sizeSnapshot } from "rollup-plugin-size-snapshot";
-import { terser } from "rollup-plugin-terser";
+import nodeResolve from 'rollup-plugin-node-resolve';
+import babel from 'rollup-plugin-babel';
+import commonjs from 'rollup-plugin-commonjs';
+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 name = "ReactTransitionGroup";
+const input = './src/umd.js';
+const name = 'ReactTransitionGroup';
 const globals = {
-  react: "React",
-  "react-dom": "ReactDOM"
+  react: 'React',
+  'react-dom': 'ReactDOM'
 };
 
 const babelOptions = {
@@ -20,16 +20,16 @@ const babelOptions = {
 const commonjsOptions = {
   include: /node_modules/,
   namedExports: {
-    "prop-types": ["object", "oneOfType", "element", "bool", "func"]
+    'prop-types': ['object', 'oneOfType', 'element', 'bool', 'func']
   }
 };
 
 export default [
   {
     input,
     output: {
-      file: "./lib/dist/react-transition-group.js",
-      format: "umd",
+      file: './lib/dist/react-transition-group.js',
+      format: 'umd',
       name,
       globals
     },
@@ -38,16 +38,16 @@ export default [
       nodeResolve(),
       babel(babelOptions),
       commonjs(commonjsOptions),
-      replace({ "process.env.NODE_ENV": JSON.stringify("development") }),
+      replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
       sizeSnapshot()
     ]
   },
 
   {
     input,
     output: {
-      file: "./lib/dist/react-transition-group.min.js",
-      format: "umd",
+      file: './lib/dist/react-transition-group.min.js',
+      format: 'umd',
       name,
       globals
     },
@@ -56,7 +56,7 @@ export default [
       nodeResolve(),
       babel(babelOptions),
       commonjs(commonjsOptions),
-      replace({ "process.env.NODE_ENV": JSON.stringify("production") }),
+      replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
       sizeSnapshot(),
       terser()
     ]

src/CSSTransition.js

@@ -11,19 +11,69 @@ const addClass = (node, classes) => node && classes && classes.split(' ').forEac
 const removeClass = (node, classes) => node && classes && classes.split(' ').forEach(c => removeOneClass(node, c));
 
 /**
- * A `Transition` component using CSS transitions and animations.
- * It's inspired by the excellent [ng-animate](http://www.nganimate.org/) library.
+ * A transition component inspired by the excellent
+ * [ng-animate](http://www.nganimate.org/) library, you should use it if you're
+ * using CSS transitions or animations. It's built upon the
+ * [`Transition`](https://reactcommunity.org/react-transition-group/transition)
+ * component, so it inherits all of its props.
  *
  * `CSSTransition` applies a pair of class names during the `appear`, `enter`,
- * and `exit` stages of the transition. The first class is applied and then a
- * second "active" class in order to activate the css animation. After the animation,
- * matching `done` class names are applied to persist the animation state.
+ * and `exit` states of the transition. The first class is applied and then a
+ * second `*-active` class in order to activate the CSSS transition. After the
+ * transition, matching `*-done` class names are applied to persist the
+ * transition state.
  *
- * When the `in` prop is toggled to `true` the Component will get
- * the `example-enter` CSS class and the `example-enter-active` CSS class
- * added in the next tick. This is a convention based on the `classNames` prop.
+ * ```jsx
+ * function App() {
+ *   const [inProp, setInProp] = useState(false);
+ *   return (
+ *     <div>
+ *       <CSSTransition in={inProp} timeout={200} classNames="my-node">
+ *         <div>
+ *           {"I'll receive my-node-* classes"}
+ *         </div>
+ *       </CSSTransition>
+ *       <button type="button" onClick={() => setInProp(true)}>
+ *         Click to Enter
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * When the `in` prop is set to `true`, the child component will first receive
+ * the class `example-enter`, then the `example-enter-active` will be added in
+ * the next tick. `CSSTransition` [forces a
+ * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
+ * between before adding the `example-enter-active`. This is an important trick
+ * because it allows us to transition between `example-enter` and
+ * `example-enter-active` even though they were added immediately one after
+ * another. Most notably, this is what makes it possible for us to animate
+ * _appearance_.
+ *
+ * ```css
+ * .my-node-enter {
+ *   opacity: 0;
+ * }
+ * .my-node-enter-active {
+ *   opacity: 1;
+ *   transition: opacity 200ms;
+ * }
+ * .my-node-exit {
+ *   opacity: 1;
+ * }
+ * .my-node-exit-active {
+ *   opacity: 0;
+ *   transition: opacity: 200ms;
+ * }
+ * ```
+ *
+ * `*-active` classes represent which styles you want to animate **to**.
  */
 class CSSTransition extends React.Component {
+  static defaultProps = {
+    classNames: ''
+  }
   onEnter = (node, appearing) => {
     const { className } = this.getClassNames(appearing ? 'appear' : 'enter')
 
@@ -93,15 +143,17 @@ class CSSTransition extends React.Component {
 
   getClassNames = (type) => {
     const { classNames } = this.props;
+    const isStringClassNames = typeof classNames === 'string';
+    const prefix = isStringClassNames && classNames ? classNames + '-' : '';
 
-    let className = typeof classNames !== 'string' ?
-      classNames[type] : classNames + '-' + type;
+    let className = isStringClassNames ?
+      prefix + type : classNames[type]
 
-    let activeClassName = typeof classNames !== 'string' ?
-      classNames[type + 'Active'] : className + '-active';
+    let activeClassName = isStringClassNames ?
+      className + '-active' : classNames[type + 'Active'];
 
-    let doneClassName = typeof classNames !== 'string' ?
-      classNames[type + 'Done'] : className + '-done';
+    let doneClassName = isStringClassNames ?
+      className + '-done' : classNames[type + 'Done'];
 
     return {
       className,