fix : Added Event argument to onOpen & onClose (#233)

* Added Event argument to onOpen & onClose

* fix: fix events typing

Co-authored-by: Youssouf EL Azizi <[email protected]>

Author: marek-nogiec

__test__/index.test.tsx

@@ -68,9 +68,17 @@ describe('Popup Component Render ', () => {
     render(<SimplePopup onOpen={onOpen} onClose={onClose} />);
 
     fireEvent.click(screen.getByText('trigger'));
-    await waitFor(() => expect(onOpen).toHaveBeenCalled());
-    fireEvent.click(screen.getByText('trigger'));
-    await waitFor(() => expect(onClose).toHaveBeenCalled());
+    await waitFor(() => {
+      expect(onOpen).toHaveBeenCalled();
+      const [event] = onOpen.mock.calls[0];
+      expect(event.hasOwnProperty('target')).toBe(true);
+    });
+    fireEvent.click(screen.getByText('trigger'));
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalled();
+      const [event] = onClose.mock.calls[0];
+      expect(event.hasOwnProperty('target')).toBe(true);
+    });
     // expect(screen.getByRole('tooltip')).toBeInTheDocument();
   });
 

src/hooks.tsx

@@ -1,11 +1,14 @@
 import { useEffect, RefObject, useLayoutEffect } from 'react';
 
-export const useOnEscape = (handler: () => void, active = true) => {
+export const useOnEscape = (
+  handler: (event: KeyboardEvent) => void,
+  active = true
+) => {
   useEffect(() => {
     if (!active) return;
     const listener = (event: KeyboardEvent) => {
       // check if key is an Escape
-      if (event.key === 'Escape') handler();
+      if (event.key === 'Escape') handler(event);
     };
     document.addEventListener('keyup', listener);
 
@@ -34,24 +37,24 @@ export const useRepositionOnResize = (handler: () => void, active = true) => {
 
 export const useOnClickOutside = (
   ref: RefObject<HTMLElement> | RefObject<HTMLElement>[],
-  handler: () => void,
+  handler: (event: TouchEvent | MouseEvent) => void,
   active = true
 ) => {
   useEffect(() => {
     if (!active) return;
-    const listener = (event: any) => {
+    const listener = (event: TouchEvent | MouseEvent) => {
       // Do nothing if clicking ref's element or descendent elements
       const refs = Array.isArray(ref) ? ref : [ref];
 
       let contains = false;
       refs.forEach(r => {
-        if (!r.current || r.current.contains(event.target)) {
+        if (!r.current || r.current.contains(event.target as Node)) {
           contains = true;
           return;
         }
       });
       event.stopPropagation();
-      if (!contains) handler();
+      if (!contains) handler(event);
     };
 
     document.addEventListener('mousedown', listener);

src/index.tsx

@@ -97,38 +97,42 @@ export const Popup = forwardRef<PopupActions, PopupProps>(
       }
     }, [open, disabled]);
 
-    const openPopup = () => {
+    const openPopup = (event?: React.SyntheticEvent) => {
       if (isOpen || disabled) return;
       setIsOpen(true);
-      setTimeout(onOpen, 0);
+      setTimeout(() => onOpen(event), 0);
     };
 
-    const closePopup = () => {
+    const closePopup = (
+      event?: React.SyntheticEvent | KeyboardEvent | TouchEvent | MouseEvent
+    ) => {
       if (!isOpen || disabled) return;
       setIsOpen(false);
       if (isModal) (focusedElBeforeOpen.current as HTMLElement).focus();
-      setTimeout(onClose, 0);
+      setTimeout(() => onClose(event), 0);
     };
 
     const togglePopup = (event?: React.SyntheticEvent) => {
       event?.stopPropagation();
-      if (!isOpen) openPopup();
-      else closePopup();
+      if (!isOpen) openPopup(event);
+      else closePopup(event);
     };
 
-    const onMouseEnter = () => {
+    const onMouseEnter = (event?: React.SyntheticEvent) => {
       clearTimeout(timeOut.current);
-      timeOut.current = setTimeout(openPopup, mouseEnterDelay);
+      timeOut.current = setTimeout(() => openPopup(event), mouseEnterDelay);
     };
+
     const onContextMenu = (event?: React.SyntheticEvent) => {
       event?.preventDefault();
       togglePopup();
     };
 
-    const onMouseLeave = () => {
+    const onMouseLeave = (event?: React.SyntheticEvent) => {
       clearTimeout(timeOut.current);
-      timeOut.current = setTimeout(closePopup, mouseLeaveDelay);
+      timeOut.current = setTimeout(() => closePopup(event), mouseLeaveDelay);
     };
+
     const lockScrolll = () => {
       if (isModal && lockScroll)
         document.getElementsByTagName('body')[0].style.overflow = 'hidden'; // migrate to document.body

src/types.tsx

@@ -42,8 +42,11 @@ export interface PopupProps {
   repositionOnResize?: boolean;
   mouseEnterDelay?: number;
   mouseLeaveDelay?: number;
-  onOpen?: () => any;
-  onClose?: () => any;
+  onOpen?: (event?: React.SyntheticEvent) => void;
+  // the popup can be closed depend on multiple factor: mouse click outside, keyboard esc, click a close button
+  onClose?: (
+    event?: React.SyntheticEvent | KeyboardEvent | TouchEvent | MouseEvent
+  ) => void;
   contentStyle?: React.CSSProperties;
   overlayStyle?: React.CSSProperties;
   arrowStyle?: React.CSSProperties;