Update popup behavior.

umami-software · Oct 17, 2023 · 446bb86 · 446bb86
1 parent 4d74836
commit 446bb86
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 48 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-basics",
-  "version": "0.103.0",
+  "version": "0.104.0",
   "description": "Everyday components for React",
   "license": "MIT",
   "repository": {

diff --git a/src/components/input/Menu.tsx b/src/components/input/Menu.tsx
@@ -25,6 +25,7 @@ export function Menu(props: MenuProps) {
   } = props;
 
   function handleSelect(key: Key, e: MouseEvent) {
+    e.stopPropagation();
     onSelect?.(key, e);
   }
 

diff --git a/src/components/overlay/Popup.tsx b/src/components/overlay/Popup.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, ReactNode, Ref } from 'react';
+import { forwardRef, Ref } from 'react';
 import { CommonProps } from 'components/types';
 import classNames from 'classnames';
 import usePopup from 'hooks/usePopup';
@@ -8,19 +8,11 @@ import styles from './Popup.module.css';
 export interface PopupProps extends CommonProps {
   position?: 'top' | 'bottom' | 'left' | 'right';
   alignment?: 'start' | 'end' | 'center';
-  popupElement?: ReactNode;
 }
 
 function Popup(props: PopupProps, forwardedRef?: Ref<HTMLDivElement>) {
-  const { close } = usePopup();
-  const {
-    position = 'bottom',
-    alignment = 'center',
-    popupElement,
-    className,
-    children,
-    ...domProps
-  } = props;
+  const { close, wrapperElement } = usePopup();
+  const { position = 'bottom', alignment = 'center', className, children, ...domProps } = props;
 
   return (
     <div
@@ -29,7 +21,7 @@ function Popup(props: PopupProps, forwardedRef?: Ref<HTMLDivElement>) {
       className={classNames(styles.popup, className, styles[position], styles[alignment])}
       onClick={e => e.stopPropagation()}
     >
-      {typeof children === 'function' ? children(close, popupElement) : children}
+      {typeof children === 'function' ? children(close, wrapperElement) : children}
     </div>
   );
 }

diff --git a/src/components/trigger/PopupTrigger.tsx b/src/components/trigger/PopupTrigger.tsx
@@ -1,4 +1,4 @@
-import { cloneElement, createContext, EventHandler, useRef, useState } from 'react';
+import { cloneElement, createContext, EventHandler, useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
 import useDocumentClick from 'hooks/useDocumentClick';
 import useKeyDown from 'hooks/useKeyDown';
@@ -29,42 +29,67 @@ export function PopupTrigger(props: PopupTriggerProps) {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const clickEnabled = !disabled && action === 'click';
   const hoverEnabled = !disabled && action === 'hover';
+  const [triggerElement, popupElement] = children;
 
-  useKeyDown('Escape', () => setShow(false));
+  console.log({ triggerElement, popupElement });
 
-  useDocumentClick(e => {
-    if (!wrapperRef?.current?.contains(e.target)) {
-      setShow(false);
-      onTrigger?.(false, e);
-    }
-  });
+  useKeyDown('Escape', () => setShow(false));
 
-  const handleClick = e => {
-    setShow(state => {
-      onTrigger?.(!state, e);
-      return !state;
-    });
-  };
+  useDocumentClick(
+    useCallback(
+      e => {
+        if (show && !wrapperRef?.current?.contains(e.target)) {
+          setShow(false);
+          onTrigger?.(false, e);
+        }
+      },
+      [show],
+    ),
+  );
 
-  const handleEnter = e => {
-    setShow(true);
-    onTrigger?.(true, e);
-  };
+  const handleClick = useCallback(
+    e => {
+      setShow(state => {
+        onTrigger?.(!state, e);
+        return !state;
+      });
+    },
+    [triggerElement],
+  );
 
-  const handleLeave = e => {
-    setShow(false);
-    onTrigger?.(false, e);
-  };
+  const handleEnter = useCallback(
+    e => {
+      setShow(true);
+      onTrigger?.(true, e);
+    },
+    [triggerElement],
+  );
 
-  const handleClose = e => {
-    setShow(false);
-    onTrigger?.(false, e);
-  };
+  const handleLeave = useCallback(
+    e => {
+      setShow(false);
+      onTrigger?.(false, e);
+    },
+    [triggerElement],
+  );
 
-  const [triggerElement, popupElement] = children;
+  const handleClose = useCallback(
+    e => {
+      setShow(false);
+      onTrigger?.(false, e);
+    },
+    [triggerElement],
+  );
 
   return (
-    <PopupContext.Provider value={{ close: handleClose } as any}>
+    <PopupContext.Provider
+      value={
+        {
+          close: handleClose,
+          wrapperElement: wrapperRef.current,
+        } as any
+      }
+    >
       <div
         {...domProps}
         ref={wrapperRef}
@@ -74,12 +99,12 @@ export function PopupTrigger(props: PopupTriggerProps) {
         onMouseLeave={hoverEnabled ? handleLeave : undefined}
       >
         {triggerElement &&
-          cloneElement(triggerElement as any, {
+          cloneElement(triggerElement, {
             className: classNames(triggerElement.props.className, {
               [styles.clickable]: clickEnabled,
             }),
           })}
-        {show && cloneElement(popupElement as any, { popupElement: wrapperRef.current })}
+        {show && popupElement}
       </div>
     </PopupContext.Provider>
   );

diff --git a/src/hooks/useDocumentClick.ts b/src/hooks/useDocumentClick.ts
@@ -1,13 +1,13 @@
 import { useCallback, useEffect } from 'react';
 
 export function useDocumentClick(handler) {
-  const onClick = useCallback(handler, []);
+  const onClick = useCallback(handler, [handler]);
 
   useEffect(() => {
-    document.addEventListener('click', onClick);
+    document.body.addEventListener('click', onClick);
 
     return () => {
-      document.removeEventListener('click', onClick);
+      document.body.removeEventListener('click', onClick);
     };
   }, [onClick]);
 

diff --git a/src/hooks/usePopup.tsx b/src/hooks/usePopup.tsx
@@ -2,9 +2,9 @@ import { useContext } from 'react';
 import { PopupContext } from 'components/trigger/PopupTrigger';
 
 export function usePopup() {
-  const { close } = useContext<any>(PopupContext);
+  const { close, wrapperElement } = useContext<any>(PopupContext);
 
-  return { close };
+  return { close, wrapperElement };
 }
 
 export default usePopup;