@onewelcome/react-lib-components 0.2.1 → 0.2.4

package/src/ContextMenu/ContextMenu.tsx

@@ -4,17 +4,17 @@ import React, {
   ReactNode,
   useEffect,
   useRef,
-  useState,
-} from 'react';
-import { Props as ButtonProps } from '../Button/Button';
-import { Props as IconButtonProps } from '../Button/IconButton';
-import { Popover } from '../Popover/Popover';
-import { Placement, Offset } from '../hooks/usePosition';
-import classes from './ContextMenu.module.scss';
-import { useBodyClick } from '../hooks/useBodyClick';
-import { createPortal } from 'react-dom';
+  useState
+} from "react";
+import { Props as ButtonProps } from "../Button/Button";
+import { Props as IconButtonProps } from "../Button/IconButton";
+import { Popover } from "../Popover/Popover";
+import { Placement, Offset } from "../hooks/usePosition";
+import classes from "./ContextMenu.module.scss";
+import { useBodyClick } from "../hooks/useBodyClick";
+import { createPortal } from "react-dom";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;
   children: ReactNode;
   placement?: Placement;
@@ -36,9 +36,9 @@ export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
       show = false,
       onShow,
       onClose,
-      placement = { horizontal: 'right', vertical: 'top' },
+      placement = { horizontal: "right", vertical: "top" },
       offset = { top: 0, bottom: 0, left: 0, right: 0 },
-      transformOrigin = { horizontal: 'left', vertical: 'top' },
+      transformOrigin = { horizontal: "left", vertical: "top" },
       domRoot = document.body,
       ...rest
     }: Props,
@@ -46,6 +46,7 @@ export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
   ) => {
     const anchorEl = useRef<HTMLButtonElement>(null);
     const [showContextMenu, setShowContextMenu] = useState(show);
+    const [hasBeenClosed, setHasBeenClosed] = useState(false);
     const [selectedContextMenuItem, setSelectedContextMenuItem] = useState(-1);
     const [focusedContextMenuItem, setFocusedContextMenuItem] = useState(-1);
     const [shouldClick, setShouldClick] =
@@ -55,7 +56,7 @@ export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
     const [childrenCount] = useState(React.Children.count(children));
 
     if (!id) {
-      throw new Error('You need to provide an ID to the context menu');
+      throw new Error("You need to provide an ID to the context menu");
     }
 
     const onArrowNavigation = (event: React.KeyboardEvent) => {
@@ -64,15 +65,15 @@ export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
       }
 
       const codesToPrevenDefault = [
-        'ArrowDown',
-        'ArrowUp',
-        'ArrowLeft',
-        'ArrowRight',
-        'Enter',
-        'Space',
-        'Escape',
-        'End',
-        'Home',
+        "ArrowDown",
+        "ArrowUp",
+        "ArrowLeft",
+        "ArrowRight",
+        "Enter",
+        "Space",
+        "Escape",
+        "End",
+        "Home"
       ];
 
       if (codesToPrevenDefault.includes(event.code)) {
@@ -80,22 +81,22 @@ export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
       }
 
       switch (event.code) {
-        case 'ArrowDown':
+        case "ArrowDown":
           if (!showContextMenu) {
             setShowContextMenu(true);
             return;
           }
-          setFocusedContextMenuItem((prevState) => {
+          setFocusedContextMenuItem(prevState => {
             return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;
           });
           return;
-        case 'ArrowUp':
-          setFocusedContextMenuItem((prevState) => {
+        case "ArrowUp":
+          setFocusedContextMenuItem(prevState => {
             return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;
           });
           return;
-        case 'Enter':
-        case 'Space':
+        case "Enter":
+        case "Space":
           if (!showContextMenu) {
             setShowContextMenu(true);
             return;
@@ -105,22 +106,26 @@ export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
           setSelectedContextMenuItem(focusedContextMenuItem);
           setShowContextMenu(false);
           return;
-        case 'Tab':
-        case 'Escape':
+        case "Tab":
+        case "Escape":
           setShowContextMenu(false);
           return;
-        case 'End':
+        case "End":
           setFocusedContextMenuItem(childrenCount - 1);
           return;
-        case 'Home':
+        case "Home":
           setFocusedContextMenuItem(0);
           return;
       }
     };
 
     useBodyClick(
-      (event) => {
-        return showContextMenu && anchorEl.current !== event.target;
+      event => {
+        return (
+          showContextMenu &&
+          anchorEl.current !== event.target &&
+          anchorEl.current !== (event.target as HTMLElement).parentElement
+        );
       },
       () => {
         setShowContextMenu(false);
@@ -133,20 +138,21 @@ export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
         onShow && onShow();
       } else {
         onClose && onClose();
+        !hasBeenClosed && setHasBeenClosed(true);
         setFocusedContextMenuItem(-1);
-        anchorEl.current && anchorEl.current.focus();
+        hasBeenClosed && anchorEl.current && anchorEl.current.focus();
       }
     }, [showContextMenu]);
 
     const renderTrigger = () =>
       React.cloneElement(trigger, {
         id: id,
-        'aria-haspopup': 'true',
-        'aria-controls': `${id}-menu`,
-        'aria-expanded': showContextMenu,
+        "aria-haspopup": "true",
+        "aria-controls": `${id}-menu`,
+        "aria-expanded": showContextMenu,
         onClick: () => setShowContextMenu(!showContextMenu),
         tabIndex: 0,
-        ref: anchorEl,
+        ref: anchorEl
       });
 
     const renderChildren = () => {
@@ -161,13 +167,13 @@ export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
           hasFocus: focusedContextMenuItem === index,
           isSelected: selectedContextMenuItem === index,
           contextMenuOpened: showContextMenu,
-          shouldClick: shouldClick,
+          shouldClick: shouldClick
         });
       });
     };
 
     return (
-      <div {...rest} ref={ref} onKeyDown={onArrowNavigation} className={classes['context-menu']}>
+      <div {...rest} ref={ref} onKeyDown={onArrowNavigation} className={classes["context-menu"]}>
         {renderTrigger()}
         {createPortal(
           <Popover
@@ -177,7 +183,7 @@ export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
             anchorEl={anchorEl}
             show={showContextMenu}
           >
-            <ul className={classes['menu']} id={`${id}-menu`} aria-describedby={id} role="menu">
+            <ul className={classes["menu"]} id={`${id}-menu`} aria-describedby={id} role="menu">
               {renderChildren()}
             </ul>
           </Popover>,

package/src/ContextMenu/ContextMenuItem.module.scss

@@ -14,7 +14,7 @@
   }
 
   &:after {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;

package/src/ContextMenu/ContextMenuItem.tsx

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithRef, createRef, RefObject, useEffect } from 'react';
-import classes from './ContextMenuItem.module.scss';
+import React, { ComponentPropsWithRef, createRef, RefObject, useEffect } from "react";
+import classes from "./ContextMenuItem.module.scss";
 
-export interface Props extends Omit<ComponentPropsWithRef<'button'>, 'onClick'> {
+export interface Props extends Omit<ComponentPropsWithRef<"button">, "onClick"> {
   children?: string;
   hasFocus?: boolean;
   isSelected?: boolean;
@@ -25,6 +25,7 @@ export const ContextMenuItem = React.forwardRef<HTMLButtonElement, Props>(
       childIndex,
       contextMenuOpened,
       shouldClick,
+      className,
       ...rest
     }: Props,
     ref
@@ -45,12 +46,14 @@ export const ContextMenuItem = React.forwardRef<HTMLButtonElement, Props>(
     }, [hasFocus, innerButtonRef, contextMenuOpened]);
 
     return (
-      <li role="menuitem" className={classes['context-menu-item']}>
+      <li role="none" className={`${classes["context-menu-item"]} ${className ?? ""}`}>
         <button
+          role="menuitem"
           {...rest}
           ref={innerButtonRef}
           data-focus={hasFocus}
-          onClick={(event) => {
+          tabIndex={-1}
+          onClick={event => {
             onClick && onClick(event);
             onSelectedChange && childIndex && onSelectedChange(childIndex);
           }}