[EuiOutsideClickDetector] Accept standard event types

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `getDefaultEuiMarkdownProcessingPlugins` method for better control over `EuiMarkdownEditor`'s toolbar UI ([#4383](https://github.com/elastic/eui/pull/4383))
+- Changed `EuiOutsideClickDetector` events to be standard event types ([#4434](https://github.com/elastic/eui/pull/4434))
 
 **Bug fixes**
 

src/components/focus_trap/focus_trap.test.tsx

@@ -125,18 +125,18 @@ describe('EuiFocusTrap', () => {
       // but that's where the click detector listener is,
       // pass the top-level mounted component's click event on to document
       const triggerDocumentMouseDown: EventHandler<any> = (
-        e: React.MouseEvent<any, EuiEvent>
+        e: React.MouseEvent
       ) => {
         const event = new Event('mousedown') as EuiEvent;
-        event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy;
+        event.euiGeneratedBy = ((e.nativeEvent as unknown) as EuiEvent).euiGeneratedBy;
         document.dispatchEvent(event);
       };
 
       const triggerDocumentMouseUp: EventHandler<any> = (
-        e: React.MouseEvent<any, EuiEvent>
+        e: React.MouseEvent
       ) => {
-        const event = new Event('mouseup') as EuiEvent;
-        event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy;
+        const event = new Event('mousedown') as EuiEvent;
+        event.euiGeneratedBy = ((e.nativeEvent as unknown) as EuiEvent).euiGeneratedBy;
         document.dispatchEvent(event);
       };
 

src/components/outside_click_detector/outside_click_detector.test.tsx

@@ -47,18 +47,18 @@ describe('EuiOutsideClickDetector', () => {
       // but that's where the click detector listener is,
       // pass the top-level mounted component's click event on to document
       const triggerDocumentMouseDown: EventHandler<any> = (
-        e: ReactMouseEvent<any, EuiEvent>
+        e: ReactMouseEvent
       ) => {
         const event = new Event('mousedown') as EuiEvent;
-        event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy;
+        event.euiGeneratedBy = ((e.nativeEvent as unknown) as EuiEvent).euiGeneratedBy;
         document.dispatchEvent(event);
       };
 
       const triggerDocumentMouseUp: EventHandler<any> = (
-        e: ReactMouseEvent<any, EuiEvent>
+        e: ReactMouseEvent
       ) => {
         const event = new Event('mouseup') as EuiEvent;
-        event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy;
+        event.euiGeneratedBy = ((e.nativeEvent as unknown) as EuiEvent).euiGeneratedBy;
         document.dispatchEvent(event);
       };
 

src/components/outside_click_detector/outside_click_detector.ts

@@ -36,12 +36,12 @@ interface Props {
    * ReactNode to render as this component's content
    */
   children: ReactElement<any>;
-  onOutsideClick: (event: EuiEvent) => void;
+  onOutsideClick: (event: Event) => void;
   isDisabled?: boolean;
-  onMouseDown?: (event: ReactMouseEvent<any, EuiEvent>) => void;
-  onMouseUp?: (event: ReactMouseEvent<any, EuiEvent>) => void;
-  onTouchStart?: (event: ReactMouseEvent<any, EuiEvent>) => void;
-  onTouchEnd?: (event: ReactMouseEvent<any, EuiEvent>) => void;
+  onMouseDown?: (event: ReactMouseEvent) => void;
+  onMouseUp?: (event: ReactMouseEvent) => void;
+  onTouchStart?: (event: ReactMouseEvent) => void;
+  onTouchEnd?: (event: ReactMouseEvent) => void;
 }
 
 export class EuiOutsideClickDetector extends Component<Props> {
@@ -84,14 +84,16 @@ export class EuiOutsideClickDetector extends Component<Props> {
     this.capturedDownIds = [];
   }
 
-  onClickOutside: EventHandler<any> = (event: EuiEvent) => {
+  onClickOutside: EventHandler<any> = (e: Event) => {
     const { isDisabled, onOutsideClick } = this.props;
 
     if (isDisabled) {
       this.capturedDownIds = [];
       return;
     }
 
+    const event = (e as unknown) as EuiEvent;
+
     if (
       (event.euiGeneratedBy && event.euiGeneratedBy.includes(this.id)) ||
       this.capturedDownIds.includes(this.id)
@@ -115,28 +117,29 @@ export class EuiOutsideClickDetector extends Component<Props> {
   }
 
   onChildClick = (
-    event: ReactMouseEvent<any, EuiEvent>,
-    cb: (event: ReactMouseEvent<any, EuiEvent>) => void
+    event: ReactMouseEvent,
+    cb: (event: ReactMouseEvent) => void
   ) => {
     // to support nested click detectors, build an array
-    // of detector ids that have been encountered
+    // of detector ids that have been encountered;
     if (event.nativeEvent.hasOwnProperty('euiGeneratedBy')) {
-      event.nativeEvent.euiGeneratedBy.push(this.id);
+      ((event.nativeEvent as unknown) as EuiEvent).euiGeneratedBy.push(this.id);
     } else {
-      event.nativeEvent.euiGeneratedBy = [this.id];
+      ((event.nativeEvent as unknown) as EuiEvent).euiGeneratedBy = [this.id];
     }
     if (cb) cb(event);
   };
 
-  onChildMouseDown = (event: ReactMouseEvent<any, EuiEvent>) => {
+  onChildMouseDown = (event: ReactMouseEvent) => {
     this.onChildClick(event, (e) => {
-      this.capturedDownIds = e.nativeEvent.euiGeneratedBy;
+      const nativeEvent = (e.nativeEvent as unknown) as EuiEvent;
+      this.capturedDownIds = nativeEvent.euiGeneratedBy;
       if (this.props.onMouseDown) this.props.onMouseDown(e);
       if (this.props.onTouchStart) this.props.onTouchStart(e);
     });
   };
 
-  onChildMouseUp = (event: ReactMouseEvent<any, EuiEvent>) => {
+  onChildMouseUp = (event: ReactMouseEvent) => {
     this.onChildClick(event, (e) => {
       if (this.props.onMouseUp) this.props.onMouseUp(e);
       if (this.props.onTouchEnd) this.props.onTouchEnd(e);