@onewelcome/react-lib-components 1.4.0 → 1.6.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.6.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",
+    "@size-limit/preset-small-lib": "^8.1.2",
+    "@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.20.0",
     "@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/recommended": "^1.0.1",
+    "@tsconfig/create-react-app": "^1.0.3",
+    "@tsconfig/recommended": "^1.0.2",
     "@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.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
+    "babel-loader": "^9.1.2",
+    "dts-cli": "^1.6.3",
+    "eslint": "^8.32.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.3",
     "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.7.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-styles": "^4.0.0",
-    "sass": "^1.55.0",
-    "size-limit": "^7.0.8",
-    "tslib": "^2.4.0",
-    "typescript": "^4.8.4"
+    "sass": "^1.57.1",
+    "size-limit": "^8.1.1",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.4"
   }
 }

package/src/Button/BaseButton.module.scss

@@ -14,8 +14,8 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .button {
-  @include buttonBase();
+  @include mixins.buttonBase();
 }

package/src/Button/Button.module.scss

@@ -14,19 +14,18 @@
  *    limitations under the License.
  */
 
-@import "../readyclasses.module.scss";
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .fill {
-  @include button("fill");
+  @include mixins.button("fill");
 }
 
 .outline {
-  @include button("outline");
+  @include mixins.button("outline");
 }
 
 .text {
-  @include button("text");
+  @include mixins.button("text");
 }
 
 .has-icon {

package/src/Button/Button.tsx

@@ -21,7 +21,6 @@ import classes from "./Button.module.scss";
 export interface Props extends BaseButtonProps {
   startIcon?: React.ReactNode | false;
   endIcon?: React.ReactNode | false;
-  children?: React.ReactNode;
   variant?: "text" | "fill" | "outline";
 }
 

package/src/Button/IconButton.module.scss

@@ -14,8 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../readyclasses.module.scss";
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .icon-button {
   border: var(--button-border-width) var(--button-border-style) transparent;
@@ -57,14 +56,14 @@
   }
 
   &.fill {
-    @include button("fill", "icon");
+    @include mixins.button("fill", "icon");
   }
 
   &.text {
-    @include button("text", "icon");
+    @include mixins.button("text", "icon");
   }
 
   &.outline {
-    @include button("outline", "icon");
+    @include mixins.button("outline", "icon");
   }
 }

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/DataGrid/DataGrid.tsx

@@ -144,14 +144,15 @@ const DataGridInner = <T extends {}>(
             spacing={styleWithSpacing}
           />
           <DataGridBody
-            children={children}
             data={data}
             headers={internalHeaders}
             isLoading={isLoading}
             disableContextMenuColumn={disableContextMenuColumn}
             emptyLabel={emptyLabel}
             spacing={styleWithSpacing}
-          />
+          >
+            {children}
+          </DataGridBody>
         </table>
       </div>
       {paginationProps && !isLoading && (

package/src/DataGrid/DataGridActions/DataGridActions.tsx

@@ -52,6 +52,7 @@ const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
     searchIconBtnProps = {},
     headers,
     onColumnToggled,
+    children,
     ...rest
   }: Props,
   ref
@@ -59,6 +60,9 @@ const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
   const isHidden = !(enableAddBtn || enableColumnsBtn || enableSearchBtn);
   const [showColsPopover, setShowColsPopover] = useState(false);
   const showColumnBtn = useRef<HTMLButtonElement>(null);
+  const { children: addBtnChildren, ...restAddBtnProps } = addBtnProps;
+  const { children: columnsBtnChildren, ...restColumnsBtnProps } = columnsBtnProps;
+  const { children: searchBtnChildren, ...restSearchBtnProps } = searchBtnProps;
 
   return isHidden ? null : (
     <div {...rest} ref={ref} className={`${classes["actions"]} ${className ?? ""}`}>
@@ -70,9 +74,10 @@ const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
             title="Add item"
             type="button"
             variant="outline"
-            children="Add item"
-            {...addBtnProps}
-          />
+            {...restAddBtnProps}
+          >
+            {addBtnChildren ?? "Add item"}
+          </Button>
         )}
       </div>
       <div className={classes["right-actions"]}>
@@ -82,12 +87,13 @@ const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
               startIcon={<Icon icon={Icons.Change} />}
               title="Show/hide columns"
               variant="text"
-              children="Columns"
-              {...columnsBtnProps}
+              {...restColumnsBtnProps}
               className={`${classes["desktop"]} ${columnsBtnProps?.className ?? ""}`}
               ref={showColumnBtn}
               onClick={() => setShowColsPopover(true)}
-            />
+            >
+              {columnsBtnChildren ?? "Columns"}
+            </Button>
             <IconButton
               title="Show/hide columns"
               {...columnsBtnProps}
@@ -112,10 +118,11 @@ const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
               startIcon={<Icon icon={Icons.TableSearch} />}
               title="Search"
               variant="text"
-              children="Search"
-              {...searchBtnProps}
+              {...restSearchBtnProps}
               className={`${classes["desktop"]} ${searchBtnProps?.className ?? ""}`}
-            />
+            >
+              {searchBtnChildren ?? "Search"}
+            </Button>
             <IconButton
               title="Search"
               {...searchIconBtnProps}

package/src/DataGrid/DataGridBody/DataGridCell.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../../mixins.module.scss";
+@use "../../mixins.module.scss";
 
 .cell {
   min-height: 3.5rem;
@@ -29,7 +29,7 @@
   }
 
   .loading {
-    @include skeletonLoading();
+    @include mixins.skeletonLoading();
     border-radius: 0.5rem;
     height: 1.25rem;
     margin: 0.625rem 0;

package/src/DataGrid/DataGridHeader/DataGridHeader.test.tsx

@@ -21,8 +21,8 @@ import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
   headers: [
-    { name: "firstName", headline: "First name" },
-    { name: "lastName", headline: "Last name" }
+    { name: "firstName", headline: "First name", align: "center" },
+    { name: "lastName", headline: "Last name", align: "right" }
   ]
 };
 
@@ -36,7 +36,6 @@ const createDataGridHeader = (params?: (defaultParams: Props) => Props) => {
     container
   });
   const dataGridHeader = queries.getByTestId("dataGridHeader");
-
   return {
     ...queries,
     dataGridHeader
@@ -51,6 +50,12 @@ describe("DataGridHeader should render", () => {
     expect(getAllByRole("columnheader")).toHaveLength(2);
     expect(getByRole("cell")).toBeDefined(); //context-menu empty cell
 
+    const headerCells = dataGridHeader.querySelectorAll("th");
+
+    expect(headerCells).toHaveLength(2);
+    expect(headerCells[0]).toHaveStyle({ textAlign: "center" });
+    expect(headerCells[1]).toHaveStyle({ textAlign: "right" });
+
     expect(dataGridHeader.querySelectorAll("[data-icon]")).toHaveLength(0);
   });
 

package/src/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -77,7 +77,9 @@ const DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement,
       return null;
     }
 
-    let headerStyle: React.CSSProperties = {};
+    let headerStyle: React.CSSProperties = {
+      textAlign: header.align || "left"
+    };
 
     if (index === 0) {
       headerStyle.paddingLeft = spacing?.paddingLeft;

package/src/DataGrid/datagrid.interfaces.ts

@@ -27,4 +27,5 @@ export interface HeaderCell {
   headline: string;
   disableSorting?: boolean;
   hidden?: boolean;
+  align?: "left" | "right" | "center";
 }

package/src/Form/Input/Input.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../../mixins.module.scss";
+@use "../../mixins.module.scss";
 
 .input-wrapper {
   position: relative;
@@ -25,7 +25,7 @@
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
   padding: 0 1.25rem;
-  @include transition(all, 0.2s, ease-in-out);
+  @include mixins.transition(all, 0.2s, ease-in-out);
 
   // General autofill styles
   input:-webkit-autofill,
@@ -64,7 +64,33 @@
     }
   }
 
-  @include outlineStates;
+  @include mixins.outlineStates;
+
+  [data-icon-status="success"],
+  [data-icon-status="error"] {
+    height: 100%;
+    width: 1.25rem;
+    box-sizing: border-box;
+    padding-top: calc(1rem - (1.25rem - 1rem));
+    font-size: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+
+    &:before {
+      height: 1.25rem;
+      width: 1.25rem;
+    }
+  }
+
+  [data-icon-status="success"] {
+    color: var(--success);
+  }
+
+  [data-icon-status="error"] {
+    color: var(--error);
+  }
 }
 
 .input {
@@ -76,7 +102,7 @@
   box-sizing: border-box;
   border: 0;
   border-radius: var(--input-border-radius);
-  @include transition(all, 0.2s, ease-in-out);
+  @include mixins.transition(all, 0.2s, ease-in-out);
   background-color: transparent;
   z-index: 1;
 
@@ -93,41 +119,26 @@
     width: auto;
   }
 
-  @include browserOutlineDisabled;
+  @include mixins.browserOutlineDisabled;
 }
 
-@include outline;
+@include mixins.outline;
 
 .error input {
   color: var(--error);
-  padding-right: 3.5rem;
+  padding-right: 1.25rem;
 
   &.remove-extra-indent {
     padding-right: 0;
   }
 }
-
-.warning {
-  color: var(--error);
-  position: absolute;
-  height: 100%;
-  width: 1.25rem;
-  right: 1.25rem;
-  top: 0;
-  font-size: 1.125rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-
-  &:before {
-    height: 1.3125rem;
-  }
+.success input {
+  padding-right: 1.25rem;
 }
 
 .input-wrapper [data-prefix],
 .input-wrapper [data-suffix] {
-  @include transition(all, 0.2s, ease-in-out);
+  @include mixins.transition(all, 0.2s, ease-in-out);
   display: block;
   z-index: 1;
 }

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", () => {
@@ -222,4 +234,14 @@ describe("It should render prefix and suffix ", () => {
     expect(input.querySelector("icon-warning")).toBeDefined();
     expect(getByText(suffix)).toBeDefined();
   });
+
+  it("success icon should be visible", () => {
+    const { input } = createInput(defaultParams => ({
+      ...defaultParams,
+      success: true
+    }));
+    const icon = input.querySelector(".icon-checkmark-circle-breakout");
+    expect(input.querySelector(".success")).toBeDefined();
+    expect(icon).toBeDefined();
+  });
 });

package/src/Form/Input/Input.tsx

@@ -24,8 +24,8 @@ import React, {
 } from "react";
 import classes from "./Input.module.scss";
 import readyclasses from "../../readyclasses.module.scss";
-import { Icon, Icons } from "../../Icon/Icon";
 import { FormElement } from "../form.interfaces";
+import { useDetermineStatusIcon } from "../../hooks/useDetermineStatusIcon";
 
 export const dateTypes = ["date", "time", "datetime-local"] as const;
 
@@ -39,7 +39,7 @@ export type Type =
   | "tel"
   | "url"
   | "hidden"
-  | typeof dateTypes[number];
+  | (typeof dateTypes)[number];
 
 export interface Props extends ComponentPropsWithRef<"input">, FormElement {
   wrapperProps?: ComponentPropsWithRef<"div">;
@@ -52,6 +52,7 @@ export interface Props extends ComponentPropsWithRef<"input">, FormElement {
 const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   {
     error = false,
+    success = false,
     className,
     name,
     style,
@@ -69,7 +70,6 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
 ) => {
   const [focus, setFocus] = useState(false);
   const inputWrapperRef = useRef<HTMLDivElement>(null);
-  const errorIconRef = useRef<HTMLDivElement>(null);
   const suffixRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -84,7 +84,6 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     inputClassNames.push(classes["shrink-width-for-date-icon"]);
   className && inputClassNames.push(className);
 
-  const iconClassNames = [classes["warning"]];
   const wrapperClasses = [classes["input-wrapper"]];
   const outlineClasses = [classes["outline"]];
 
@@ -95,6 +94,9 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   disabled && wrapperClasses.push(classes["disabled"]) && outlineClasses.push(classes["disabled"]);
   error && wrapperClasses.push(classes["error"]) && outlineClasses.push(classes["error"]);
   focus && wrapperClasses.push(classes["focus"]) && outlineClasses.push(classes["focus"]);
+  success && wrapperClasses.push(classes["success"]);
+
+  const icon = useDetermineStatusIcon({ success, error });
 
   return (
     <div
@@ -124,13 +126,14 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         name={name}
         disabled={disabled}
         className={inputClassNames.join(" ")}
+        spellCheck={rest.spellCheck || false}
       />
+      {icon}
       {suffix && (
         <div ref={suffixRef} data-suffix className={classes["suffix"]}>
           <span>{suffix}</span>
         </div>
       )}
-      {error && <Icon ref={errorIconRef} className={iconClassNames.join(" ")} icon={Icons.Error} />}
       <span className={outlineClasses.join(" ")}></span>
     </div>
   );