EuiGlobalToastListItem convert to TS (#1880)

* `EuiGlobalToastListItem` convert to TS

* `EuiGlobalToastListItem` code review fixes

* `EuiGlobalToastListItem` updated Changelog

* `EuiGlobalToastListItem` code review fix

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiGlobalToastListItem` to TS ([#1880](https://github.com/elastic/eui/pull/1880))
 - Converted `token_map` to TS ([#1870](https://github.com/elastic/eui/pull/1870))
 - Converted `EuiOverlayMask` to TS ([#1858](https://github.com/elastic/eui/pull/1858))
 - Converted `EuiStat` to TS ([#1848](https://github.com/elastic/eui/pull/1848))

src/components/toast/global_toast_list_item.test.js → src/components/toast/global_toast_list_item.test.tsx

@@ -11,7 +11,6 @@ describe('EuiGlobalToastListItem', () => {
       </EuiGlobalToastListItem>
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });

src/components/toast/global_toast_list_item.tsx

@@ -0,0 +1,28 @@
+import { cloneElement, FunctionComponent, ReactElement } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../common';
+
+export interface EuiGlobalToastListItemProps {
+  isDismissed?: boolean;
+  children?: ReactElement;
+}
+
+export const EuiGlobalToastListItem: FunctionComponent<
+  CommonProps & EuiGlobalToastListItemProps
+> = ({ children, isDismissed }) => {
+  if (!children) {
+    return null;
+  }
+  const classes = classNames(
+    'euiGlobalToastListItem',
+    children.props.className,
+    {
+      'euiGlobalToastListItem-isDismissed': isDismissed,
+    }
+  );
+
+  return cloneElement(children, {
+    ...children.props,
+    ...{ className: classes },
+  });
+};

src/components/toast/index.d.ts

@@ -1,36 +1,35 @@
+import {
+  EuiGlobalToastListItemProps as ToastListItemProps,
+  EuiGlobalToastListItem as ToastListItem,
+} from './global_toast_list_item';
 import { CommonProps } from '../common';
 import { IconType } from '../icon';
 
-import { Component, FunctionComponent, HTMLAttributes, ReactChild } from 'react';
+import {
+  Component,
+  FunctionComponent,
+  HTMLAttributes,
+  ReactChild,
+} from 'react';
 
 declare module '@elastic/eui' {
   /**
    * EuiToast type def
    *
    * @see './toast.js'
    */
-  export interface EuiToastProps extends CommonProps, HTMLAttributes<HTMLDivElement> {
+  export interface EuiToastProps
+    extends CommonProps,
+      HTMLAttributes<HTMLDivElement> {
     title?: string,
     color?: 'primary' | 'success' | 'warning' | 'danger',
     iconType?: IconType,
     onClose?: () => void,
   }
 
   export const EuiToast: FunctionComponent<EuiToastProps>;
-
-
-  /**
-   * EuiGlobalToastListItem type def
-   *
-   * @see './global_toast_list_item.js'
-   */
-  export interface EuiGlobalToastListItemProps {
-    isDismissed?: boolean;
-  }
-
-  export const EuiGlobalToastListItem: FunctionComponent<
-    EuiGlobalToastListItemProps
-  >
+  export interface EuiGlobalToastListItemProps extends ToastListItemProps {}
+  export const EuiGlobalToastListItem: typeof ToastListItem;
 
   /**
    * EuiGlobalToastList type def