@onewelcome/react-lib-components 0.2.1 → 0.2.2

package/src/Button/IconButton.test.tsx

@@ -1,9 +1,9 @@
-import React, { useRef, useEffect } from 'react';
-import { IconButton, Props } from './IconButton';
-import { render } from '@testing-library/react';
+import React, { useRef, useEffect } from "react";
+import { IconButton, Props } from "./IconButton";
+import { render } from "@testing-library/react";
 
 const defaultParams: Props = {
-  title: 'iconbutton',
+  title: "iconbutton"
 };
 
 const createIconButton = (params?: (defaultParams: Props) => Props) => {
@@ -16,26 +16,26 @@ const createIconButton = (params?: (defaultParams: Props) => Props) => {
       iconButton content
     </IconButton>
   );
-  const iconButton = queries.getByTestId('iconButton');
+  const iconButton = queries.getByTestId("iconButton");
 
   return {
     ...queries,
-    iconButton,
+    iconButton
   };
 };
 
-describe('IconButton should render', () => {
-  it('renders without crashing', () => {
+describe("IconButton should render", () => {
+  it("renders without crashing", () => {
     const { iconButton } = createIconButton();
 
     expect(iconButton).toBeDefined();
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -51,56 +51,56 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);
   });
 });
 
-describe('Different variants of the button', () => {
+describe("Different variants of the button", () => {
   it('should have a class of "primary"', () => {
     const { iconButton } = createIconButton();
-    expect(iconButton.classList.contains('primary')).toBe(true);
+    expect(iconButton.classList.contains("primary")).toBe(true);
   });
 
   it('should have a class of "secondary"', () => {
-    const { iconButton } = createIconButton((defaultParams) => ({
+    const { iconButton } = createIconButton(defaultParams => ({
       ...defaultParams,
-      color: 'secondary',
+      color: "secondary"
     }));
-    expect(iconButton.classList.contains('secondary')).toBe(true);
+    expect(iconButton.classList.contains("secondary")).toBe(true);
   });
 
   it('should have a class of "tertiary"', () => {
-    const { iconButton } = createIconButton((defaultParams) => ({
+    const { iconButton } = createIconButton(defaultParams => ({
       ...defaultParams,
-      color: 'tertiary',
+      color: "tertiary"
     }));
-    expect(iconButton.classList.contains('tertiary')).toBe(true);
+    expect(iconButton.classList.contains("tertiary")).toBe(true);
   });
 
   it('should have a class of "fill"', () => {
-    const { iconButton } = createIconButton((defaultParams) => ({
+    const { iconButton } = createIconButton(defaultParams => ({
       ...defaultParams,
-      variant: 'fill',
+      variant: "fill"
     }));
-    expect(iconButton.classList.contains('fill')).toBe(true);
+    expect(iconButton.classList.contains("fill")).toBe(true);
   });
 
   it('should have a class of "outline"', () => {
-    const { iconButton } = createIconButton((defaultParams) => ({
+    const { iconButton } = createIconButton(defaultParams => ({
       ...defaultParams,
-      variant: 'outline',
+      variant: "outline"
     }));
-    expect(iconButton.classList.contains('outline')).toBe(true);
+    expect(iconButton.classList.contains("outline")).toBe(true);
   });
 
   it('should have a class of "text"', () => {
-    const { iconButton } = createIconButton((defaultParams) => ({
+    const { iconButton } = createIconButton(defaultParams => ({
       ...defaultParams,
-      variant: 'text',
+      variant: "text"
     }));
-    expect(iconButton.classList.contains('text')).toBe(true);
+    expect(iconButton.classList.contains("text")).toBe(true);
   });
 });

package/src/Button/IconButton.tsx

@@ -1,19 +1,19 @@
-import React, { Fragment } from 'react';
-import { BaseButton, Props as BaseButtonProps } from './BaseButton';
-import classes from './IconButton.module.scss';
-import readyclasses from '../readyclasses.module.scss';
+import React, { Fragment } from "react";
+import { BaseButton, Props as BaseButtonProps } from "./BaseButton";
+import classes from "./IconButton.module.scss";
+import readyclasses from "../readyclasses.module.scss";
 
 export interface Props extends BaseButtonProps {
   children?: React.ReactNode;
-  iconSize?: 's' | 'm' | 'l';
-  variant?: 'text' | 'fill' | 'outline';
+  iconSize?: "s" | "m" | "l";
+  variant?: "text" | "fill" | "outline";
   className?: string;
   title?: string;
 }
 
 export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
   (
-    { children, color = 'primary', variant = 'text', iconSize = 'm', title, className, ...rest },
+    { children, color = "primary", variant = "text", iconSize = "m", title, className, ...rest },
     ref
   ) => {
     if (!title) {
@@ -21,10 +21,10 @@ export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
     }
 
     const iconButtonClasses = [
-      classes['icon-button'],
+      classes["icon-button"],
       classes[variant],
       classes[color],
-      classes['button-' + iconSize],
+      classes["button-" + iconSize]
     ];
 
     if (className) {
@@ -32,10 +32,10 @@ export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
     }
 
     return (
-      <BaseButton {...rest} ref={ref} className={iconButtonClasses.join(' ')}>
+      <BaseButton {...rest} ref={ref} className={iconButtonClasses.join(" ")}>
         <Fragment>
           {children}
-          <span className={readyclasses['sr-only']}>{title}</span>
+          <span className={readyclasses["sr-only"]}>{title}</span>
         </Fragment>
       </BaseButton>
     );

package/src/ContextMenu/ContextMenu.test.tsx

@@ -1,15 +1,15 @@
-import React, { useEffect, useRef } from 'react';
-import { ContextMenu, Props } from './ContextMenu';
-import { render } from '@testing-library/react';
-import { Button } from '../Button/Button';
-import { ContextMenuItem } from './ContextMenuItem';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { ContextMenu, Props } from "./ContextMenu";
+import { render } from "@testing-library/react";
+import { Button } from "../Button/Button";
+import { ContextMenuItem } from "./ContextMenuItem";
+import userEvent from "@testing-library/user-event";
 
 const onShow = jest.fn();
 const onClick = jest.fn();
 
 const defaultParams: Props = {
-  id: 'example-contextmenu',
+  id: "example-contextmenu",
   trigger: <Button data-testid="trigger">Click me for a context menu</Button>,
   children: [
     <ContextMenuItem onClick={onClick} data-testid="contextmenuitem" key="1">
@@ -20,10 +20,10 @@ const defaultParams: Props = {
     </ContextMenuItem>,
     <ContextMenuItem onClick={onClick} data-testid="contextmenuitem3" key="3">
       Example item 3
-    </ContextMenuItem>,
+    </ContextMenuItem>
   ],
   show: false,
-  onShow: onShow,
+  onShow: onShow
 };
 
 const createContextMenu = (params?: (defaultParams: Props) => Props) => {
@@ -34,24 +34,24 @@ const createContextMenu = (params?: (defaultParams: Props) => Props) => {
 
   const queries = render(<ContextMenu {...parameters} data-testid="contextmenu"></ContextMenu>);
 
-  const contextmenu = queries.getByTestId('contextmenu');
-  const trigger = queries.getByTestId('trigger');
+  const contextmenu = queries.getByTestId("contextmenu");
+  const trigger = queries.getByTestId("trigger");
 
   return {
     ...queries,
     contextmenu,
-    trigger,
+    trigger
   };
 };
 
-describe('ContextMenu should render', () => {
-  it('renders without crashing', () => {
+describe("ContextMenu should render", () => {
+  it("renders without crashing", () => {
     const { contextmenu } = createContextMenu();
 
     expect(contextmenu).toBeTruthy();
   });
 
-  it('executed onShow function', () => {
+  it("executed onShow function", () => {
     const { trigger } = createContextMenu();
 
     userEvent.click(trigger);
@@ -59,20 +59,20 @@ describe('ContextMenu should render', () => {
     expect(onShow).toHaveBeenCalled();
   });
 
-  it('executed onShow function', () => {
-    const { getByTestId } = createContextMenu((defaultParams) => ({
+  it("executed onShow function", () => {
+    const { getByTestId } = createContextMenu(defaultParams => ({
       ...defaultParams,
-      show: true,
+      show: true
     }));
 
-    const button = getByTestId('contextmenuitem');
+    const button = getByTestId("contextmenuitem");
 
     userEvent.click(button);
 
     expect(onClick).toHaveBeenCalled();
   });
 
-  it('should throw an error', () => {
+  it("should throw an error", () => {
     // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
     const err = console.error;
     console.error = jest.fn();
@@ -86,7 +86,7 @@ describe('ContextMenu should render', () => {
       actual = e.message;
     }
 
-    const expected = 'You need to provide an ID to the context menu';
+    const expected = "You need to provide an ID to the context menu";
 
     expect(actual).toEqual(expected);
 
@@ -94,10 +94,10 @@ describe('ContextMenu should render', () => {
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -113,121 +113,126 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);
   });
 });
 
-describe('accessibility controls', () => {
-  it('opening works correctly with arrow key down, then navigation should work with arrow keys', () => {
+describe("accessibility controls", () => {
+  it("opening works correctly with arrow key down, then navigation should work with arrow keys", () => {
     const { getByTestId, trigger } = createContextMenu();
-    const firstContextMenuItem = getByTestId('contextmenuitem');
-    const secondContextMenuItem = getByTestId('contextmenuitem2');
-    const thirdContextMenuItem = getByTestId('contextmenuitem3');
-
-    userEvent.keyboard('{arrowdown}');
-    userEvent.keyboard('{arrowdown}');
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    const firstContextMenuItem = getByTestId("contextmenuitem");
+    const secondContextMenuItem = getByTestId("contextmenuitem2");
+    const thirdContextMenuItem = getByTestId("contextmenuitem3");
+
+    userEvent.tab();
+    userEvent.keyboard("{arrowdown}");
+    userEvent.keyboard("{arrowdown}");
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
     expect(firstContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard("{arrowdown}");
     expect(secondContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard("{arrowdown}");
     expect(thirdContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard("{arrowdown}");
     expect(firstContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{arrowup}');
+    userEvent.keyboard("{arrowup}");
     expect(thirdContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{arrowup}');
+    userEvent.keyboard("{arrowup}");
     expect(secondContextMenuItem).toHaveFocus();
   });
 
-  it('opens correctly with enter key, closing works with escape key.', async () => {
+  it("opens correctly with enter key, closing works with escape key.", async () => {
     const { trigger } = createContextMenu();
 
-    userEvent.keyboard('{enter}');
+    userEvent.tab();
+    userEvent.keyboard("{enter}");
 
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
 
-    userEvent.keyboard('{escape}');
+    userEvent.keyboard("{escape}");
 
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
   });
 
-  it('opens correctly with space, home and end buttons work', () => {
+  it("opens correctly with space, home and end buttons work", () => {
     const { trigger, getByTestId } = createContextMenu();
-    const firstContextMenuItem = getByTestId('contextmenuitem');
-    const thirdContextMenuItem = getByTestId('contextmenuitem3');
+    const firstContextMenuItem = getByTestId("contextmenuitem");
+    const thirdContextMenuItem = getByTestId("contextmenuitem3");
 
-    userEvent.keyboard('{space}');
+    userEvent.tab();
+    userEvent.keyboard("{space}");
 
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
 
-    userEvent.keyboard('{end}');
+    userEvent.keyboard("{end}");
 
     expect(thirdContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{home}');
+    userEvent.keyboard("{home}");
 
     expect(firstContextMenuItem).toHaveFocus();
   });
 
-  it('opens correctly with space, navigate with arrow keys, select with enter', () => {
-    onClick.mockImplementation((e) => {
-      expect(e.target.getAttribute('data-testid')).toBe('contextmenuitem3');
+  it("opens correctly with space, navigate with arrow keys, select with enter", () => {
+    onClick.mockImplementation(e => {
+      expect(e.target.getAttribute("data-testid")).toBe("contextmenuitem3");
     });
 
-    const { trigger, getByTestId } = createContextMenu((defaultParams) => ({
-      ...defaultParams,
+    const { trigger, getByTestId } = createContextMenu(defaultParams => ({
+      ...defaultParams
     }));
-    const thirdContextMenuItem = getByTestId('contextmenuitem3');
+    const thirdContextMenuItem = getByTestId("contextmenuitem3");
 
-    userEvent.keyboard('{space}');
+    userEvent.tab();
+    userEvent.keyboard("{space}");
 
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
 
-    userEvent.keyboard('{arrowdown}');
-    userEvent.keyboard('{arrowdown}');
-    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard("{arrowdown}");
+    userEvent.keyboard("{arrowdown}");
+    userEvent.keyboard("{arrowdown}");
 
     expect(thirdContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{enter}');
+    userEvent.keyboard("{enter}");
 
     expect(onClick).toHaveBeenCalled();
   });
 
-  it('opens correctly with enter, navigate with arrow keys, select with space', () => {
-    onClick.mockImplementation((e) => {
-      expect(e.target.getAttribute('data-testid')).toBe('contextmenuitem3');
+  it("opens correctly with enter, navigate with arrow keys, select with space", () => {
+    onClick.mockImplementation(e => {
+      expect(e.target.getAttribute("data-testid")).toBe("contextmenuitem3");
     });
 
-    const { trigger, getByTestId } = createContextMenu((defaultParams) => ({
-      ...defaultParams,
+    const { trigger, getByTestId } = createContextMenu(defaultParams => ({
+      ...defaultParams
     }));
-    const thirdContextMenuItem = getByTestId('contextmenuitem3');
+    const thirdContextMenuItem = getByTestId("contextmenuitem3");
 
-    userEvent.keyboard('{enter}');
+    userEvent.tab();
+    userEvent.keyboard("{enter}");
 
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
 
-    userEvent.keyboard('{arrowdown}');
-    userEvent.keyboard('{arrowdown}');
-    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard("{arrowdown}");
+    userEvent.keyboard("{arrowdown}");
+    userEvent.keyboard("{arrowdown}");
 
     expect(thirdContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{space}');
+    userEvent.keyboard("{space}");
 
     expect(onClick).toHaveBeenCalled();
 
-    userEvent.keyboard('{space}');
+    userEvent.keyboard("{space}");
 
     expect(thirdContextMenuItem).toHaveFocus();
   });

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,21 +106,21 @@ 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) => {
+      event => {
         return showContextMenu && anchorEl.current !== event.target;
       },
       () => {
@@ -133,20 +134,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 +163,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 +179,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>,