From ed17ae55a75afee306a3e9730665fe71676dfd6d Mon Sep 17 00:00:00 2001
From: Karol Janyst <lapkom@gmail.com>
Date: Fri, 7 Jul 2017 12:51:17 +0900
Subject: [PATCH 1/2] Add definitions for react-transition-group v2

---
 .../react-transition-group/CSSTransition.d.ts |  20 +++
 types/react-transition-group/Transition.d.ts  |  24 ++++
 .../TransitionGroup.d.ts                      |  21 +--
 types/react-transition-group/index.d.ts       |  30 ++--
 .../react-transition-group-tests.tsx          | 130 ++++++++++--------
 types/react-transition-group/tsconfig.json    |   8 +-
 .../{ => v1}/CSSTransitionGroup.d.ts          |   0
 .../v1/TransitionGroup.d.ts                   |  19 +++
 types/react-transition-group/v1/index.d.ts    |  29 ++++
 .../v1/react-transition-group-tests.tsx       |  73 ++++++++++
 types/react-transition-group/v1/tsconfig.json |  27 ++++
 types/react-transition-group/v1/tslint.json   |   1 +
 12 files changed, 282 insertions(+), 100 deletions(-)
 create mode 100644 types/react-transition-group/CSSTransition.d.ts
 create mode 100644 types/react-transition-group/Transition.d.ts
 rename types/react-transition-group/{ => v1}/CSSTransitionGroup.d.ts (100%)
 create mode 100644 types/react-transition-group/v1/TransitionGroup.d.ts
 create mode 100644 types/react-transition-group/v1/index.d.ts
 create mode 100644 types/react-transition-group/v1/react-transition-group-tests.tsx
 create mode 100644 types/react-transition-group/v1/tsconfig.json
 create mode 100644 types/react-transition-group/v1/tslint.json

diff --git a/types/react-transition-group/CSSTransition.d.ts b/types/react-transition-group/CSSTransition.d.ts
new file mode 100644
index 0000000000..49d9bde183
--- /dev/null
+++ b/types/react-transition-group/CSSTransition.d.ts
@@ -0,0 +1,20 @@
+import { Component } from "react";
+import { TransitionActions } from "react-transition-group";
+import { TransitionProps } from "react-transition-group/Transition";
+
+export interface CSSTransitionClassNames {
+    appear?: string;
+    appearActive?: string;
+    enter?: string;
+    enterActive?: string;
+    exit?: string;
+    exitActive?: string;
+}
+
+export interface CSSTransitionProps extends TransitionProps {
+    classNames: string | CSSTransitionClassNames;
+}
+
+declare class CSSTransition extends Component<CSSTransitionProps> {}
+
+export default CSSTransition;
diff --git a/types/react-transition-group/Transition.d.ts b/types/react-transition-group/Transition.d.ts
new file mode 100644
index 0000000000..29387be19c
--- /dev/null
+++ b/types/react-transition-group/Transition.d.ts
@@ -0,0 +1,24 @@
+import { Component, HTMLProps } from "react";
+import { TransitionActions } from "react-transition-group";
+
+export type EndHandler = (node: HTMLElement, done: () => void) => void;
+export type EnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
+export type ExitHandler = (node: HTMLElement) => void;
+
+export interface TransitionProps extends TransitionActions, HTMLProps<any> {
+    in?: boolean;
+    mountOnEnter?: boolean;
+    unmountOnExit?: boolean;
+    timeout: number | { enter?: number, exit?: number };
+    addEndListener?: EndHandler;
+    onEnter?: EnterHandler;
+    onEntering?: EnterHandler;
+    onEntered?: EnterHandler;
+    onExit?: ExitHandler;
+    onExiting?: ExitHandler;
+    onExited?: ExitHandler;
+}
+
+declare class Transition extends Component<TransitionProps> {}
+
+export default Transition;
diff --git a/types/react-transition-group/TransitionGroup.d.ts b/types/react-transition-group/TransitionGroup.d.ts
index 44d9100889..fb169c2d8f 100644
--- a/types/react-transition-group/TransitionGroup.d.ts
+++ b/types/react-transition-group/TransitionGroup.d.ts
@@ -1,19 +1,10 @@
-import { Component, HTMLAttributes, ReactElement, ReactType } from "react";
-import { HTMLTransitionGroupProps } from "./index";
+import { Component, ReactType, HTMLProps } from "react";
+import { TransitionActions } from "react-transition-group";
 
-declare namespace TransitionGroup {
-    interface TransitionGroupChildLifecycle {
-        componentWillAppear?(callback: () => void): void;
-        componentDidAppear?(): void;
-        componentWillEnter?(callback: () => void): void;
-        componentDidEnter?(): void;
-        componentWillLeave?(callback: () => void): void;
-        componentDidLeave?(): void;
-    }
-
-    type TransitionGroupProps = HTMLTransitionGroupProps<TransitionGroup>;
+export interface TransitionGroupProps extends TransitionActions, HTMLProps<any> {
+    component?: ReactType;
 }
 
-declare class TransitionGroup extends Component<TransitionGroup.TransitionGroupProps> {}
+declare class TransitionGroup extends Component<TransitionGroupProps> {}
 
-export = TransitionGroup;
+export default TransitionGroup;
diff --git a/types/react-transition-group/index.d.ts b/types/react-transition-group/index.d.ts
index 3c82827b46..62136d8ea4 100644
--- a/types/react-transition-group/index.d.ts
+++ b/types/react-transition-group/index.d.ts
@@ -1,29 +1,15 @@
-// Type definitions for react-transition-group 1.1
+// Type definitions for react-transition-group 2.0
 // Project: https://github.com/reactjs/react-transition-group
 // Definitions by: Karol Janyst <https://github.com/LKay>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 
-import { HTMLAttributes, ReactElement, ReactType } from "react";
+export { default as CSSTransition, CSSTransitionProps, CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+export { default as Transition, TransitionProps } from "react-transition-group/Transition";
+export { default as TransitionGroup, TransitionGroupProps } from "react-transition-group/TransitionGroup";
 
-export interface HTMLTransitionGroupProps<T> extends HTMLAttributes<T> {
-    component?: ReactType;
-    childFactory?(child: ReactElement<any>): ReactElement<any>;
+export interface TransitionActions {
+    appear?: boolean;
+    enter?: boolean;
+    exit?: boolean;
 }
-
-import * as TransitionGroup from "./TransitionGroup";
-export {
-    TransitionGroupProps,
-    TransitionGroupChildLifecycle
-} from "./TransitionGroup";
-
-import * as CSSTransitionGroup from "./CSSTransitionGroup";
-export {
-    CSSTransitionGroupProps,
-    CSSTransitionGroupTransitionName
-} from "./CSSTransitionGroup";
-
-export {
-    TransitionGroup,
-    CSSTransitionGroup
-};
diff --git a/types/react-transition-group/react-transition-group-tests.tsx b/types/react-transition-group/react-transition-group-tests.tsx
index 346fe9989a..53d3e9b22e 100644
--- a/types/react-transition-group/react-transition-group-tests.tsx
+++ b/types/react-transition-group/react-transition-group-tests.tsx
@@ -1,73 +1,81 @@
 import * as React from "react";
-import * as TransitionGroup from "react-transition-group/TransitionGroup";
-import * as CSSTransitionGroup from "react-transition-group/CSSTransitionGroup";
-import { CSSTransitionGroupProps, TransitionGroupProps, TransitionGroupChildLifecycle } from "react-transition-group";
-
-class TestChild extends React.Component implements TransitionGroupChildLifecycle {
-    componentWillAppear(callback: () => void) {
-        callback();
-    }
-
-    componentDidAppear() {}
-
-    componentWillEnter(callback: () => void) {
-        callback();
-    }
-
-    componentDidEnter() {}
-
-    componentWillLeave(callback: () => void) {
-        callback();
-    }
-
-    componentDidLeave() {}
-
-    render() {
-        return (<li>{ "Test" }</li>);
-    }
-}
+import CSSTransition from "react-transition-group/CSSTransition";
+import Transition from "react-transition-group/Transition";
+import TransitionGroup from "react-transition-group/TransitionGroup";
+import { CSSTransitionProps, TransitionProps, TransitionGroupProps } from "react-transition-group";
 
 const Test: React.StatelessComponent = () => {
+    function handleEnter(node: HTMLElement, isAppearing: boolean) {}
+
+    function handleExit(node: HTMLElement) {}
+
+    function handleEndListener(node: HTMLElement, done: () => void) {
+        node.addEventListener("transitionend", done, false);
+    }
+
     return (
-        <div>
-            <TransitionGroup component="ul" className="animated-list">
-                <TestChild />
-            </TransitionGroup>
-
-            <CSSTransitionGroup
-                transitionName="example"
-                transitionAppear={ true }
-                transitionAppearTimeout={ 500 }
-                transitionEnter={ true }
-                transitionEnterTimeout={ 500 }
-                transitionLeave={ true }
-                transitionLeaveTimeout={ 500 }
+        <TransitionGroup
+            component="ul"
+            className="animated-list"
+        >
+            <Transition
+                in
+                mountOnEnter
+                unmountOnExit
+                appear
+                enter
+                exit
+                timeout={ 500 }
+                addEndListener={ handleEndListener }
+                onEnter={ handleEnter }
+                onEntering={ handleEnter }
+                onEntered={ handleEnter }
+                onExit={ handleExit }
+                onExiting={ handleExit }
+                onExited={ handleExit }
             >
                 <div>{ "test" }</div>
-            </CSSTransitionGroup>
+            </Transition>
 
-            <CSSTransitionGroup
-                transitionName={ {
-                    enter: "enter",
-                    enterActive: "enterActive",
-                    leave: "leave",
-                    leaveActive: "leaveActive",
-                    appear: "appear",
-                    appearActive: "appearActive"
+            <Transition
+                timeout={ { enter : 500, exit : 500 } }
+            >
+                <div>{ "test" }</div>
+            </Transition>
+
+            <CSSTransition
+                in
+                mountOnEnter
+                unmountOnExit
+                appear
+                enter
+                exit
+                timeout={ 500 }
+                addEndListener={ handleEndListener }
+                onEnter={ handleEnter }
+                onEntering={ handleEnter }
+                onEntered={ handleEnter }
+                onExit={ handleExit }
+                onExiting={ handleExit }
+                onExited={ handleExit }
+                classNames="fade"
+            >
+                <div>{ "test" }</div>
+            </CSSTransition>
+
+            <CSSTransition
+                timeout={ { enter : 500, exit : 500 } }
+                classNames={ {
+                    appear: "fade-appear",
+                    appearActive: "fade-active-appear",
+                    enter: "fade-enter",
+                    enterActive: "fade-active-enter",
+                    exit: "fade-exit",
+                    exitActive: "fade-active-exit"
                 } }
             >
                 <div>{ "test" }</div>
-            </CSSTransitionGroup>
-
-            <CSSTransitionGroup
-                transitionName={ {
-                    enter: "enter",
-                    leave: "leave",
-                    appear: "appear"
-                } }
-            >
-                <div>{ "test" }</div>
-            </CSSTransitionGroup>
-        </div>
+            </CSSTransition>
+        </TransitionGroup>
     );
 };
diff --git a/types/react-transition-group/tsconfig.json b/types/react-transition-group/tsconfig.json
index 1fbbc5df49..305822cd04 100644
--- a/types/react-transition-group/tsconfig.json
+++ b/types/react-transition-group/tsconfig.json
@@ -1,9 +1,12 @@
 {
     "compilerOptions": {
+        "target": "es5",
         "module": "commonjs",
+        "moduleResolution": "node",
         "lib": [
-            "es6"
+            "es6", "dom"
         ],
+        "strict": true,
         "noImplicitAny": true,
         "noImplicitThis": true,
         "strictNullChecks": true,
@@ -18,7 +21,8 @@
     },
     "files": [
         "index.d.ts",
-        "CSSTransitionGroup.d.ts",
+        "CSSTransition.d.ts",
+        "Transition.d.ts",
         "TransitionGroup.d.ts",
         "react-transition-group-tests.tsx"
     ]
diff --git a/types/react-transition-group/CSSTransitionGroup.d.ts b/types/react-transition-group/v1/CSSTransitionGroup.d.ts
similarity index 100%
rename from types/react-transition-group/CSSTransitionGroup.d.ts
rename to types/react-transition-group/v1/CSSTransitionGroup.d.ts
diff --git a/types/react-transition-group/v1/TransitionGroup.d.ts b/types/react-transition-group/v1/TransitionGroup.d.ts
new file mode 100644
index 0000000000..44d9100889
--- /dev/null
+++ b/types/react-transition-group/v1/TransitionGroup.d.ts
@@ -0,0 +1,19 @@
+import { Component, HTMLAttributes, ReactElement, ReactType } from "react";
+import { HTMLTransitionGroupProps } from "./index";
+
+declare namespace TransitionGroup {
+    interface TransitionGroupChildLifecycle {
+        componentWillAppear?(callback: () => void): void;
+        componentDidAppear?(): void;
+        componentWillEnter?(callback: () => void): void;
+        componentDidEnter?(): void;
+        componentWillLeave?(callback: () => void): void;
+        componentDidLeave?(): void;
+    }
+
+    type TransitionGroupProps = HTMLTransitionGroupProps<TransitionGroup>;
+}
+
+declare class TransitionGroup extends Component<TransitionGroup.TransitionGroupProps> {}
+
+export = TransitionGroup;
diff --git a/types/react-transition-group/v1/index.d.ts b/types/react-transition-group/v1/index.d.ts
new file mode 100644
index 0000000000..3c82827b46
--- /dev/null
+++ b/types/react-transition-group/v1/index.d.ts
@@ -0,0 +1,29 @@
+// Type definitions for react-transition-group 1.1
+// Project: https://github.com/reactjs/react-transition-group
+// Definitions by: Karol Janyst <https://github.com/LKay>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+import { HTMLAttributes, ReactElement, ReactType } from "react";
+
+export interface HTMLTransitionGroupProps<T> extends HTMLAttributes<T> {
+    component?: ReactType;
+    childFactory?(child: ReactElement<any>): ReactElement<any>;
+}
+
+import * as TransitionGroup from "./TransitionGroup";
+export {
+    TransitionGroupProps,
+    TransitionGroupChildLifecycle
+} from "./TransitionGroup";
+
+import * as CSSTransitionGroup from "./CSSTransitionGroup";
+export {
+    CSSTransitionGroupProps,
+    CSSTransitionGroupTransitionName
+} from "./CSSTransitionGroup";
+
+export {
+    TransitionGroup,
+    CSSTransitionGroup
+};
diff --git a/types/react-transition-group/v1/react-transition-group-tests.tsx b/types/react-transition-group/v1/react-transition-group-tests.tsx
new file mode 100644
index 0000000000..346fe9989a
--- /dev/null
+++ b/types/react-transition-group/v1/react-transition-group-tests.tsx
@@ -0,0 +1,73 @@
+import * as React from "react";
+import * as TransitionGroup from "react-transition-group/TransitionGroup";
+import * as CSSTransitionGroup from "react-transition-group/CSSTransitionGroup";
+import { CSSTransitionGroupProps, TransitionGroupProps, TransitionGroupChildLifecycle } from "react-transition-group";
+
+class TestChild extends React.Component implements TransitionGroupChildLifecycle {
+    componentWillAppear(callback: () => void) {
+        callback();
+    }
+
+    componentDidAppear() {}
+
+    componentWillEnter(callback: () => void) {
+        callback();
+    }
+
+    componentDidEnter() {}
+
+    componentWillLeave(callback: () => void) {
+        callback();
+    }
+
+    componentDidLeave() {}
+
+    render() {
+        return (<li>{ "Test" }</li>);
+    }
+}
+
+const Test: React.StatelessComponent = () => {
+    return (
+        <div>
+            <TransitionGroup component="ul" className="animated-list">
+                <TestChild />
+            </TransitionGroup>
+
+            <CSSTransitionGroup
+                transitionName="example"
+                transitionAppear={ true }
+                transitionAppearTimeout={ 500 }
+                transitionEnter={ true }
+                transitionEnterTimeout={ 500 }
+                transitionLeave={ true }
+                transitionLeaveTimeout={ 500 }
+            >
+                <div>{ "test" }</div>
+            </CSSTransitionGroup>
+
+            <CSSTransitionGroup
+                transitionName={ {
+                    enter: "enter",
+                    enterActive: "enterActive",
+                    leave: "leave",
+                    leaveActive: "leaveActive",
+                    appear: "appear",
+                    appearActive: "appearActive"
+                } }
+            >
+                <div>{ "test" }</div>
+            </CSSTransitionGroup>
+
+            <CSSTransitionGroup
+                transitionName={ {
+                    enter: "enter",
+                    leave: "leave",
+                    appear: "appear"
+                } }
+            >
+                <div>{ "test" }</div>
+            </CSSTransitionGroup>
+        </div>
+    );
+};
diff --git a/types/react-transition-group/v1/tsconfig.json b/types/react-transition-group/v1/tsconfig.json
new file mode 100644
index 0000000000..b7b4bfd758
--- /dev/null
+++ b/types/react-transition-group/v1/tsconfig.json
@@ -0,0 +1,27 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "jsx": "react",
+        "baseUrl": "../../",
+        "typeRoots": ["../../"],
+        "paths": {
+          "react-transition-group": ["react-transition-group/v1"],
+          "react-transition-group/*": ["react-transition-group/v1/*"]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "CSSTransitionGroup.d.ts",
+        "TransitionGroup.d.ts",
+        "react-transition-group-tests.tsx"
+    ]
+}
diff --git a/types/react-transition-group/v1/tslint.json b/types/react-transition-group/v1/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/react-transition-group/v1/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }

From faa13ca5cc11ebd096c39ef5848fcaf7a54c3ecb Mon Sep 17 00:00:00 2001
From: Karol Janyst <lapkom@gmail.com>
Date: Thu, 13 Jul 2017 09:17:06 +0900
Subject: [PATCH 2/2] Fix types for transition components

---
 .../react-transition-group/CSSTransition.d.ts | 20 ++++-
 types/react-transition-group/Transition.d.ts  | 53 ++++++++++++-
 .../TransitionGroup.d.ts                      | 74 ++++++++++++++++++-
 types/react-transition-group/index.d.ts       | 16 ++--
 .../react-transition-group-tests.tsx          | 10 +--
 5 files changed, 152 insertions(+), 21 deletions(-)

diff --git a/types/react-transition-group/CSSTransition.d.ts b/types/react-transition-group/CSSTransition.d.ts
index 49d9bde183..67b869edf6 100644
--- a/types/react-transition-group/CSSTransition.d.ts
+++ b/types/react-transition-group/CSSTransition.d.ts
@@ -1,5 +1,4 @@
 import { Component } from "react";
-import { TransitionActions } from "react-transition-group";
 import { TransitionProps } from "react-transition-group/Transition";
 
 export interface CSSTransitionClassNames {
@@ -11,6 +10,25 @@ export interface CSSTransitionClassNames {
     exitActive?: string;
 }
 
+/**
+ * The animation classNames applied to the component as it enters or exits.
+ * 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-exit`, `fade-exit-active`, `fade-appear`, and `fade-appear-active`.
+ * Each individual classNames can also be specified independently like:
+ *
+ * ```js
+ * classNames={{
+ *  appear: 'my-appear',
+ *  appearActive: 'my-active-appear',
+ *  enter: 'my-enter',
+ *  enterActive: 'my-active-enter',
+ *  exit: 'my-exit',
+ *  exitActive: 'my-active-exit',
+ * }}
+ * ```
+ */
 export interface CSSTransitionProps extends TransitionProps {
     classNames: string | CSSTransitionClassNames;
 }
diff --git a/types/react-transition-group/Transition.d.ts b/types/react-transition-group/Transition.d.ts
index 29387be19c..24f0265ee2 100644
--- a/types/react-transition-group/Transition.d.ts
+++ b/types/react-transition-group/Transition.d.ts
@@ -1,11 +1,16 @@
-import { Component, HTMLProps } from "react";
-import { TransitionActions } from "react-transition-group";
+import { Component } from "react";
 
 export type EndHandler = (node: HTMLElement, done: () => void) => void;
 export type EnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
 export type ExitHandler = (node: HTMLElement) => void;
 
-export interface TransitionProps extends TransitionActions, HTMLProps<any> {
+export interface TransitionActions {
+    appear?: boolean;
+    enter?: boolean;
+    exit?: boolean;
+}
+
+export interface TransitionProps extends TransitionActions {
     in?: boolean;
     mountOnEnter?: boolean;
     unmountOnExit?: boolean;
@@ -17,8 +22,50 @@ export interface TransitionProps extends TransitionActions, HTMLProps<any> {
     onExit?: ExitHandler;
     onExiting?: ExitHandler;
     onExited?: ExitHandler;
+    [prop: string]: any;
 }
 
+/**
+ * The Transition component lets you describe a transition from one component
+ * state to another _over time_ with a simple declarative API. Most commonly
+ * It's used to animate the mounting and unmounting of Component, but can also
+ * be used to describe in-place transition states as well.
+ *
+ * By default the `Transition` component does not alter the behavior of the
+ * component it renders, it only tracks "enter" and "exit" states for the components.
+ * It's up to you to give meaning and effect to those states. For example we can
+ * add styles to a component when it enters or exits:
+ *
+ * ```jsx
+ * import Transition from 'react-transition-group/Transition';
+ *
+ * const duration = 300;
+ *
+ * const defaultStyle = {
+ *   transition: `opacity ${duration}ms ease-in-out`,
+ *   opactity: 0,
+ * }
+ *
+ * const transitionStyles = {
+ *   entering: { opacity: 1 },
+ *   entered:  { opacity: 1 },
+ * };
+ *
+ * const Fade = ({ in: inProp }) => (
+ *   <Transition in={inProp} timeout={duration}>
+ *     {(state) => (
+ *       <div style={{
+ *         ...defaultStyle,
+ *         ...transitionStyles[state]
+ *       }}>
+ *         I'm A fade Transition!
+ *       </div>
+ *     )}
+ *   </Transition>
+ * );
+ * ```
+ *
+ */
 declare class Transition extends Component<TransitionProps> {}
 
 export default Transition;
diff --git a/types/react-transition-group/TransitionGroup.d.ts b/types/react-transition-group/TransitionGroup.d.ts
index fb169c2d8f..3f04332bc8 100644
--- a/types/react-transition-group/TransitionGroup.d.ts
+++ b/types/react-transition-group/TransitionGroup.d.ts
@@ -1,10 +1,76 @@
-import { Component, ReactType, HTMLProps } from "react";
-import { TransitionActions } from "react-transition-group";
+import { Component, ReactType, HTMLProps, ReactElement } from "react";
+import { TransitionActions, TransitionProps } from "react-transition-group/Transition";
 
-export interface TransitionGroupProps extends TransitionActions, HTMLProps<any> {
-    component?: ReactType;
+export interface IntrinsicTransitionGroupProps<T extends keyof JSX.IntrinsicElements = "div"> extends TransitionActions {
+    component?: T;
 }
 
+export interface ComponentTransitionGroupProps<T extends ReactType> extends TransitionActions {
+    component: T;
+}
+
+export type TransitionGroupProps<T extends keyof JSX.IntrinsicElements = "div", V extends ReactType = any> =
+    (IntrinsicTransitionGroupProps<T> & JSX.IntrinsicElements[T]) | (ComponentTransitionGroupProps<V>) & {
+        children?: ReactElement<TransitionProps> | Array<ReactElement<TransitionProps>>;
+    };
+
+/**
+ * The `<TransitionGroup>` component manages a set of `<Transition>` components
+ * in a list. Like with the `<Transition>` component, `<TransitionGroup>`, is a
+ * state machine for managing the mounting and unmounting of components over
+ * time.
+ *
+ * Consider the example below using the `Fade` CSS transition from before.
+ * As items are removed or added to the TodoList the `in` prop is toggled
+ * automatically by the `<TransitionGroup>`. You can use _any_ `<Transition>`
+ * component in a `<TransitionGroup>`, not just css.
+ *
+ * ```jsx
+ * import TransitionGroup from 'react-transition-group/TransitionGroup';
+ *
+ * class TodoList extends React.Component {
+ *   constructor(props) {
+ *     super(props)
+ *     this.state = {items: ['hello', 'world', 'click', 'me']}
+ *   }
+ *   handleAdd() {
+ *     const newItems = this.state.items.concat([
+ *       prompt('Enter some text')
+ *     ]);
+ *     this.setState({ items: newItems });
+ *   }
+ *   handleRemove(i) {
+ *     let newItems = this.state.items.slice();
+ *     newItems.splice(i, 1);
+ *     this.setState({items: newItems});
+ *   }
+ *   render() {
+ *     return (
+ *       <div>
+ *         <button onClick={() => this.handleAdd()}>Add Item</button>
+ *         <TransitionGroup>
+ *           {this.state.items.map((item, i) => (
+ *             <FadeTransition key={item}>
+ *               <div>
+ *                 {item}{' '}
+ *                 <button onClick={() => this.handleRemove(i)}>
+ *                   remove
+ *                 </button>
+ *               </div>
+ *             </FadeTransition>
+ *           ))}
+ *         </TransitionGroup>
+ *       </div>
+ *     );
+ *   }
+ * }
+ * ```
+ *
+ * Note that `<TransitionGroup>`  does not define any animation behavior!
+ * Exactly _how_ a list item animates is up to the individual `<Transition>`
+ * components. This means you can mix and match animations across different
+ * list items.
+ */
 declare class TransitionGroup extends Component<TransitionGroupProps> {}
 
 export default TransitionGroup;
diff --git a/types/react-transition-group/index.d.ts b/types/react-transition-group/index.d.ts
index 62136d8ea4..35c130595c 100644
--- a/types/react-transition-group/index.d.ts
+++ b/types/react-transition-group/index.d.ts
@@ -4,12 +4,12 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 
-export { default as CSSTransition, CSSTransitionProps, CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-export { default as Transition, TransitionProps } from "react-transition-group/Transition";
-export { default as TransitionGroup, TransitionGroupProps } from "react-transition-group/TransitionGroup";
+import CSSTransition from "react-transition-group/CSSTransition";
+import Transition from "react-transition-group/Transition";
+import TransitionGroup from "react-transition-group/TransitionGroup";
 
-export interface TransitionActions {
-    appear?: boolean;
-    enter?: boolean;
-    exit?: boolean;
-}
+export = {
+    CSSTransition,
+    Transition,
+    TransitionGroup
+};
diff --git a/types/react-transition-group/react-transition-group-tests.tsx b/types/react-transition-group/react-transition-group-tests.tsx
index 53d3e9b22e..333ab59810 100644
--- a/types/react-transition-group/react-transition-group-tests.tsx
+++ b/types/react-transition-group/react-transition-group-tests.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import CSSTransition from "react-transition-group/CSSTransition";
 import Transition from "react-transition-group/Transition";
 import TransitionGroup from "react-transition-group/TransitionGroup";
-import { CSSTransitionProps, TransitionProps, TransitionGroupProps } from "react-transition-group";
+import Components = require("react-transition-group");
 
 const Test: React.StatelessComponent = () => {
     function handleEnter(node: HTMLElement, isAppearing: boolean) {}
@@ -18,7 +18,7 @@ const Test: React.StatelessComponent = () => {
             component="ul"
             className="animated-list"
         >
-            <Transition
+            <Components.Transition
                 in
                 mountOnEnter
                 unmountOnExit
@@ -35,7 +35,7 @@ const Test: React.StatelessComponent = () => {
                 onExited={ handleExit }
             >
                 <div>{ "test" }</div>
-            </Transition>
+            </Components.Transition>
 
             <Transition
                 timeout={ { enter : 500, exit : 500 } }
@@ -43,7 +43,7 @@ const Test: React.StatelessComponent = () => {
                 <div>{ "test" }</div>
             </Transition>
 
-            <CSSTransition
+            <Components.CSSTransition
                 in
                 mountOnEnter
                 unmountOnExit
@@ -61,7 +61,7 @@ const Test: React.StatelessComponent = () => {
                 classNames="fade"
             >
                 <div>{ "test" }</div>
-            </CSSTransition>
+            </Components.CSSTransition>
 
             <CSSTransition
                 timeout={ { enter : 500, exit : 500 } }