@onewelcome/react-lib-components 1.9.1 → 2.0.0-alpha

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "1.9.1",
+  "version": "2.0.0-alpha",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",
@@ -53,7 +53,7 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.21.3",
+    "@babel/core": "^7.21.4",
     "@mdx-js/react": "^1.6.22",
     "@onewelcome/eslint-config-shared-codestyle": "^9.0.3",
     "@size-limit/preset-small-lib": "^8.2.4",
@@ -67,7 +67,7 @@
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.16",
     "@storybook/theming": "^6.5.16",
-    "@testing-library/dom": "^8.20.0",
+    "@testing-library/dom": "^9.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
@@ -75,37 +75,37 @@
     "@tsconfig/create-react-app": "^1.0.3",
     "@tsconfig/recommended": "^1.0.2",
     "@types/color-convert": "^2.0.0",
-    "@types/mdx": "^2.0.3",
+    "@types/mdx": "^2.0.4",
     "@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.56.0",
-    "@typescript-eslint/parser": "^5.56.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
     "babel-loader": "^9.1.2",
-    "chromatic": "^6.17.2",
+    "chromatic": "^6.17.3",
     "dts-cli": "^1.6.3",
-    "eslint": "^8.36.0",
+    "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-cypress": "^2.13.2",
     "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",
+    "html-webpack-plugin": "^5.5.1",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest-junit": "^15.0.0",
-    "lint-staged": "^13.2.0",
+    "jest-junit": "^16.0.0",
+    "lint-staged": "^13.2.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.6",
+    "prettier": "^2.8.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^18.2.0",
-    "react-router": "^6.9.0",
-    "react-router-dom": "^6.9.0",
+    "react-router": "^6.10.0",
+    "react-router-dom": "^6.10.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-styles": "^4.0.0",
-    "sass": "^1.60.0",
+    "sass": "^1.62.1",
     "size-limit": "^8.2.4",
     "style-loader": "^3.3.2",
     "tslib": "^2.5.0",

package/src/Form/FileUpload/FileItem/FileItem.modules.scss

@@ -27,7 +27,7 @@
   }
 
   .progress-bar {
-    background-color: var(--light-pink);
+    background-color: var(--color-black10);
   }
 
   span[class*="bar--"] {

package/src/Form/FileUpload/FileUpload.module.scss

@@ -29,7 +29,7 @@
   @include transition(all, 0.2s, ease-in-out);
   &.drag-active {
     @include outline(
-      var(--color-primary),
+      var(--color-blue-grey500),
       var(--drag-border-style),
       var(--input-border-width),
       var(--input-border-radius),

package/src/Form/FileUpload/FileUpload.tsx

@@ -157,7 +157,9 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   const handleOnDragOver = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setDragActive(true);
+    if (!dragActive) {
+      setDragActive(true);
+    }
     onDragOver && onDragOver(e);
   };
 

package/src/Form/Select/Select.test.tsx

@@ -19,6 +19,7 @@ import { Select as SelectComponent, Props } from "./Select";
 import { render, waitFor } from "@testing-library/react";
 import { Option } from "./Option";
 import userEvent from "@testing-library/user-event";
+import { act } from "react-dom/test-utils";
 
 const defaultParams: Props = {
   name: "Example select",
@@ -85,7 +86,9 @@ describe("Select should render", () => {
     expect(dropdownWrapper).toHaveStyle({ "pointer-events": "none" });
 
     if (button) {
-      userEvent.click(button);
+      act(() => {
+        userEvent.click(button);
+      });
     }
 
     expect(select).toBeDefined();
@@ -165,7 +168,9 @@ describe("Select should render with search", () => {
     const searchInput = getByTestId("search-input");
 
     if (button) {
-      userEvent.click(button);
+      act(() => {
+        userEvent.click(button);
+      });
     }
 
     expect(select).toBeTruthy();
@@ -189,7 +194,9 @@ describe("Selecting options using keyboard", () => {
       onChange: onChangeHandler
     }));
 
-    userEvent.click(button);
+    act(() => {
+      userEvent.click(button);
+    });
 
     expect(button).toHaveAttribute("aria-expanded", "true");
 
@@ -235,11 +242,15 @@ describe("Expanded should be false whenever we click the body", () => {
     const { button } = createSelect();
 
     if (button) {
-      userEvent.click(button);
+      act(() => {
+        userEvent.click(button);
+      });
     }
 
     expect(button).toHaveAttribute("aria-expanded", "true");
-    userEvent.click(document.body);
+    act(() => {
+      userEvent.click(document.body);
+    });
     expect(button).toHaveAttribute("aria-expanded", "false");
   });
 });
@@ -263,7 +274,9 @@ describe("List expansion", () => {
     });
 
     if (button) {
-      userEvent.click(button);
+      act(() => {
+        userEvent.click(button);
+      });
     }
 
     expect(dropdownWrapper).toHaveStyle({ bottom: "0px" });
@@ -298,9 +311,14 @@ describe("List expansion", () => {
       toJSON: () => jest.fn()
     });
 
-    userEvent.click(document.body);
+    act(() => {
+      userEvent.click(document.body);
+    });
+
     const button = getByRole("button");
-    userEvent.click(button);
+    act(() => {
+      userEvent.click(button);
+    });
 
     expect(dropdownWrapper).toHaveStyle({ maxHeight: "474px" });
     expect(dropdownWrapper).toHaveStyle({ top: "0px" });
@@ -308,59 +326,73 @@ describe("List expansion", () => {
 });
 
 describe("previously selected item", () => {
-  it("should have focus", () => {
+  it("should have focus", async () => {
     const { select, button } = createSelect(defaultParams => ({
       ...defaultParams,
       value: "option4"
     }));
 
-    button.focus();
+    await act(async () => {
+      button.focus();
+    });
 
     const option2 = select.querySelector('li[data-value="option2"]')!;
 
     userEvent.keyboard("{enter}");
+
     expect(button).toHaveAttribute("aria-expanded", "true");
     userEvent.keyboard("{arrowdown}");
     userEvent.keyboard("{arrowdown}");
     userEvent.keyboard("{space}");
 
-    userEvent.click(button);
+    act(() => {
+      userEvent.click(button);
+    });
 
     expect(document.activeElement).toBe(option2);
   });
 });
 
 describe("search input", () => {
-  it("listens to different keyboard inputs", async () => {
+  it("listens to different keyboard inputs", () => {
     const { button, select } = createSelect();
 
     const searchInput = document.querySelector(".select-search")!;
 
-    userEvent.click(button);
+    act(() => {
+      userEvent.click(button);
+    });
+
     (searchInput as HTMLElement).focus();
 
     userEvent.keyboard("{arrowup}");
     expect(select.querySelector('li[data-value="option17"]')).toHaveFocus();
   });
 
-  it("move focus with arrowdown", async () => {
+  it("move focus with arrowdown", () => {
     const { button, select } = createSelect();
 
     const searchInput = document.querySelector(".select-search")!;
 
-    userEvent.click(button);
+    act(() => {
+      userEvent.click(button);
+    });
+
     (searchInput as HTMLElement).focus();
 
     userEvent.keyboard("{arrowdown}");
     expect(select.querySelector('li[data-value="option1"]')).toHaveFocus();
   });
 
-  it("select with enter", async () => {
+  it("select with enter", () => {
     const { button, select } = createSelect();
 
     const searchInput = document.querySelector(".select-search")!;
 
-    userEvent.click(button);
+    act(() => {
+      userEvent.click(button);
+    });
+
     (searchInput as HTMLElement).focus();
 
     userEvent.keyboard("{enter}");
@@ -390,7 +422,10 @@ describe("search input", () => {
 
     const searchInput = document.querySelector(".select-search")!;
 
-    userEvent.click(button);
+    act(() => {
+      userEvent.click(button);
+    });
+
     userEvent.tab();
 
     await waitFor(() => expect(searchInput).toHaveFocus());
@@ -405,10 +440,17 @@ describe("search input", () => {
 
     const searchInput = document.querySelector(".select-search")!;
 
-    userEvent.click(button);
+    act(() => {
+      userEvent.click(button);
+    });
+
     userEvent.tab();
+
     expect(searchInput).toHaveFocus();
-    userEvent.tab();
+
+    act(() => {
+      userEvent.tab();
+    });
   });
 });
 
@@ -416,14 +458,16 @@ describe("home and end keys work", () => {
   it("goes to home and end", () => {
     const { button } = createSelect();
 
-    userEvent.click(button);
+    act(() => {
+      userEvent.click(button);
+    });
 
     const firstOption = document.querySelector('li[data-value="option1"]');
     const lastOption = document.querySelector('li[data-value="option17"]');
-
     userEvent.keyboard("{end}");
 
     expect(lastOption).toHaveFocus();
+
     userEvent.keyboard("{home}");
 
     expect(firstOption).toHaveFocus();

package/src/Tabs/Tabs.test.tsx

@@ -109,7 +109,7 @@ describe("Tabs should render", () => {
     expect(tabpanel1).toHaveClass("selected");
     expect(tabpanel3).not.toHaveClass("selected");
 
-    await userEvent.click(tab3);
+    await act(() => userEvent.click(tab3));
 
     tabButtons = tablist.querySelectorAll(".tabbutton");
 

package/src/Tiles/Tile.test.tsx

@@ -22,6 +22,7 @@ import { ContextMenu } from "../ContextMenu/ContextMenu";
 import { IconButton } from "../Button/IconButton";
 import { ContextMenuItem } from "../ContextMenu/ContextMenuItem";
 import userEvent from "@testing-library/user-event";
+import { act } from "react-dom/test-utils";
 
 const onShow = jest.fn();
 const onClose = jest.fn();
@@ -141,14 +142,19 @@ describe("contextmenu", () => {
     expect(menuitem2).toBeTruthy();
     expect(menuitem3).toBeTruthy();
 
-    userEvent.click(menutrigger);
+    act(() => {
+      userEvent.click(menutrigger);
+    });
+
     expect(onShow).toHaveBeenCalled();
     expect(popover).toHaveClass("show");
     expect(popover).toHaveStyle({ opacity: "1;" });
 
-    userEvent.click(menuitem1);
-    userEvent.click(menuitem2);
-    userEvent.click(menuitem3);
+    act(() => {
+      userEvent.click(menuitem1);
+      userEvent.click(menuitem2);
+      userEvent.click(menuitem3);
+    });
 
     expect(contextMenuItemOnClick).toHaveBeenCalledTimes(3);
   });

package/src/Tooltip/Tooltip.test.tsx

@@ -80,7 +80,7 @@ describe("Tooltip should render", () => {
 });
 
 describe("It opens the tooltip", () => {
-  it("opens", () => {
+  it("opens", async () => {
     const { tooltip, getByText } = createTooltip();
 
     const icon = tooltip.querySelector(".icon")!;
@@ -92,8 +92,10 @@ describe("It opens the tooltip", () => {
 
     userEvent.keyboard("{escape}");
 
-    expect(tooltipHover).not.toHaveClass("visible");
-    expect(tooltipHover).toHaveAttribute("aria-hidden", "true");
+    await waitFor(() => {
+      expect(tooltipHover).not.toHaveClass("visible");
+      expect(tooltipHover).toHaveAttribute("aria-hidden", "true");
+    });
   });
 });
 

package/src/_BaseStyling_/BaseStyling.tsx

@@ -22,12 +22,11 @@
 import React, { HTMLAttributes, ReactChild, useEffect, useRef, useState } from "react";
 
 interface CSSProperties {
+  colorBlack10?: string;
   colorFocus?: string;
   colorPrimary?: string;
   colorSecondary?: string;
   colorTertiary?: string;
-  lightPink?: string;
-  vividViolet?: string;
   colorPrimary300?: string;
   colorPrimary500?: string;
   colorPrimary600?: string;
@@ -37,6 +36,8 @@ interface CSSProperties {
   colorBlueGrey200?: string;
   colorBlueGrey400?: string;
   colorBlueGrey25?: string;
+  colorBlueGrey25Transparent?: string;
+  colorBlueGrey50?: string;
   colorBlueGrey500?: string;
   colorBlueGrey700?: string;
   colorBlueGrey900?: string;
@@ -45,6 +46,7 @@ interface CSSProperties {
   colorLightBlue600?: string;
   colorOrange500?: string;
   colorRed500?: string;
+  colorWhite?: string;
   defaultLineHeight?: string;
   buttonBorderRadius?: string;
   buttonBorderWidth?: string;
@@ -91,7 +93,6 @@ interface CSSProperties {
   lightGreyBorder?: string;
   warning?: string;
   light?: string;
-  grey?: string;
   fontFamily?: string;
   fontFamilyCode?: string;
   fontSize?: string;
@@ -110,12 +111,15 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export const BaseStyling = ({ children, properties = {} }: Props) => {
   const defaultProperties: CSSProperties = {
+    colorBlack10: "#0000001a",
     colorPrimary300: "#6871BF",
     colorPrimary500: "#041295",
     colorPrimary600: "#030F77",
     colorPrimary700: "#020B59",
     colorPrimary900: "#01041E",
     colorBlueGrey25: "#F7F7F9",
+    colorBlueGrey25Transparent: "#F7F7F980",
+    colorBlueGrey50: "#EEEFF3",
     colorBlueGrey100: "#DEDEE6",
     colorBlueGrey200: "#BCBECE",
     colorBlueGrey400: "#797D9C",
@@ -127,12 +131,11 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorLightBlue600: "#0096B1",
     colorOrange500: "#E07900",
     colorRed500: "#E01E00",
+    colorWhite: "#FFFFFF",
     colorFocus: "var(--color-primary300)",
     colorPrimary: "var(--color-primary500)",
     colorSecondary: "var(--color-blue-grey700)",
     colorTertiary: "var(--color-light-blue600)",
-    lightPink: "#9E006B1A",
-    vividViolet: "#9E006B",
     defaultLineHeight: "1.5",
     buttonBorderRadius: "2px",
     buttonBorderWidth: "2px",
@@ -146,8 +149,8 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     inputBorderWidthFocus: "2px",
     inputBorderStyle: "solid",
     inputBackgroundColor: "var(--light)",
-    dragBackgroundColor: "#1313191A",
-    dragBorderStyle: "dashed",
+    dragBackgroundColor: "var(--color-blue-grey25-transparent)",
+    dragBorderStyle: "solid",
     modalShadowColor: "rgba(0, 0, 0, 0.16)",
     modalBackgroundColor: "var(--color-blue-grey25)",
     modalHeaderBackgroundColor: "var(--light)",
@@ -178,8 +181,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     greyedOut: "var(--color-blue-grey500)",
     lightGreyBorder: "var(--color-blue-grey100)",
     warning: "var(--color-orange500)",
-    light: "#FFF",
-    grey: "#c3c3c7",
+    light: "var(--color-white)",
     fontFamily: "Roboto, sans-serif",
     fontFamilyCode: "'Roboto Mono', monospace",
     fontSize: "1rem",

package/src/hooks/useAnimation.test.tsx

@@ -18,6 +18,7 @@ import React, { Fragment } from "react";
 import { render, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { useAnimation } from "./useAnimation";
+import { act } from "react-dom/test-utils";
 
 describe("useAnimation", () => {
   it("should execute", () => {
@@ -49,12 +50,17 @@ describe("useAnimation", () => {
 
     expect(animatedDiv).not.toHaveClass("animation-started");
     expect(callback).not.toBeCalled();
+    act(() => {
+      userEvent.click(startButton);
+    });
 
-    userEvent.click(startButton);
     expect(animatedDiv).toHaveClass("animation-started");
     expect(callback).not.toBeCalled();
 
-    fireEvent.animationEnd(animatedDiv);
+    act(() => {
+      fireEvent.animationEnd(animatedDiv);
+    });
+
     expect(animatedDiv).toHaveClass("animation-started");
     expect(callback).toBeCalled();
   });

package/src/util/helper.test.tsx

@@ -28,6 +28,7 @@ import {
   isJsonString
 } from "./helper";
 import { render } from "@testing-library/react";
+import { act } from "react-dom/test-utils";
 
 /* Generate an ID of 20 characters with a string woven in */
 
@@ -86,11 +87,13 @@ describe("debounce function", () => {
 
     window.addEventListener("resize", debounce(debouncedFunction, 200));
 
-    fireEvent.resize(window);
-    fireEvent.resize(window);
-    fireEvent.resize(window);
-    fireEvent.resize(window);
-    fireEvent.resize(window);
+    act(() => {
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+    });
 
     await waitFor(() => expect(debouncedFunction).toHaveBeenCalledTimes(1));
   });
@@ -108,7 +111,9 @@ describe("debounce function", () => {
       }, [variable]);
 
       const incrementVariable = () => {
-        setVariable(Math.random());
+        act(() => {
+          setVariable(Math.random());
+        });
       };
 
       useEffect(() => {
@@ -122,11 +127,13 @@ describe("debounce function", () => {
 
     render(<ExampleComponent debouncedFunction={exampleFunction} />);
 
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
+    act(() => {
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+    });
 
     expect(exampleFunction).toHaveBeenCalledTimes(1);
   });
@@ -146,7 +153,9 @@ describe("throttling works", () => {
       }, [variable]);
 
       const incrementVariable = useCallback(() => {
-        setVariable(Math.random());
+        act(() => {
+          setVariable(Math.random());
+        });
       }, []);
 
       useEffect(() => {
@@ -160,16 +169,18 @@ describe("throttling works", () => {
 
     render(<ExampleComponent throttledFunction={exampleFunction} />);
 
-    fireEvent.resize(window);
-    fireEvent.resize(window);
-    fireEvent.resize(window);
-    fireEvent.resize(window);
-    fireEvent.resize(window);
-    fireEvent.resize(window);
-    fireEvent.resize(window);
-    fireEvent.resize(window);
-    fireEvent.resize(window);
-    fireEvent.resize(window);
+    act(() => {
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+      fireEvent.resize(window);
+    });
 
     expect(exampleFunction).not.toHaveBeenCalledTimes(1);
     expect(exampleFunction).not.toHaveBeenCalledTimes(10);