@onewelcome/react-lib-components 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",
@@ -18,7 +18,7 @@
     "build": "dts build",
     "build-storybook": "build-storybook",
     "dev": "npm-run-all -p start test:watch storybook",
-    "lint": "eslint --fix 'src/**/*.{ts,tsx}'",
+    "lint": "eslint --fix '**/*.{ts,tsx}'",
     "prepare": "husky install && dts build",
     "size": "size-limit",
     "start": "dts watch",

package/src/ContextMenu/ContextMenu.test.tsx

@@ -85,7 +85,7 @@ describe("ContextMenu should render", () => {
 
     const child = getByRole("menuitem");
 
-    expect(child).toHaveClass("custom");
+    expect(child.parentElement).toHaveClass("custom");
   });
 
   it("should throw an error", () => {

package/src/ContextMenu/ContextMenuItem.tsx

@@ -46,8 +46,9 @@ export const ContextMenuItem = React.forwardRef<HTMLButtonElement, Props>(
     }, [hasFocus, innerButtonRef, contextMenuOpened]);
 
     return (
-      <li role="menuitem" className={`${classes["context-menu-item"]} ${className ?? ""}`}>
+      <li role="none" className={`${classes["context-menu-item"]} ${className ?? ""}`}>
         <button
+          role="menuitem"
           {...rest}
           ref={innerButtonRef}
           data-focus={hasFocus}

package/src/DataGrid/DataGrid.tsx

@@ -8,7 +8,7 @@ import { ColumnName, HeaderCell, OnSortFunction, Sort } from "./datagrid.interfa
 import { Pagination, Props as PaginationProps } from "../Pagination/Pagination";
 import { Spacing, useSpacing } from "../hooks/useSpacing";
 
-export interface Props<T> extends ComponentPropsWithRef<"div"> {
+export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
   children: ({ item, index }: { item: T; index: number }) => ReactElement;
   data?: T[];
   initialSort?: Sort;

package/src/DataGrid/DataGridBody/DataGridRow.tsx

@@ -23,7 +23,7 @@ export const DataGridRow = React.forwardRef<HTMLTableRowElement, Props>(
           disableContextMenuColumn
         });
 
-        const visible = headers?.length! > index ? !headers![index].hidden : true;
+        const visible = headers && headers.length > index ? !headers[index].hidden : true;
         return visible && cellWithSpacing;
       }
       return null;

package/src/Form/Toggle/Toggle.module.scss

@@ -17,11 +17,6 @@ $borderRadius: 2.5rem;
   display: block;
   pointer-events: none;
 
-  &.disabled {
-    opacity: 0.25;
-    cursor: not-allowed;
-  }
-
   &:before {
     content: "";
     width: 1rem;
@@ -42,6 +37,11 @@ $borderRadius: 2.5rem;
       transform: translateY(-50%) translateX(calc(100% - 0.25rem));
     }
   }
+
+  &.disabled {
+    background-color: var(--disabled);
+    cursor: not-allowed;
+  }
 }
 
 .toggle-helper {

package/src/Form/form.interfaces.ts

@@ -11,5 +11,5 @@ export interface FormSelector extends FormElement {
 /** Default form elements */
 export interface FormElement {
   error?: boolean;
-  [dataAttribute: DataAttributeKey]: any;
+  [dataAttribute: DataAttributeKey]: unknown;
 }

package/src/Link/types.d.ts

@@ -2,7 +2,7 @@ import * as H from "history";
 
 export interface LinkProps<S = H.LocationState>
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  component?: React.ComponentType<any> | undefined;
+  component?: React.ComponentType<unknown> | undefined;
   to: H.LocationDescriptor<S> | ((location: H.Location<S>) => H.LocationDescriptor<S>);
   replace?: boolean | undefined;
   innerRef?: React.Ref<HTMLAnchorElement> | undefined;

package/src/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.test.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   render,
   getByTestId,
@@ -6,20 +6,26 @@ import {
   waitFor,
   getAllByRole,
   getByText,
-  findByText,
-  findAllByText,
-  queryByText
+  fireEvent
 } from "@testing-library/react";
 import { SnackbarProvider, Props } from "./SnackbarProvider";
 import { useSnackbar } from "../useSnackbar";
 import userEvent from "@testing-library/user-event";
 
 const successProps = {
-  title: "success title"
+  title: "success title",
+  options: {
+    duration: 10,
+    onClose: jest.fn()
+  }
 };
 
 const errorProps = {
-  title: "error title"
+  title: "error title",
+  options: {
+    duration: 10,
+    onClose: jest.fn()
+  }
 };
 
 const infoProps = {
@@ -43,7 +49,7 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
         <button
           data-testid="show-success"
           onClick={() => {
-            enqueueSuccessSnackbar(successProps.title + index);
+            enqueueSuccessSnackbar(successProps.title + index, undefined, successProps.options);
             setIndex(index + 1);
           }}
         >
@@ -96,24 +102,24 @@ describe("SnackbarProvider", () => {
     expect(container).toHaveTextContent("content");
   });
 
-  it("should stack 3 snackbars at one time", () => {
+  it("should stack 3 snackbars at one time", async () => {
     const { showSuccessSnackbarBtn } = renderSnackbarProvider();
 
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showSuccessSnackbarBtn);
 
     expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(3);
   });
 
-  it("should render 3 variants of snackbars", () => {
+  it("should render 3 variants of snackbars", async () => {
     const { showSuccessSnackbarBtn, showErrorSnackbarBtn, showInfoSnackbarBtn } =
       renderSnackbarProvider();
 
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showErrorSnackbarBtn);
-    userEvent.click(showInfoSnackbarBtn);
+    await userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showErrorSnackbarBtn);
+    await userEvent.click(showInfoSnackbarBtn);
 
     expect(getByText(document.body, new RegExp(successProps.title))).toBeDefined();
     expect(getByText(document.body, new RegExp(errorProps.title))).toBeDefined();
@@ -122,58 +128,45 @@ describe("SnackbarProvider", () => {
     const infoSnackbarActions = getAllByRole(document.body, "button", { name: /Contact/i });
     expect(infoSnackbarActions).toHaveLength(2);
 
-    userEvent.click(infoSnackbarActions[0]);
-    userEvent.click(infoSnackbarActions[1]);
+    await userEvent.click(infoSnackbarActions[0]);
+    await userEvent.click(infoSnackbarActions[1]);
 
     expect(infoProps.options.actions[0].onClick).toBeCalledTimes(1);
-    waitFor(() => expect(infoProps.options.actions[1].onClick).toBeCalledTimes(1));
   });
+});
 
-  it("should stack 3 snackbars at one time and then after 3 disapear show the fourth one", () => {
-    const { showSuccessSnackbarBtn } = renderSnackbarProvider({
-      autoHideDuration: { long: 1, short: 1 }
-    });
+describe("handlers", () => {
+  it("should fire onClose", async () => {
+    const onCloseHandler = jest.fn();
+    const ExampleComponent = () => {
+      const { enqueueErrorSnackbar, enqueueSuccessSnackbar } = useSnackbar();
 
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
+      useEffect(() => {
+        enqueueErrorSnackbar("error", undefined, { onClose: onCloseHandler, duration: 1 });
+        enqueueSuccessSnackbar("success", undefined, { onClose: onCloseHandler, duration: 1 });
+      }, []);
 
-    expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(3);
+      return <div></div>;
+    };
 
-    /** Looking for fourth one to be shown */
-    waitFor(() => expect(getAllByText(document.body, successProps.title + "3")).toHaveLength(1));
-
-    /** There shouldn't be any other snackbars */
-    waitFor(() =>
-      expect(getAllByText(document.body, new RegExp(successProps.title))).not.toBeDefined()
+    const queries = render(
+      <SnackbarProvider closeButtonTitle="close">
+        <ExampleComponent />
+      </SnackbarProvider>
     );
-  });
-
-  it("should close snackbar after clicking X button", async () => {
-    const { showSuccessSnackbarBtn } = renderSnackbarProvider({
-      autoHideDuration: { long: 1_000_000, short: 1_000_000 }
-    });
 
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
+    const errorSnackbar = await queries.findByText(/error/i);
+    const successSnackbar = await queries.findByText(/success/i);
 
-    const closeButtons = getAllByRole(document.body, "button", { name: "close" });
-
-    expect(closeButtons).toHaveLength(3);
-    expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(3);
+    expect(errorSnackbar).toBeTruthy();
+    expect(successSnackbar).toBeTruthy();
 
-    userEvent.click(closeButtons[0]);
-    expect(
-      await findAllByText(document.body, new RegExp(successProps.title + "[12]+"))
-    ).toHaveLength(2);
+    const parentErrorSnackbar = errorSnackbar.closest(".snackbar")!;
+    const parentSuccessSnackbar = successSnackbar.closest(".snackbar")!;
 
-    userEvent.click(closeButtons[1]);
-    expect(await findByText(document.body, successProps.title + "2")).toBeDefined();
+    await fireEvent.animationEnd(parentErrorSnackbar);
+    await fireEvent.animationEnd(parentSuccessSnackbar);
 
-    userEvent.click(closeButtons[2]);
-    waitFor(() => expect(queryByText(document.body, new RegExp(successProps.title))).toBeNull());
+    await waitFor(() => expect(onCloseHandler).toHaveBeenCalledTimes(2));
   });
 });

package/src/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.tsx

@@ -29,6 +29,7 @@ interface Item {
   variant: Variant;
   content?: string;
   actions?: Actions;
+  onClose?: () => void;
 }
 
 export const SnackbarProvider = (
@@ -65,7 +66,8 @@ export const SnackbarProvider = (
     const {
       variant = "info",
       actions,
-      duration = getDuration(variant, actions, content)
+      duration = getDuration(variant, actions, content),
+      onClose
     } = options;
     const item: Item = {
       title,
@@ -73,7 +75,8 @@ export const SnackbarProvider = (
       variant,
       actions,
       duration,
-      id: generateID(15, title)
+      id: generateID(15, title),
+      onClose
     };
     addSnackbar(item);
   };
@@ -103,7 +106,10 @@ export const SnackbarProvider = (
       <SnackbarItem
         {...item}
         key={item.id}
-        onClose={onItemClosed}
+        onClose={() => {
+          onItemClosed(item.id);
+          item.onClose && item.onClose();
+        }}
         closeButtonTitle={closeButtonTitle}
       />
     ) : null

package/src/Notifications/Snackbar/interfaces.ts

@@ -8,4 +8,5 @@ export interface SnackbarOptionsProps {
   actions?: Actions;
   variant?: Variant;
   duration?: number;
+  onClose?: () => void;
 }

package/src/hooks/usePosition.ts

@@ -8,7 +8,7 @@ export interface ConfigObject {
   offset?: Offset;
 }
 
-export type HorizontalPlacment = "left" | "center" | "centerh" | "right";
+export type HorizontalPlacement = "left" | "center" | "centerh" | "right";
 export type VerticalPlacement = "top" | "center" | "centerv" | "bottom";
 
 type Axis = "vertical" | "horizontal";
@@ -29,7 +29,7 @@ interface DomRectObject {
 }
 
 export interface Placement {
-  horizontal: HorizontalPlacment;
+  horizontal: HorizontalPlacement;
   vertical: VerticalPlacement;
 }
 
@@ -73,6 +73,7 @@ const defaultConfigObject: ConfigObject = {
   }
 };
 
+/* eslint-disable @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain*/
 export const usePosition = (providedConfigObject: ConfigObject = defaultConfigObject) => {
   const configObject = { ...defaultConfigObject, ...providedConfigObject };
 
@@ -198,7 +199,7 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
     transformOrigin: Placement,
     requestedReturnValue: Axis,
     relEl: DomRectObject,
-    placementOriginDefinition: HorizontalPlacment | VerticalPlacement,
+    placementOriginDefinition: HorizontalPlacement | VerticalPlacement,
     elDimensions: Dimensions
   ) => {
     let value = 0;
@@ -236,13 +237,13 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
       return "centerv";
     }
     throw new Error(
-      `the requested return value isn\'t "vertical" or "horizontal" ${requestedReturnValue} was given.`
+      `the requested return value isn't "vertical" or "horizontal" ${requestedReturnValue} was given.`
     );
   };
 
   const _calculatePlacementValue = (
     transformOrigin: Placement,
-    placement: HorizontalPlacment | VerticalPlacement,
+    placement: HorizontalPlacement | VerticalPlacement,
     requestedReturnValue: Axis,
     relEl: DomRectObject,
     elDimensions: Dimensions

package/src/interfaces.ts

@@ -1,5 +1,5 @@
 export type DataAttributeKey = `data-${string}`;
 
 export interface KeyValuePair {
-  [dataAttribute: DataAttributeKey]: any;
+  [dataAttribute: DataAttributeKey]: unknown;
 }