@onewelcome/react-lib-components 4.1.0 → 4.2.0

package/package.json

@@ -1,12 +1,11 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
-  "main": "dist/cjs/src/index.cjs.js",
-  "module": "dist/esm/src/index.esm.js",
-  "typings": "dist/cjs/src/index.d.ts",
+  "main": "dist/esm/src/index.esm.js",
+  "typings": "dist/esm/src/index.d.ts",
   "files": [
     "dist",
     "src"
@@ -49,81 +48,84 @@
     "node": ">=16"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@mdx-js/react": "^2.3.0",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@mdx-js/react": "^3.0.0",
     "@onewelcome/eslint-config-shared-codestyle": "^9.1.0",
-    "@onewelcome/storybook-addon-basestyling": "^0.0.2",
-    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@size-limit/preset-small-lib": "^8.2.6",
-    "@storybook/addon-a11y": "^7.2.3",
-    "@storybook/addon-actions": "^7.2.3",
-    "@storybook/addon-docs": "^7.2.3",
-    "@storybook/addon-essentials": "^7.2.3",
-    "@storybook/addon-interactions": "^7.2.3",
-    "@storybook/addon-links": "^7.2.3",
-    "@storybook/blocks": "^7.2.3",
-    "@storybook/jest": "^0.1.0",
-    "@storybook/react": "^7.2.3",
-    "@storybook/react-webpack5": "^7.2.3",
-    "@storybook/testing-library": "^0.2.0",
-    "@storybook/theming": "^7.2.3",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^6.0.0",
+    "@onewelcome/storybook-addon-basestyling": "^1.0.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@size-limit/preset-small-lib": "^10.0.1",
+    "@storybook/addon-a11y": "^7.5.2",
+    "@storybook/addon-actions": "^7.5.2",
+    "@storybook/addon-docs": "^7.5.2",
+    "@storybook/addon-essentials": "^7.5.2",
+    "@storybook/addon-interactions": "^7.5.2",
+    "@storybook/addon-links": "^7.5.2",
+    "@storybook/blocks": "^7.5.2",
+    "@storybook/components": "^7.5.2",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/manager-api": "^7.5.2",
+    "@storybook/react": "^7.5.2",
+    "@storybook/react-webpack5": "^7.5.2",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.2",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@tsconfig/recommended": "^1.0.2",
-    "@types/color-convert": "^2.0.0",
-    "@types/jest": "^29.5.3",
-    "@types/mdx": "^2.0.6",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
+    "@testing-library/user-event": "^14.5.1",
+    "@tsconfig/recommended": "^1.0.3",
+    "@types/color-convert": "^2.0.2",
+    "@types/jest": "^29.5.6",
+    "@types/mdx": "^2.0.9",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "@typescript-eslint/parser": "^6.3.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
     "babel-loader": "^9.1.3",
-    "chromatic": "^6.21.0",
+    "chromatic": "^7.5.4",
     "css-loader": "^6.8.1",
-    "eslint": "^8.47.0",
+    "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-cypress": "^2.14.0",
-    "eslint-plugin-jest": "^27.2.3",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-license-header": "^0.6.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.6.2",
-    "jest-environment-jsdom": "^29.6.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "jest-sonar-reporter": "^2.0.0",
-    "lint-staged": "^14.0.0",
+    "lint-staged": "^15.0.2",
     "mini-css-extract-plugin": "^2.7.6",
     "npm-run-all": "^4.1.5",
     "postcss-url": "^10.1.3",
-    "prettier": "^3.0.1",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "react-router": "^6.15.0",
-    "react-router-dom": "^6.15.0",
-    "remark-gfm": "^3.0.1",
+    "react-router": "^6.17.0",
+    "react-router-dom": "^6.17.0",
+    "remark-gfm": "^4.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.35.0",
-    "sass": "^1.65.1",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
-    "size-limit": "^8.2.6",
-    "storybook": "^7.2.3",
+    "size-limit": "^10.0.1",
+    "storybook": "^7.5.2",
+    "storybook-addon-pseudo-states": "^2.1.2",
     "style-loader": "^3.3.3",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   }
 }

package/src/components/Breadcrumbs/Breadcrumbs.module.scss

@@ -38,7 +38,7 @@
     }
     &:focus,
     &:focus-visible {
-      outline: 2px solid var(--color-shadow-blue);
+      outline: 2px solid var(--color-focus);
       outline-offset: 1px;
     }
 

package/src/components/ContextMenu/ContextMenu.module.scss

@@ -22,13 +22,13 @@
 
 .menu {
   white-space: nowrap;
-  margin: 1rem 0;
+  margin: 0.25rem 0;
   list-style: none;
   padding: 0;
-  min-width: 200px;
+  min-width: 10rem;
 
   &.no-margin-top {
-    margin: 0 0 1rem;
+    margin: 0 0 0.25rem;
   }
 
   button {
@@ -37,5 +37,5 @@
 }
 
 .decorative-element {
-  margin-top: 1rem;
+  margin-top: 0.5rem;
 }

package/src/components/ContextMenu/ContextMenu.test.tsx

@@ -60,14 +60,14 @@ const createContextMenu = (params?: (defaultParams: Props) => Props) => {
   };
 };
 
-describe("ContextMenu should render", () => {
-  it("renders without crashing", () => {
+describe("<ContextMenu />", () => {
+  it("should render without crashing", () => {
     const { contextmenu } = createContextMenu();
 
     expect(contextmenu).toBeTruthy();
   });
 
-  it("executed onShow function", async () => {
+  it("should execute onShow function", async () => {
     const { trigger } = createContextMenu();
 
     await userEvent.click(trigger);
@@ -75,7 +75,7 @@ describe("ContextMenu should render", () => {
     expect(onShow).toHaveBeenCalled();
   });
 
-  it("executed onShow function", async () => {
+  it("should execute onClick function on ContextMenuItem", async () => {
     const { getByTestId } = createContextMenu(defaultParams => ({
       ...defaultParams,
       show: true
@@ -88,7 +88,51 @@ describe("ContextMenu should render", () => {
     expect(onClick).toHaveBeenCalled();
   });
 
-  it("passes custom class to ContextMenuItem", () => {
+  it("should set active state based on value prop", async () => {
+    const onChange = jest.fn();
+    const { getByTestId } = createContextMenu(defaultParams => ({
+      ...defaultParams,
+      show: true,
+      value: 1,
+      onChange
+    }));
+
+    const button = getByTestId("contextmenuitem");
+    const button1 = getByTestId("contextmenuitem2");
+    const button2 = getByTestId("contextmenuitem3");
+
+    expect(button).not.toHaveClass("active");
+    expect(button1).toHaveClass("active");
+    expect(button2).not.toHaveClass("active");
+
+    await userEvent.click(button);
+
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("should set active state based on showActiveState ContextMenuItem prop", async () => {
+    const onChange = jest.fn();
+    const { getByTestId } = createContextMenu(defaultParams => ({
+      ...defaultParams,
+      show: true,
+      children: [
+        <ContextMenuItem onClick={onClick} data-testid="contextmenuitem" key="1" showActiveState>
+          Example item 1
+        </ContextMenuItem>,
+        <ContextMenuItem onClick={onClick} data-testid="contextmenuitem2" key="2">
+          Example item 2
+        </ContextMenuItem>
+      ]
+    }));
+
+    const button = getByTestId("contextmenuitem");
+    const button1 = getByTestId("contextmenuitem2");
+
+    expect(button).toHaveClass("active");
+    expect(button1).not.toHaveClass("active");
+  });
+
+  it("should pass custom class to ContextMenuItem", () => {
     const { getByRole } = createContextMenu(defaultParams => ({
       ...defaultParams,
       show: true,
@@ -104,7 +148,7 @@ describe("ContextMenu should render", () => {
     expect(child.parentElement).toHaveClass("custom");
   });
 
-  it("renders the decorative element", () => {
+  it("should render the decorative element", () => {
     const { getByText } = createContextMenu(defaultParams => ({
       ...defaultParams,
       show: true,

package/src/components/ContextMenu/ContextMenu.tsx

@@ -32,13 +32,15 @@ import { Popover, Props as PopoverProps } from "../Popover/Popover";
 import { Placement, Offset } from "../../hooks/usePosition";
 import classes from "./ContextMenu.module.scss";
 import { useBodyClick } from "../../hooks/useBodyClick";
+import { Props as ContextMenuItemProps } from "./ContextMenuItem";
 import { createPortal } from "react-dom";
 import { useGetDomRoot } from "../../hooks/useGetDomRoot";
+import { useArrowNavigation, useDefaultOffset } from "./ContextMenuService";
 
-export interface Props extends ComponentPropsWithRef<"div"> {
+export interface Props extends Omit<ComponentPropsWithRef<"div">, "onChange"> {
   trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;
   decorativeElement?: ReactNode;
-  children: ReactNode;
+  children: ReactElement<ContextMenuItemProps> | ReactElement<ContextMenuItemProps>[];
   placement?: Placement;
   transformOrigin?: Placement;
   offset?: Offset;
@@ -49,6 +51,8 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   onShow?: () => void;
   onClose?: () => void;
   popoverProps?: PopoverProps;
+  value?: number;
+  onChange?: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => void;
 }
 
 const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
@@ -61,11 +65,13 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     onShow,
     onClose,
     placement = { horizontal: "right", vertical: "top" },
-    offset = { top: 0, bottom: 0, left: 0, right: 0 },
+    offset,
     transformOrigin = { horizontal: "left", vertical: "top" },
     debounceAmount,
     domRoot,
     popoverProps,
+    value,
+    onChange,
     ...rest
   }: Props,
   ref
@@ -88,65 +94,25 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     throw new Error("You need to provide an ID to the context menu");
   }
 
-  const onArrowNavigation = (event: React.KeyboardEvent) => {
-    if (focusedContextMenuItem === -1 && selectedContextMenuItem !== -1) {
-      setFocusedContextMenuItem(selectedContextMenuItem);
-    }
-
-    const codesToPrevenDefault = [
-      "ArrowDown",
-      "ArrowUp",
-      "ArrowLeft",
-      "ArrowRight",
-      "Enter",
-      "Space",
-      "Escape",
-      "End",
-      "Home"
-    ];
-
-    if (codesToPrevenDefault.includes(event.code)) {
-      event.preventDefault();
-    }
+  const syncSelectedContextMenuItem = setSelectedContextMenuItem;
 
-    switch (event.code) {
-      case "ArrowDown":
-        if (!showContextMenu) {
-          setShowContextMenu(true);
-          return;
-        }
-        setFocusedContextMenuItem(prevState => {
-          return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;
-        });
-        return;
-      case "ArrowUp":
-        setFocusedContextMenuItem(prevState => {
-          return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;
-        });
-        return;
-      case "Enter":
-      case "Space":
-        if (!showContextMenu) {
-          setShowContextMenu(true);
-          return;
-        }
-
-        setShouldClick(true);
-        setSelectedContextMenuItem(focusedContextMenuItem);
-        setShowContextMenu(false);
-        return;
-      case "Tab":
-      case "Escape":
-        setShowContextMenu(false);
-        return;
-      case "End":
-        setFocusedContextMenuItem(childrenCount - 1);
-        return;
-      case "Home":
-        setFocusedContextMenuItem(0);
-        return;
-    }
-  };
+  useEffect(() => {
+    value !== undefined && syncSelectedContextMenuItem(value);
+  }, [value]);
+
+  const { calculateDefaultOffset } = useDefaultOffset();
+  const calculatedOffset = offset ?? calculateDefaultOffset(placement, transformOrigin);
+
+  const { onArrowNavigation } = useArrowNavigation({
+    selectedContextMenuItem,
+    setSelectedContextMenuItem,
+    focusedContextMenuItem,
+    setFocusedContextMenuItem,
+    showContextMenu,
+    setShowContextMenu,
+    childrenCount,
+    setShouldClick
+  });
 
   useBodyClick(
     event => {
@@ -193,13 +159,17 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     React.Children.map(children, (child, index) =>
       React.cloneElement(child as ReactElement, {
         onFocusChange: (childIndex: number) => setFocusedContextMenuItem(childIndex),
-        onSelectedChange: (childIndex: number) => {
+        onSelectedChange: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => {
           setSelectedContextMenuItem(childIndex);
           setShouldClick(false);
+          onChange?.(event, childIndex);
         },
         childIndex: index,
         hasFocus: focusedContextMenuItem === index,
         isSelected: selectedContextMenuItem === index,
+        showActiveState:
+          child?.props.showActiveState ??
+          (value !== undefined && selectedContextMenuItem === index),
         contextMenuOpened: showContextMenu,
         shouldClick: shouldClick
       })
@@ -226,7 +196,7 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
           {...popoverProps}
           placement={placement}
           transformOrigin={transformOrigin}
-          offset={offset}
+          offset={calculatedOffset}
           anchorEl={anchorEl}
           debounceAmount={debounceAmount}
           show={showContextMenu}

package/src/components/ContextMenu/ContextMenuItem.module.scss

@@ -14,6 +14,9 @@
  *    limitations under the License.
  */
 
+@use "../../mixins.module.scss";
+@use "../../variables.scss";
+
 .context-menu-item {
   position: relative;
 
@@ -21,28 +24,50 @@
     background-color: transparent;
     border: 0;
     font-family: var(--font-family);
-    font-size: var(--font-size);
-    line-height: var(--default-line-height);
+    font-size: var(--font-size-form-label);
+    line-height: 1.25rem; //FIXME: UCL-395
     cursor: pointer;
     width: 100%;
     height: 100%;
-    padding: 0.5rem 1.25rem;
+    padding: 0.62rem 0.75rem;
     box-sizing: border-box;
-  }
 
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: transparent;
-    width: 100%;
-    height: 100%;
-    opacity: 0.1;
-    pointer-events: none;
-  }
+    &:focus-visible {
+      outline: none;
+
+      &::after {
+        @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        z-index: calc(variables.$popover-z-index + 1);
+      }
+    }
+
+    &:hover {
+      background-color: var(--context-menu-hover-color);
+    }
+
+    &:active {
+      background-color: var(--context-menu-pressed-color);
+    }
+
+    &.active {
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        border-top-right-radius: 0.125rem;
+        border-bottom-right-radius: 0.125rem;
+        border-left: 0.25rem solid var(--color-primary);
+      }
 
-  &:hover:after {
-    background-color: var(--color-primary);
+      color: var(--color-primary);
+    }
   }
 }

package/src/components/ContextMenu/ContextMenuItem.tsx

@@ -18,21 +18,23 @@ import React, {
   ComponentPropsWithRef,
   createRef,
   ForwardRefRenderFunction,
+  ReactNode,
   RefObject,
   useEffect
 } from "react";
 import classes from "./ContextMenuItem.module.scss";
 
 export interface Props extends Omit<ComponentPropsWithRef<"button">, "onClick"> {
-  children?: string;
+  children?: ReactNode;
   hasFocus?: boolean;
   isSelected?: boolean;
+  showActiveState?: boolean;
   childIndex?: number;
   shouldClick?: boolean;
   contextMenuOpened?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   onFocusChange?: (childIndex: number) => void;
-  onSelectedChange?: (childIndex: number) => void;
+  onSelectedChange?: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => void;
 }
 
 const ContextMenuItemComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
@@ -43,6 +45,7 @@ const ContextMenuItemComponent: ForwardRefRenderFunction<HTMLButtonElement, Prop
     onSelectedChange,
     hasFocus,
     isSelected,
+    showActiveState,
     childIndex,
     contextMenuOpened,
     shouldClick,
@@ -70,13 +73,14 @@ const ContextMenuItemComponent: ForwardRefRenderFunction<HTMLButtonElement, Prop
     <li role="none" className={`${classes["context-menu-item"]} ${className ?? ""}`}>
       <button
         role="menuitem"
+        className={showActiveState ? classes["active"] : undefined}
         {...rest}
         ref={innerButtonRef}
         data-focus={hasFocus}
         tabIndex={-1}
         onClick={event => {
           onClick?.(event);
-          onSelectedChange && childIndex && onSelectedChange(childIndex);
+          childIndex !== undefined && onSelectedChange?.(event, childIndex);
         }}
       >
         {children}