Update react-overlays to v0.8, fix transition prop type in react-overlays library, remove react-overlays/Transition (#23206)

* Add `react-overlays/Overlay` component test.

* Fix `react-overlays/Overlay` and `react-overlays/Modal` components.

* Remove `react-overlays/Transition`.

* Set `react-overlays` version to v0.8.

types/react-overlays/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for React Overlays 0.6
+// Type definitions for React Overlays 0.8
 // Project: https://github.com/react-bootstrap/react-overlays
 // Definitions by: Aaron Beall <https://github.com/aaronbeall>
 //                 Vito Samson <https://github.com/vitosamson>
@@ -15,7 +15,6 @@ export {
   Overlay,
   Portal,
   Position,
-  Transition,
   RootCloseWrapper,
 } from './lib';
 

types/react-overlays/lib/Modal.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { TransitionCallbacks } from 'react-overlays';
+import { TransitionProps } from 'react-transition-group/Transition';
 import * as ModalManager from './ModalManager';
 import { PortalProps } from './Portal';
 
@@ -88,13 +89,13 @@ interface ModalProps extends TransitionCallbacks, PortalProps {
    * A `react-transition-group@2.0.0` `<Transition/>` component used
    * to control animations for the dialog component.
    */
-  transition?: Element;
+  transition?: React.ComponentType<TransitionProps>;
 
   /**
    * A `react-transition-group@2.0.0` `<Transition/>` component used
    * to control animations for the backdrop components.
    */
-  backdropTransition?: Element;
+  backdropTransition?: React.ComponentType<TransitionProps>;
 
   /**
    * When `true` The modal will automatically shift focus to itself when it opens, and

types/react-overlays/lib/Overlay.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { TransitionCallbacks } from 'react-overlays';
+import { TransitionProps } from 'react-transition-group/Transition';
 import { PortalProps } from './Portal';
 import { PositionProps } from './Position';
 
@@ -29,5 +30,5 @@ interface OverlayProps extends TransitionCallbacks, PortalProps, PositionProps {
    * A `react-transition-group@2.0.0` `<Transition/>` component
    * used to animate the overlay as it changes visibility.
    */
-  transition?: Element;
+  transition?: React.ComponentType<TransitionProps>;
 }

types/react-overlays/lib/Transition.d.ts

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { TransitionCallbacks } from 'react-overlays';
-
-declare class Transition extends React.Component<TransitionProps> { }
-declare namespace Transition { }
-export = Transition;
-
-interface TransitionProps extends TransitionCallbacks {
-	className?: string;
-
-	/**
-	 * Show the component; triggers the enter or exit animation
-	 */
-	in?: boolean;
-
-	/**
-	 * Unmount the component (remove it from the DOM) when it is not shown
-	 */
-	unmountOnExit?: boolean;
-
-	/**
-	 * Run the enter animation when the component mounts, if it is initially
-	 * shown
-	 */
-	transitionAppear?: boolean;
-
-	/**
-	 * A Timeout for the animation, in milliseconds, to ensure that a node doesn't
-	 * transition indefinately if the browser transitionEnd events are
-	 * canceled or interrupted.
-	 *
-	 * By default this is set to a high number (5 seconds) as a failsafe. You should consider
-	 * setting this to the duration of your animation (or a bit above it).
-	 */
-	timeout?: number;
-
-	/**
-	 * CSS class or classes applied when the component is exited
-	 */
-	exitedClassName?: string;
-
-	/**
-	 * CSS class or classes applied while the component is exiting
-	 */
-	exitingClassName?: string;
-
-	/**
-	 * CSS class or classes applied when the component is entered
-	 */
-	enteredClassName?: string;
-
-	/**
-	 * CSS class or classes applied while the component is entering
-	 */
-	enteringClassName?: string;
-}

types/react-overlays/lib/index.d.ts

@@ -5,7 +5,6 @@ import * as ModalManager from './ModalManager';
 import * as Overlay from './Overlay';
 import * as Portal from './Portal';
 import * as Position from './Position';
-import * as Transition from './Transition';
 import * as RootCloseWrapper from './RootCloseWrapper';
 
 export {
@@ -16,6 +15,5 @@ export {
   Overlay,
   Portal,
   Position,
-  Transition,
   RootCloseWrapper,
 };

types/react-overlays/test/react-overlays-tests-individual.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 
-import * as Transition from 'react-overlays/lib/Transition';
 import * as Portal from 'react-overlays/lib/Portal';
 import * as Modal from 'react-overlays/lib/Modal';
 import * as Position from 'react-overlays/lib/Position';
@@ -9,19 +8,7 @@ import * as Affix from 'react-overlays/lib/Affix';
 import * as AutoAffix from 'react-overlays/lib/AutoAffix';
 import * as RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper';
 
-function testTransition() {
-  return (
-    <Transition
-      in={true}
-      timeout={100}
-      className='fade'
-      enteredClassName='in'
-      enteringClassName='in'
-    >
-      <div>Test</div>
-    </Transition>
-  );
-}
+import { OverlayFade } from './react-overlays-tests-transition';
 
 class TestAffix extends React.Component {
   render(): JSX.Element {
@@ -35,6 +22,32 @@ class TestAffix extends React.Component {
   }
 }
 
+class TestOverlay extends React.Component<{}, {open: boolean}> {
+  target: HTMLElement | null = null;
+  state = {open: false};
+
+  render(): JSX.Element {
+    const { open } = this.state;
+
+    return (
+        <div>
+            <button type="button"
+                    ref={(ref) => this.target = ref}
+                    onClick={() => this.setState({open: !open})}>Click me</button>
+
+            <Overlay show={open}
+                     rootClose={true}
+                     target={() => this.target}
+                     transition={OverlayFade}
+                     onHide={() => this.setState({open: false})}
+                     placement="bottom">
+                <div>Popover content</div>
+            </Overlay>
+        </div>
+    );
+  }
+}
+
 class TestRootCloseWrapper extends React.Component {
   handleRootClose = () => { };
   render() {

types/react-overlays/test/react-overlays-tests-transition.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { TransitionProps } from 'react-transition-group/Transition';
+
+export function OverlayFade(props: TransitionProps): JSX.Element {
+  return (
+    <CSSTransition {...props}
+                   classNames="overlay-fade"
+                   appear={true}
+                   timeout={150}/>
+  );
+}

types/react-overlays/test/react-overlays-tests.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 
 import {
-  Transition,
   Portal,
   Modal,
   Position,
@@ -11,19 +10,7 @@ import {
   RootCloseWrapper,
 } from "react-overlays";
 
-function testTransition() {
-  return (
-    <Transition
-      in={true}
-      timeout={100}
-      className='fade'
-      enteredClassName='in'
-      enteringClassName='in'
-    >
-      <div>Test</div>
-    </Transition>
-  );
-}
+import { OverlayFade } from './react-overlays-tests-transition';
 
 class TestAffix extends React.Component {
   render(): JSX.Element {
@@ -37,6 +24,32 @@ class TestAffix extends React.Component {
   }
 }
 
+class TestOverlay extends React.Component<{}, {open: boolean}> {
+  target: HTMLElement | null = null;
+  state = {open: false};
+
+  render(): JSX.Element {
+    const { open } = this.state;
+
+    return (
+        <div>
+            <button type="button"
+                    ref={(ref) => this.target = ref}
+                    onClick={() => this.setState({open: !open})}>Click me</button>
+
+            <Overlay show={open}
+                     rootClose={true}
+                     target={() => this.target}
+                     transition={OverlayFade}
+                     onHide={() => this.setState({open: false})}
+                     placement="bottom">
+                <div>Popover content</div>
+            </Overlay>
+        </div>
+    );
+  }
+}
+
 class TestRootCloseWrapper extends React.Component {
   handleRootClose = () => { };
   render() {

types/react-overlays/tsconfig.json

@@ -21,6 +21,7 @@
     "files": [
         "index.d.ts",
         "test/react-overlays-tests.tsx",
-        "test/react-overlays-tests-individual.tsx"
+        "test/react-overlays-tests-individual.tsx",
+        "test/react-overlays-tests-transition.tsx"
     ]
 }