@onewelcome/react-lib-components 6.0.0 → 6.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -9,7 +9,9 @@
   "typings": "dist/cjs/src/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "src",
+    "!*/**/*.test.tsx",
+    "!*/**/*.test.ts"
   ],
   "sideEffects": [
     "*.css",
@@ -50,8 +52,8 @@
     "node": ">=16"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@mdx-js/react": "^3.0.0",
@@ -59,74 +61,75 @@
     "@onewelcome/storybook-addon-basestyling": "^1.0.0",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-actions": "^7.5.3",
-    "@storybook/addon-docs": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/components": "^7.5.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-a11y": "^7.6.10",
+    "@storybook/addon-actions": "^7.6.10",
+    "@storybook/addon-docs": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/components": "^7.6.10",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/manager-api": "^7.6.10",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-webpack5": "^7.6.10",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.5.3",
-    "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.8",
+    "@storybook/theming": "^7.6.10",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.3.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.11",
     "@types/mdx": "^2.0.10",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
     "babel-loader": "^9.1.3",
-    "chromatic": "^7.5.4",
-    "css-loader": "^6.8.1",
-    "eslint": "^8.52.0",
-    "eslint-config-prettier": "^9.0.0",
+    "chromatic": "^10.6.0",
+    "css-loader": "^6.9.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-export-scope": "^2.0.3",
+    "eslint-plugin-jest": "^27.6.3",
     "eslint-plugin-license-header": "^0.6.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "husky": "^8.0.3",
+    "husky": "^9.0.6",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "jest-sonar-reporter": "^2.0.0",
-    "lint-staged": "^15.0.2",
-    "mini-css-extract-plugin": "^2.7.6",
+    "lint-staged": "^15.2.0",
+    "mini-css-extract-plugin": "^2.7.7",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.33",
     "postcss-modules": "^6.0.0",
     "postcss-url": "^10.1.3",
-    "prettier": "^3.0.3",
+    "prettier": "^3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "react-router-dom": "^6.19.0",
+    "react-router-dom": "^6.21.3",
     "remark-gfm": "^4.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.69.5",
-    "sass-loader": "^13.3.2",
-    "size-limit": "^10.0.1",
-    "storybook": "^7.5.3",
+    "sass": "^1.70.0",
+    "sass-loader": "^14.0.0",
+    "size-limit": "^11.0.2",
+    "storybook": "^7.6.10",
     "storybook-addon-pseudo-states": "^2.1.2",
-    "style-loader": "^3.3.3",
-    "ts-jest": "^29.1.1",
+    "style-loader": "^3.3.4",
+    "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.3"
   }
 }

package/src/{hooks/useWrapper.test.ts → .scope.ts}

@@ -14,15 +14,4 @@
  *    limitations under the License.
  */
 
-import { renderHook } from "@testing-library/react";
-import { useWrapper } from "./useWrapper";
-
-describe("it should give the correct results based on no value, no placeholder and default text input", () => {
-  it("should execute correctly", () => {
-    const { result } = renderHook(() => useWrapper());
-
-    expect(result.current.helperId).toHaveLength(20);
-    expect(result.current.errorId).toHaveLength(20);
-    expect(result.current.labelId).toHaveLength(20);
-  });
-});
+export default "*";

package/src/components/ContextMenu/ContextMenu.tsx

@@ -35,7 +35,8 @@ 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";
+import { useArrowNavigation, useDefaultOffset, useFocusAnchorElement } from "./ContextMenuService";
+import { generateID } from "../../util/helper";
 
 export interface Props extends Omit<ComponentPropsWithRef<"div">, "onChange"> {
   trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;
@@ -45,7 +46,7 @@ export interface Props extends Omit<ComponentPropsWithRef<"div">, "onChange"> {
   transformOrigin?: Placement;
   offset?: Offset;
   debounceAmount?: number;
-  id: string;
+  id?: string;
   show?: boolean;
   domRoot?: HTMLElement;
   onShow?: () => void;
@@ -60,7 +61,7 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     trigger,
     children,
     decorativeElement,
-    id,
+    id = `ID-${generateID()}`,
     show = false,
     onShow,
     onClose,
@@ -79,7 +80,6 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   const anchorEl = useRef<HTMLButtonElement>(null);
   const wrappingDivRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();
   const [showContextMenu, setShowContextMenu] = useState(show);
-  const [hasBeenClosed, setHasBeenClosed] = useState(false);
   const [selectedContextMenuItem, setSelectedContextMenuItem] = useState(-1);
   const [focusedContextMenuItem, setFocusedContextMenuItem] = useState(-1);
   const [shouldClick, setShouldClick] =
@@ -90,10 +90,6 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
 
   const { root } = useGetDomRoot(domRoot, wrappingDivRef);
 
-  if (!id) {
-    throw new Error("You need to provide an ID to the context menu");
-  }
-
   const syncSelectedContextMenuItem = setSelectedContextMenuItem;
 
   useEffect(() => {
@@ -128,21 +124,15 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     showContextMenu
   );
 
-  useEffect(() => {
-    if (showContextMenu === true) {
-      onShow?.();
-    } else {
-      onClose?.();
-      !hasBeenClosed && setHasBeenClosed(true);
-      setFocusedContextMenuItem(-1);
-      // If the user clicks on the trigger button, we want to focus it again after the context menu has been closed,
-      // but only if the option doesn't open another window (such as a modal),
-      // otherwise pressing enter wouldn't fire the primary action of the modal.
-      if (document.activeElement?.closest(`.${wrappingDivRef.current?.className}`)) {
-        hasBeenClosed && anchorEl.current && anchorEl.current.focus();
-      }
-    }
-  }, [showContextMenu]);
+  useFocusAnchorElement(
+    anchorEl,
+    id,
+    showContextMenu,
+    setShowContextMenu,
+    setFocusedContextMenuItem,
+    onShow,
+    onClose
+  );
 
   const renderTrigger = () =>
     React.cloneElement(trigger, {

package/src/components/ContextMenu/ContextMenuService.ts

@@ -14,7 +14,8 @@
  *    limitations under the License.
  */
 
-import { Placement, Offset, vertical, horizontal } from "../../hooks/usePosition";
+import { SetStateAction, useEffect } from "react";
+import { horizontal, Offset, Placement, vertical } from "../../hooks/usePosition";
 import { remToPx } from "../../util/helper";
 
 interface UseArrowNavigation {
@@ -28,6 +29,7 @@ interface UseArrowNavigation {
   setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
+/** @scope . */
 export const useArrowNavigation = ({
   selectedContextMenuItem,
   setSelectedContextMenuItem,
@@ -123,3 +125,47 @@ export const useDefaultOffset = () => {
 
   return { calculateDefaultOffset };
 };
+
+export const useFocusAnchorElement = (
+  anchorEl: React.RefObject<HTMLElement>,
+  id: string,
+  showContextMenu: boolean,
+  setShowContextMenu: React.Dispatch<SetStateAction<boolean>>,
+  setFocusedContextMenuItem: React.Dispatch<SetStateAction<number>>,
+  onShow?: () => void,
+  onClose?: () => void
+) => {
+  const handleEscapeKeyPress = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      setShowContextMenu(false);
+      anchorEl.current?.focus();
+    }
+  };
+
+  const escapeKeyEventHandlerManager = () => {
+    if (showContextMenu) {
+      document.addEventListener("keydown", handleEscapeKeyPress);
+    } else {
+      document.removeEventListener("keydown", handleEscapeKeyPress);
+    }
+  };
+
+  const emitContextMenuEvent = () => {
+    if (showContextMenu) {
+      onShow?.();
+    } else {
+      onClose?.();
+
+      if (document.activeElement?.closest(`#${id}-menu`)) {
+        anchorEl.current?.focus();
+      }
+
+      setFocusedContextMenuItem(-1);
+    }
+  };
+
+  useEffect(() => {
+    escapeKeyEventHandlerManager();
+    emitContextMenuEvent();
+  }, [showContextMenu]);
+};

package/src/components/Form/Select/Option.tsx

@@ -37,6 +37,7 @@ export interface Props extends ComponentPropsWithRef<"li"> {
   childIndex?: number;
   onOptionSelect?: (ref: React.RefObject<HTMLLIElement>) => void;
   onFocusChange?: (childIndex: number) => void;
+  isAddBtnFocused?: boolean;
 }
 
 const OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
@@ -53,6 +54,7 @@ const OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
     onFocusChange,
     disabled,
     value,
+    isAddBtnFocused,
     ...rest
   }: Props,
   ref
@@ -66,7 +68,7 @@ const OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
   }, [isSelected, shouldClick]);
 
   useEffect(() => {
-    if (innerOptionRef.current && hasFocus && selectOpened && !isSearching) {
+    if (innerOptionRef.current && hasFocus && selectOpened && !isSearching && !isAddBtnFocused) {
       onFocusChange && childIndex && onFocusChange(childIndex);
       innerOptionRef.current.focus();
     }

package/src/components/Form/Select/Select.interfaces.ts

@@ -29,11 +29,13 @@ export interface UseArrowNavigationParams {
   setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;
   onOptionChangeHandler: (optionElement: HTMLElement | null) => void;
   searchInputRef: React.RefObject<HTMLInputElement>;
-  renderSearchCondition: number;
+  addBtnRef?: React.RefObject<HTMLButtonElement>;
+  renderThreshold: number;
 }
 
 export interface UseSelectPositionListParams {
   expanded: boolean;
   optionListReference: React.RefObject<HTMLDivElement>;
   containerReference: React.RefObject<HTMLDivElement>;
+  addBtnRef: React.RefObject<HTMLButtonElement>;
 }

package/src/components/Form/Select/Select.module.scss

@@ -17,7 +17,7 @@
 @use "src/mixins.module";
 @use "src/variables";
 
-$listItemHeight: 2.125rem;
+$listItemHeight: 2.5rem;
 
 .select {
   position: relative;
@@ -92,9 +92,7 @@ $listItemHeight: 2.125rem;
     border-style: var(--input-border-style);
     border-width: var(--input-border-width);
     border-radius: var(--input-border-radius);
-    box-shadow: 0px 4px 5px 0px #01053233;
-    box-shadow: 0px 3px 14px 0px #0105321f;
-    box-shadow: 0px 8px 10px 0px #01053224;
+    box-shadow: 0 8px 10px 0 #01053224;
     position: absolute;
     z-index: variables.$select-z-index;
     top: 44px;
@@ -113,39 +111,28 @@ $listItemHeight: 2.125rem;
     border-radius: var(--input-border-radius);
     color: var(--default);
     text-align: left;
-    max-height: calc($listItemHeight * 10);
 
     li {
-      padding: 0.5rem 0.75rem;
+      padding: 0.62rem 0.75rem;
       font-size: var(--form-control-font-size);
       margin: 0;
       position: relative;
-      line-height: var(--default-line-height);
+      line-height: 1.25rem;
+      box-sizing: border-box;
+      min-height: $listItemHeight;
       cursor: pointer;
 
-      &:after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        background-color: transparent;
-        width: 100%;
-        height: 100%;
-        opacity: 0.05;
-      }
-
       &:focus {
         outline: var(--input-border-width-focus) solid var(--color-primary300);
-        outline-offset: -var(--input-border-width-focus);
+        outline-offset: var(--input-border-width-focus);
       }
 
-      &:hover:after,
-      &:active:after {
-        background-color: var(--color-primary);
+      &:hover {
+        background-color: var(--color-blue-grey50);
       }
 
-      &:active:after {
-        opacity: 0.1;
+      &:active {
+        background-color: var(--color-blue-grey100);
       }
 
       &.disabled {
@@ -157,17 +144,19 @@ $listItemHeight: 2.125rem;
   }
 }
 
+ul.has-sibling {
+  padding-bottom: 2px;
+}
+
 .selected-option {
-  &: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);
-  }
+  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);
   color: var(--color-primary);
 }
 
@@ -178,6 +167,38 @@ $listItemHeight: 2.125rem;
   pointer-events: none;
 }
 
+.action-button {
+  border: none;
+  border-top: 1px solid var(--color-blue-grey50);
+  width: 100%;
+  height: 2.5rem;
+  padding: 0.625rem 0.75rem;
+  margin: 0 0 0.25rem;
+  background-color: var(--light);
+  border-radius: var(--input-border-radius);
+  color: var(--default);
+  text-align: left;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  font-family: var(--font-family);
+  font-size: var(--form-control-font-size);
+
+  &:focus {
+    outline: 1px solid;
+    outline-offset: 0;
+    border-radius: 0;
+  }
+
+  &:hover {
+    background-color: var(--color-blue-grey50);
+  }
+
+  &:active {
+    background-color: var(--color-blue-grey100);
+  }
+}
+
 .status {
   position: absolute;
   top: 50%;