TS clean up

src/components/index.d.ts

@@ -3,7 +3,6 @@
 /// <reference path="./date_picker/index.d.ts" />
 /// <reference path="./filter_group/index.d.ts" />
 /// <reference path="./form/index.d.ts" />
-/// <reference path="./modal/index.d.ts" />
 /// <reference path="./tabs/index.d.ts" />
 
 declare module '@elastic/eui' {

src/components/modal/__snapshots__/confirm_modal.test.js.snap → src/components/modal/__snapshots__/confirm_modal.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders EuiConfirmModal 1`] = `
+exports[`EuiConfirmModal renders EuiConfirmModal 1`] = `
 Array [
   <div
     data-focus-guard="true"
@@ -111,7 +111,7 @@ Array [
 ]
 `;
 
-exports[`renders EuiConfirmModal without EuiModalBody, if empty 1`] = `
+exports[`EuiConfirmModal renders EuiConfirmModal without EuiModalBody, if empty 1`] = `
 Array [
   <div
     data-focus-guard="true"

src/components/modal/confirm_modal.tsx

@@ -1,7 +1,12 @@
-import React, { FunctionComponent, ReactNode, useEffect } from 'react';
+import React, {
+  FunctionComponent,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react';
 import classnames from 'classnames';
 
-import { EuiModal } from './modal';
+import { EuiModal, EuiModalProps } from './modal';
 import { EuiModalFooter } from './modal_footer';
 import { EuiModalHeader } from './modal_header';
 import { EuiModalHeaderTitle } from './modal_header_title';
@@ -11,12 +16,20 @@ import { EuiButton, EuiButtonEmpty } from '../button';
 
 import { EuiText } from '../text';
 
-export interface EuiConfirmModalProps {
+export interface EuiConfirmModalProps
+  extends Omit<
+    EuiModalProps,
+    'children' | 'initialFocus' | 'onClose' | 'title'
+  > {
   children?: ReactNode;
   title?: ReactNode;
   cancelButtonText?: ReactNode;
   confirmButtonText?: ReactNode;
-  onCancel: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onCancel: (
+    event?:
+      | React.KeyboardEvent<HTMLDivElement>
+      | React.MouseEvent<HTMLButtonElement>
+  ) => void;
   onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   confirmButtonDisabled?: boolean;
   className?: string;
@@ -42,31 +55,29 @@ export interface EuiConfirmModalProps {
 export const CONFIRM_BUTTON = 'confirm';
 export const CANCEL_BUTTON = 'cancel';
 
-export const EuiConfirmModal: FunctionComponent<EuiConfirmModalProps> = (
-  props: EuiConfirmModalProps
-) => {
-  const {
-    children,
-    title,
-    onCancel,
-    onConfirm,
-    cancelButtonText,
-    confirmButtonText,
-    confirmButtonDisabled,
-    className,
-    buttonColor = 'primary',
-    defaultFocusedButton,
-    ...rest
-  } = props;
-
-  let cancelButton: any;
-  let confirmButton: any;
+export const EuiConfirmModal: FunctionComponent<EuiConfirmModalProps> = ({
+  children,
+  title,
+  onCancel,
+  onConfirm,
+  cancelButtonText,
+  confirmButtonText,
+  confirmButtonDisabled,
+  className,
+  buttonColor = 'primary',
+  defaultFocusedButton,
+  ...rest
+}) => {
+  const [cancelButton, setCancelButton] = useState<
+    HTMLButtonElement | HTMLAnchorElement | null
+  >(null);
+  const [confirmButton, setConfirmButton] = useState<HTMLButtonElement | null>(
+    null
+  );
 
   useEffect(() => {
     // We have to do this instead of using `autoFocus` because React's polyfill for auto-focusing
     // elements conflicts with the focus-trap logic we have on EuiModal.
-    const { defaultFocusedButton } = props;
-
     // Wait a beat for the focus-trap to complete, and then set focus to the right button. Check that
     // the buttons exist first, because it's possible the modal has been closed already.
     requestAnimationFrame(() => {
@@ -76,10 +87,11 @@ export const EuiConfirmModal: FunctionComponent<EuiConfirmModalProps> = (
         confirmButton.focus();
       }
     });
-  }, [cancelButton, confirmButton, props]);
+  });
 
-  const confirmRef = (node: any) => (confirmButton = node);
-  const cancelRef = (node: any) => (cancelButton = node);
+  const confirmRef = (node: HTMLButtonElement | null) => setConfirmButton(node);
+  const cancelRef = (node: HTMLButtonElement | HTMLAnchorElement | null) =>
+    setCancelButton(node);
 
   const classes = classnames('euiModal--confirmation', className);
 

src/components/modal/index.ts

@@ -5,7 +5,10 @@ export {
   CANCEL_BUTTON as EUI_MODAL_CANCEL_BUTTON,
 } from './confirm_modal';
 export { EuiModal, EuiModalProps } from './modal';
-export { EuiModalFooter } from './modal_footer';
-export { EuiModalHeader } from './modal_header';
-export { EuiModalBody } from './modal_body';
-export { EuiModalHeaderTitle } from './modal_header_title';
+export { EuiModalFooter, EuiModalFooterProps } from './modal_footer';
+export { EuiModalHeader, EuiModalHeaderProps } from './modal_header';
+export { EuiModalBody, EuiModalBodyProps } from './modal_body';
+export {
+  EuiModalHeaderTitle,
+  EuiModalHeaderTitleProps,
+} from './modal_header_title';

src/components/modal/modal.tsx

@@ -12,7 +12,11 @@ import { EuiI18n } from '../i18n';
 export interface EuiModalProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
   children: ReactNode;
-  onClose: (event?: any) => void;
+  onClose: (
+    event?:
+      | React.KeyboardEvent<HTMLDivElement>
+      | React.MouseEvent<HTMLButtonElement>
+  ) => void;
   /**
    * Sets the max-width of the modal.
    * Set to `true` to use the default (`euiBreakpoints 'm'`),
@@ -25,19 +29,15 @@ export interface EuiModalProps extends HTMLAttributes<HTMLDivElement> {
   initialFocus?: HTMLElement | (() => HTMLElement) | string;
 }
 
-export const EuiModal: FunctionComponent<EuiModalProps> = (
-  props: EuiModalProps
-) => {
-  const {
-    className,
-    children,
-    initialFocus,
-    onClose, // eslint-disable-line no-unused-vars
-    maxWidth = true,
-    style,
-    ...rest
-  } = props;
-
+export const EuiModal: FunctionComponent<EuiModalProps> = ({
+  className,
+  children,
+  initialFocus,
+  onClose,
+  maxWidth = true,
+  style,
+  ...rest
+}) => {
   const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (event.keyCode === keyCodes.ESCAPE) {
       event.preventDefault();
@@ -70,7 +70,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = (
         style={newStyle || style}
         {...rest}>
         <EuiI18n token="euiModal.closeModal" default="Closes this modal window">
-          {(closeModal: any) => (
+          {(closeModal: string) => (
             <EuiButtonIcon
               iconType="cross"
               onClick={onClose}