Converted EuiToolTipPopover to TS (#1800)

* Converted EuiToolTipPopover to TS

* Updated Changelog

* `EuiToolTipPopover` Code review fixes

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiToolTipPopover` to TS ([#1800](https://github.com/elastic/eui/pull/1800))
 - Converted `EuiTableHeaderMobile` to TS ([#1786](https://github.com/elastic/eui/pull/1786))
 - Added `menuLeft` and `menuRight` icons ([#1797](https://github.com/elastic/eui/pull/1797))
 - Updated EuiNavDrawer’s collapse/expand button to use `menuLeft` and `menuRight` icons ([#1797](https://github.com/elastic/eui/pull/1797))

src/components/tool_tip/index.d.ts

@@ -1,3 +1,4 @@
+export { EuiToolTipPopover } from './tool_tip_popover';
 import { ReactElement, ReactNode, FunctionComponent } from 'react';
 import { EuiIcon } from '../icon';
 import { Omit, PropsOf } from '../common';

src/components/tool_tip/tool_tip_popover.test.js → src/components/tool_tip/tool_tip_popover.test.tsx

@@ -7,10 +7,9 @@ import { EuiToolTipPopover } from './tool_tip_popover';
 describe('EuiToolTipPopover', () => {
   test('is rendered', () => {
     const component = render(
+      // tslint:disable-next-line:no-empty
       <EuiToolTipPopover positionToolTip={() => {}} {...requiredProps} />
     );
-
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });

src/components/tool_tip/tool_tip_popover.js → src/components/tool_tip/tool_tip_popover.tsx

@@ -1,17 +1,17 @@
-import React, {
-  Component,
-} from 'react';
-import PropTypes from 'prop-types';
+import React, { HTMLAttributes, Component, ReactNode } from 'react';
 import classNames from 'classnames';
+import { CommonProps } from '../common';
 
-export class EuiToolTipPopover extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    title: PropTypes.node,
-    positionToolTip: PropTypes.func.isRequired,
-    popoverRef: PropTypes.func,
-  }
+export type EuiToolTipPopoverProps = CommonProps &
+  HTMLAttributes<HTMLDivElement> & {
+    positionToolTip: (rect: ClientRect | DOMRect) => void;
+    children?: ReactNode;
+    title?: ReactNode;
+    popoverRef?: (ref: HTMLDivElement) => void;
+  };
+
+export class EuiToolTipPopover extends Component<EuiToolTipPopoverProps> {
+  private popover: HTMLDivElement | undefined;
 
   updateDimensions = () => {
     requestAnimationFrame(() => {
@@ -22,12 +22,12 @@ export class EuiToolTipPopover extends Component {
     });
   };
 
-  setPopoverRef = ref => {
+  setPopoverRef = (ref: HTMLDivElement) => {
     this.popover = ref;
     if (this.props.popoverRef) {
       this.props.popoverRef(ref);
     }
-  }
+  };
 
   componentDidMount() {
     document.body.classList.add('euiBody-hasPortalContent');
@@ -46,29 +46,20 @@ export class EuiToolTipPopover extends Component {
       children,
       title,
       className,
-      positionToolTip, // eslint-disable-line no-unused-vars
-      popoverRef, // eslint-disable-line no-unused-vars
+      positionToolTip,
+      popoverRef,
       ...rest
     } = this.props;
 
-    const classes = classNames(
-      'euiToolTipPopover',
-      className
-    );
+    const classes = classNames('euiToolTipPopover', className);
 
     let optionalTitle;
     if (title) {
-      optionalTitle = (
-        <div className="euiToolTip__title">{title}</div>
-      );
+      optionalTitle = <div className="euiToolTip__title">{title}</div>;
     }
 
     return (
-      <div
-        className={classes}
-        ref={this.setPopoverRef}
-        {...rest}
-      >
+      <div className={classes} ref={this.setPopoverRef} {...rest}>
         {optionalTitle}
         {children}
       </div>