[react-transition-group] Unify to standard module syntax (#37405)

Use `import` and `export` syntax instead of `namespace`.
`Transition.d.ts` has already used the standard syntax.

types/react-transition-group/CSSTransition.d.ts

@@ -1,47 +1,45 @@
-import { Component } from "react";
+import { Component } from 'react';
 import { TransitionProps } from "./Transition";
 
-declare namespace CSSTransition {
-    interface CSSTransitionClassNames {
-        appear?: string;
-        appearActive?: string;
-        appearDone?: string;
-        enter?: string;
-        enterActive?: string;
-        enterDone?: string;
-        exit?: string;
-        exitActive?: string;
-        exitDone?: string;
-    }
-
-    interface CSSTransitionProps extends TransitionProps {
-        /**
-         * 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-appear-active',
-         *   appearDone: 'my-appear-done',
-         *   enter: 'my-enter',
-         *   enterActive: 'my-enter-active',
-         *   enterDone: 'my-enter-done',
-         *   exit: 'my-exit',
-         *   exitActive: 'my-exit-active',
-         *   exitDone: 'my-exit-done'
-         * }}
-         * ```
-         */
-        classNames?: string | CSSTransitionClassNames;
-    }
+export interface CSSTransitionClassNames {
+    appear?: string;
+    appearActive?: string;
+    appearDone?: string;
+    enter?: string;
+    enterActive?: string;
+    enterDone?: string;
+    exit?: string;
+    exitActive?: string;
+    exitDone?: string;
 }
 
-declare class CSSTransition extends Component<CSSTransition.CSSTransitionProps> {}
+export interface CSSTransitionProps extends TransitionProps {
+    /**
+     * 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-appear-active',
+     *   appearDone: 'my-appear-done',
+     *   enter: 'my-enter',
+     *   enterActive: 'my-enter-active',
+     *   enterDone: 'my-enter-done',
+     *   exit: 'my-exit',
+     *   exitActive: 'my-exit-active',
+     *   exitDone: 'my-exit-done'
+     * }}
+     * ```
+     */
+    classNames?: string | CSSTransitionClassNames;
+}
 
-export = CSSTransition;
+declare class CSSTransition extends Component<CSSTransitionProps> {}
+
+export default CSSTransition;

types/react-transition-group/SwitchTransition.d.ts

@@ -1,24 +1,22 @@
-import { Component } from "react";
+import { Component, ReactElement } from "react";
 
 export enum modes {
   out = 'out-in',
   in = 'in-out'
 }
 
-declare namespace SwitchTransition {
-  interface SwitchTransitionProps {
-    /**
-     * Transition modes.
-     * `out-in`: Current element transitions out first, then when complete, the new element transitions in.
-     * `in-out`: New element transitions in first, then when complete, the current element transitions out.
-     */
-    mode?: 'out-in' | 'in-out';
+export interface SwitchTransitionProps {
+  /**
+   * Transition modes.
+   * `out-in`: Current element transitions out first, then when complete, the new element transitions in.
+   * `in-out`: New element transitions in first, then when complete, the current element transitions out.
+   */
+  mode?: 'out-in' | 'in-out';
 
-    /**
-     * Any `Transition` or `CSSTransition` component
-     */
-    children: React.ReactElement;
-  }
+  /**
+   * Any `Transition` or `CSSTransition` component
+   */
+  children: ReactElement;
 }
 
 /**
@@ -46,6 +44,6 @@ declare namespace SwitchTransition {
  * }
  * ```
  */
-declare class SwitchTransition extends Component<SwitchTransition.SwitchTransitionProps> {}
+declare class SwitchTransition extends Component<SwitchTransitionProps> {}
 
 export default SwitchTransition;

types/react-transition-group/Transition.d.ts

@@ -1,4 +1,4 @@
-import { Component } from "react";
+import { Component, ReactNode } from "react";
 
 export type EndHandler = (node: HTMLElement, done: () => void) => void;
 export type EnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
@@ -37,7 +37,7 @@ export type TransitionStatus =
     typeof EXITING |
     typeof EXITED |
     typeof UNMOUNTED;
-export type TransitionChildren = React.ReactNode | ((status: TransitionStatus) => React.ReactNode);
+export type TransitionChildren = ReactNode | ((status: TransitionStatus) => ReactNode);
 export interface TransitionProps extends TransitionActions {
     /**
      * Show the component; triggers the enter or exit states

types/react-transition-group/TransitionGroup.d.ts

@@ -1,23 +1,23 @@
 import { Component, ReactType, HTMLProps, ReactElement } from "react";
 import { TransitionActions, TransitionProps } from "./Transition";
 
-declare namespace TransitionGroup {
-    interface IntrinsicTransitionGroupProps<T extends keyof JSX.IntrinsicElements = "div"> extends TransitionActions {
-        component?: T|null;
-    }
-
-    interface ComponentTransitionGroupProps<T extends ReactType> extends TransitionActions {
-        component: T;
-    }
-
-    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>>;
-        childFactory?(child: ReactElement): ReactElement;
-        [prop: string]: any;
-    };
+export interface IntrinsicTransitionGroupProps<T extends keyof JSX.IntrinsicElements = 'div'>
+    extends TransitionActions {
+    component?: T | null;
 }
 
+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>>;
+          childFactory?(child: ReactElement): ReactElement;
+          [prop: string]: any;
+      };
+
 /**
  * The `<TransitionGroup>` component manages a set of `<Transition>` components
  * in a list. Like with the `<Transition>` component, `<TransitionGroup>`, is a
@@ -75,6 +75,6 @@ declare namespace TransitionGroup {
  * components. This means you can mix and match animations across different
  * list items.
  */
-declare class TransitionGroup extends Component<TransitionGroup.TransitionGroupProps> {}
+declare class TransitionGroup extends Component<TransitionGroupProps> {}
 
-export = TransitionGroup;
+export default TransitionGroup;

types/react-transition-group/index.d.ts

@@ -6,14 +6,7 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
-import CSSTransition = require("./CSSTransition");
-import Transition from "./Transition";
-import TransitionGroup = require("./TransitionGroup");
-import SwitchTransition from "./SwitchTransition";
-
-export {
-    CSSTransition,
-    Transition,
-    TransitionGroup,
-    SwitchTransition
-};
+export { default as Transition } from './Transition';
+export { default as CSSTransition } from './CSSTransition';
+export { default as TransitionGroup } from './TransitionGroup';
+export { default as SwitchTransition } from './SwitchTransition';

types/react-transition-group/react-transition-group-tests.tsx

@@ -1,9 +1,7 @@
 import * as React from "react";
-import CSSTransition = require("react-transition-group/CSSTransition");
-import Transition, { UNMOUNTED, EXITED, ENTERING, ENTERED, EXITING, TransitionStatus } from "react-transition-group/Transition";
-import TransitionGroup = require("react-transition-group/TransitionGroup");
-import SwitchTransition, { modes } from "react-transition-group/SwitchTransition";
-import Components = require("react-transition-group");
+import { UNMOUNTED, EXITED, ENTERING, ENTERED, EXITING, TransitionStatus } from "react-transition-group/Transition";
+import { modes } from "react-transition-group/SwitchTransition";
+import { Transition, CSSTransition, TransitionGroup, SwitchTransition } from "react-transition-group";
 
 interface ContainerProps {
     theme: string;
@@ -41,7 +39,7 @@ const Test: React.StatelessComponent = () => {
     return (
         <>
             <SwitchTransition>
-                <Components.Transition
+                <Transition
                     in
                     mountOnEnter
                     unmountOnExit
@@ -58,11 +56,11 @@ const Test: React.StatelessComponent = () => {
                     onExited={ handleExit }
                 >
                     <div>{ "test" }</div>
-                </Components.Transition>
+                </Transition>
             </SwitchTransition>
 
             <SwitchTransition mode="in-out">
-                <Components.Transition
+                <Transition
                     in
                     mountOnEnter
                     unmountOnExit
@@ -79,11 +77,11 @@ const Test: React.StatelessComponent = () => {
                     onExited={ handleExit }
                 >
                     <div>{ "test" }</div>
-                </Components.Transition>
+                </Transition>
             </SwitchTransition>
 
             <SwitchTransition mode={modes.in}>
-                <Components.Transition
+                <Transition
                     in
                     mountOnEnter
                     unmountOnExit
@@ -100,11 +98,11 @@ const Test: React.StatelessComponent = () => {
                     onExited={ handleExit }
                 >
                     <div>{ "test" }</div>
-                </Components.Transition>
+                </Transition>
             </SwitchTransition>
 
             <SwitchTransition mode={modes.out}>
-                <Components.Transition
+                <Transition
                     in
                     mountOnEnter
                     unmountOnExit
@@ -121,7 +119,7 @@ const Test: React.StatelessComponent = () => {
                     onExited={ handleExit }
                 >
                     <div>{ "test" }</div>
-                </Components.Transition>
+                </Transition>
             </SwitchTransition>
 
             <TransitionGroup
@@ -130,7 +128,7 @@ const Test: React.StatelessComponent = () => {
                 className="animated-list"
                 childFactory={ (child: React.ReactElement) => child }
             >
-                <Components.Transition
+                <Transition
                     in
                     mountOnEnter
                     unmountOnExit
@@ -147,8 +145,8 @@ const Test: React.StatelessComponent = () => {
                     onExited={ handleExit }
                 >
                     <div>{ "test" }</div>
-                </Components.Transition>
-                <Components.Transition in timeout={500}>
+                </Transition>
+                <Transition in timeout={500}>
                     {(status) => {
                         switch (status) {
                             case ENTERING:
@@ -159,11 +157,11 @@ const Test: React.StatelessComponent = () => {
                                 return <div>{status}</div>;
                         }
                     }}
-                </Components.Transition>
+                </Transition>
 
-                <Components.Transition in timeout={500}>
+                <Transition in timeout={500}>
                     {statusAsArgument}
-                </Components.Transition>
+                </Transition>
 
                 <Transition
                     timeout={ { enter : 500, exit : 500 } }
@@ -171,7 +169,7 @@ const Test: React.StatelessComponent = () => {
                     <div>{ "test" }</div>
                 </Transition>
 
-                <Components.CSSTransition
+                <CSSTransition
                     in
                     mountOnEnter
                     unmountOnExit
@@ -189,7 +187,7 @@ const Test: React.StatelessComponent = () => {
                     classNames="fade"
                 >
                     <div>{ "test" }</div>
-                </Components.CSSTransition>
+                </CSSTransition>
 
                 <CSSTransition
                     timeout={ { enter : 500, exit : 500 } }