@onewelcome/react-lib-components 1.4.0 → 1.5.0

package/dist/util/helper.d.ts

@@ -1,4 +1,4 @@
-declare type KeyValuePair = {
+type KeyValuePair = {
     [key: string]: unknown;
 };
 export declare const generateID: (length?: number, stringToWeaveIn?: string) => string;

package/package.json

@@ -1,6 +1,7 @@
 {
+  "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",
@@ -51,60 +52,60 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.19.3",
+    "@babel/core": "^7.20.12",
     "@mdx-js/react": "^1.6.22",
     "@onewelcome/eslint-config-shared-codestyle": "^9.0.3",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.5.12",
-    "@storybook/addon-docs": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/addons": "^6.5.12",
-    "@storybook/builder-webpack5": "^6.5.12",
-    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/addon-a11y": "^6.5.15",
+    "@storybook/addon-docs": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/addons": "^6.5.15",
+    "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.12",
-    "@storybook/theming": "^6.5.12",
-    "@testing-library/dom": "^8.18.1",
+    "@storybook/react": "^6.5.15",
+    "@storybook/theming": "^6.5.15",
+    "@testing-library/dom": "^8.19.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
-    "@tsconfig/create-react-app": "^1.0.2",
+    "@tsconfig/create-react-app": "^1.0.3",
     "@tsconfig/recommended": "^1.0.1",
     "@types/color-convert": "^2.0.0",
-    "@types/mdx": "^2.0.2",
-    "@types/react": "^17.0.50",
-    "@types/react-dom": "^17.0.17",
-    "@types/react-router": "^5.1.19",
+    "@types/mdx": "^2.0.3",
+    "@types/react": "^17.0.52",
+    "@types/react-dom": "^17.0.18",
+    "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.39.0",
-    "@typescript-eslint/parser": "^5.39.0",
-    "babel-loader": "^8.2.5",
-    "dts-cli": "^1.6.0",
-    "eslint": "^8.24.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
+    "babel-loader": "^9.1.0",
+    "dts-cli": "^1.6.3",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-jest": "^26.9.0",
+    "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-license-header": "^0.6.0",
     "eslint-plugin-prettier": "^4.2.1",
     "html-webpack-plugin": "^5.5.0",
-    "husky": "^7.0.4",
+    "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest-junit": "^13.2.0",
-    "lint-staged": "^13.0.3",
+    "jest-junit": "^15.0.0",
+    "lint-staged": "^13.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
-    "react-router": "^6.4.2",
-    "react-router-dom": "^6.4.2",
+    "react-is": "^18.2.0",
+    "react-router": "^6.6.2",
+    "react-router-dom": "^6.6.2",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-styles": "^4.0.0",
-    "sass": "^1.55.0",
+    "sass": "^1.57.1",
     "size-limit": "^7.0.8",
-    "tslib": "^2.4.0",
-    "typescript": "^4.8.4"
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.4"
   }
 }

package/src/ContextMenu/ContextMenu.tsx

@@ -19,13 +19,14 @@ import React, {
   ForwardRefRenderFunction,
   ReactElement,
   ReactNode,
+  useCallback,
   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 { Popover, Props as PopoverProps } from "../Popover/Popover";
 import { Placement, Offset } from "../hooks/usePosition";
 import classes from "./ContextMenu.module.scss";
 import { useBodyClick } from "../hooks/useBodyClick";
@@ -38,11 +39,13 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   placement?: Placement;
   transformOrigin?: Placement;
   offset?: Offset;
+  debounceAmount?: number;
   id: string;
   show?: boolean;
   domRoot?: HTMLElement;
   onShow?: () => void;
   onClose?: () => void;
+  popoverProps?: PopoverProps;
 }
 
 const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
@@ -57,7 +60,9 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     placement = { horizontal: "right", vertical: "top" },
     offset = { top: 0, bottom: 0, left: 0, right: 0 },
     transformOrigin = { horizontal: "left", vertical: "top" },
+    debounceAmount,
     domRoot = document.body,
+    popoverProps,
     ...rest
   }: Props,
   ref
@@ -173,9 +178,9 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       ref: anchorEl
     });
 
-  const renderChildren = () => {
-    return React.Children.map(children, (child, index) => {
-      return React.cloneElement(child as ReactElement, {
+  const renderChildren = () =>
+    React.Children.map(children, (child, index) =>
+      React.cloneElement(child as ReactElement, {
         onFocusChange: (childIndex: number) => setFocusedContextMenuItem(childIndex),
         onSelectedChange: (childIndex: number) => {
           setSelectedContextMenuItem(childIndex);
@@ -186,20 +191,26 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         isSelected: selectedContextMenuItem === index,
         contextMenuOpened: showContextMenu,
         shouldClick: shouldClick
-      });
-    });
-  };
+      })
+    );
+
+  const onOutOfViewHandler = useCallback(() => {
+    setShowContextMenu(false);
+  }, []);
 
   return (
     <div {...rest} ref={ref} onKeyDown={onArrowNavigation} className={classes["context-menu"]}>
       {renderTrigger()}
       {createPortal(
         <Popover
+          {...popoverProps}
           placement={placement}
           transformOrigin={transformOrigin}
           offset={offset}
           anchorEl={anchorEl}
+          debounceAmount={debounceAmount}
           show={showContextMenu}
+          onAnchorOutOfView={onOutOfViewHandler}
         >
           {decorativeElement && (
             <div className={classes["decorative-element"]}>{decorativeElement}</div>

package/src/Form/Input/Input.test.tsx

@@ -112,6 +112,18 @@ describe("Should have the appropriate attributes", () => {
     expect(input).toHaveAttribute("disabled");
     expect(input).toHaveClass("classname");
   });
+
+  it("should render an input with spellcheck enabled", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams, spellCheck: true }));
+
+    expect(input).toHaveAttribute("spellcheck", "true");
+  });
+
+  it("should render an input with spellcheck disabled by default", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams }));
+
+    expect(input).toHaveAttribute("spellcheck", "false");
+  });
 });
 
 describe("Should render all different types of inputs", () => {

package/src/Form/Input/Input.tsx

@@ -124,6 +124,7 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         name={name}
         disabled={disabled}
         className={inputClassNames.join(" ")}
+        spellCheck={rest.spellCheck || false}
       />
       {suffix && (
         <div ref={suffixRef} data-suffix className={classes["suffix"]}>

package/src/Popover/Popover.test.tsx

@@ -32,7 +32,7 @@ const createPopover = (params?: (defaultParams: Props) => Props) => {
           <li>Test</li>
         </ul>
       ),
-      show: false,
+      show: true,
       placement: { vertical: "top", horizontal: "left" }
     };
     let parameters: Props = defaultParams;
@@ -95,6 +95,9 @@ describe("Popover should render", () => {
   it("renders without crashing and has default left and top attributes", () => {
     const { popover } = createPopover();
 
+    window.dispatchEvent(new Event("resize"));
+    window.dispatchEvent(new Event("scroll"));
+
     expect(popover).toBeTruthy();
   });
 });

package/src/Popover/Popover.tsx

@@ -31,37 +31,69 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   anchorEl?: RefObject<HTMLOrSVGElement>; //eslint-disable-line no-undef
   placement?: Placement;
   offset?: Offset;
+  debounceAmount?: number;
   transformOrigin?: Placement;
+  onAnchorOutOfView?: () => void;
 }
 
 const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, className, show, placement, offset, transformOrigin, anchorEl, ...rest },
+  {
+    children,
+    className,
+    show,
+    placement,
+    offset,
+    debounceAmount,
+    transformOrigin,
+    anchorEl,
+    onAnchorOutOfView,
+    ...rest
+  },
   ref
 ) => {
   const elToBePositioned = useRef<HTMLDivElement>(null);
 
-  if (show === undefined) {
-    throw new Error('Please make sure to define the "show" property on your Popover component');
-  }
-
   const { top, left, right, bottom, calculatePosition } = usePosition({
     elementToBePositioned: elToBePositioned,
     relativeElement: anchorEl,
     offset: offset,
     placement: placement,
-    transformOrigin: transformOrigin
+    transformOrigin: transformOrigin,
+    debounceAmount: debounceAmount || undefined
   });
 
   useEffect(() => {
+    if (!show) {
+      return;
+    }
+
     window.addEventListener("resize", calculatePosition);
+    window.addEventListener("scroll", calculatePosition);
 
-    return () => window.removeEventListener("resize", calculatePosition);
-  }, []);
+    return () => {
+      window.removeEventListener("resize", calculatePosition);
+      window.removeEventListener("scroll", calculatePosition);
+    };
+  }, [show]);
 
   useEffect(() => {
     calculatePosition();
   }, [show]);
 
+  useEffect(() => {
+    const isAnchorOffscreen =
+      show &&
+      (top === 0 ||
+        left === 0 ||
+        right === 0 ||
+        bottom === 0 ||
+        window.innerHeight - (elToBePositioned.current as HTMLElement).offsetHeight === top);
+
+    if (isAnchorOffscreen) {
+      onAnchorOutOfView && onAnchorOutOfView();
+    }
+  }, [top, left, right, bottom]);
+
   return (
     <div ref={ref} {...rest}>
       <div

package/src/Tooltip/Tooltip.test.tsx

@@ -16,7 +16,7 @@
 
 import React, { useEffect, useRef } from "react";
 import { Tooltip, Props } from "./Tooltip";
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
@@ -39,7 +39,7 @@ const createTooltip = (params?: (defaultParams: Props) => Props) => {
 };
 
 describe("Tooltip should render", () => {
-  it("renders without crashing", () => {
+  it("renders without crashing", async () => {
     const { tooltip, getByText } = createTooltip(defaultParams => ({
       ...defaultParams,
       className: "testing"
@@ -49,7 +49,7 @@ describe("Tooltip should render", () => {
     const label = getByText("Label");
 
     expect(tooltip).toHaveClass("testing");
-    expect(tooltipText).toHaveStyle({ top: "0px", left: "16px" });
+    await waitFor(() => expect(tooltipText).toHaveStyle({ top: "0px", left: "16px" }));
     expect(label).toBeTruthy();
     expect(tooltipText).toBeTruthy();
     expect(tooltip).toBeTruthy();
@@ -65,7 +65,7 @@ describe("Tooltip should render", () => {
     expect(getByText(labelText)).toBeDefined();
   });
 
-  it("should override the default placement and offset values", () => {
+  it("should override the default placement and offset values", async () => {
     const { tooltip, getByText } = createTooltip(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "center" },
@@ -74,7 +74,7 @@ describe("Tooltip should render", () => {
     }));
 
     const tooltipText = getByText("This is a test message");
-    expect(tooltipText).toHaveStyle({ right: "1024px", bottom: "768px" });
+    await waitFor(() => expect(tooltipText).toHaveStyle({ right: "1024px", bottom: "768px" }));
     expect(tooltip).toBeTruthy();
   });
 });

package/src/_BaseStyling_/BaseStyling.tsx

@@ -42,6 +42,8 @@ interface CSSProperties {
   modalShadowColor?: string;
   modalBackgroundColor?: string;
   modalHeaderBackgroundColor?: string;
+  skeletonBackgroundColor?: string;
+  skeletonAnimationColorRgb?: string;
   snackbarTextColor?: string;
   snackbarInfoBackgroundColor?: string;
   snackbarSuccessBackgroundColor?: string;
@@ -103,6 +105,8 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     modalShadowColor: "rgba(0, 0, 0, 0.16)",
     modalBackgroundColor: "#f5f8f8",
     modalHeaderBackgroundColor: "var(--light)",
+    skeletonBackgroundColor: "var(--disabled)",
+    skeletonAnimationColorRgb: "255, 255, 255",
     snackbarTextColor: "var(--light)",
     snackbarInfoBackgroundColor: "#003b5e",
     snackbarSuccessBackgroundColor: "#008a28",