@onewelcome/react-lib-components 5.1.0 → 6.0.0

package/src/components/Notifications/BaseModal/BaseModal.tsx

@@ -19,12 +19,15 @@ import React, {
   ComponentPropsWithRef,
   useEffect,
   useRef,
-  ReactElement
+  ReactElement,
+  RefObject,
+  createRef
 } from "react";
 import { createPortal } from "react-dom";
 import { useGetDomRoot } from "../../../hooks/useGetDomRoot";
 import classes from "./BaseModal.module.scss";
 import { labelId, descriptionId } from "./BaseModalContext";
+import { useRepeatFocus } from "./useRepeatFocus";
 
 const SCROLL_PROPERTY_NAME = "overflow";
 const SCROLL_PROPERTY_VALUE = "hidden";
@@ -90,6 +93,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
 ) => {
   useSetBodyScroll(open);
   const wrappingDivRef = useRef<HTMLDivElement>(null);
+  const modalRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();
   const { root } = useGetDomRoot(domRoot, wrappingDivRef);
 
   const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -99,9 +103,11 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     }
   };
 
+  useRepeatFocus(modalRef);
+
   useEffect(() => {
     if (open) {
-      wrappingDivRef.current?.focus();
+      modalRef.current?.focus();
     }
   }, [open]);
 
@@ -122,7 +128,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       {createPortal(
         <div
           {...rest}
-          ref={ref}
+          ref={modalRef}
           id={id}
           className={`${classes["modal"]} ${open ? classes["visible"] : ""} ${className}`}
           role="dialog"
@@ -137,6 +143,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         >
           <div
             {...backdropProps}
+            aria-hidden={true}
             className={`${classes["backdrop"]} ${backdropProps?.className ?? ""}`}
             onClick={handleBackdropClick}
           ></div>

package/src/components/Notifications/BaseModal/useRepeatFocus.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import { RefObject, useEffect } from "react";
+
+/**
+ * @description This is a hook that will make sure that when a modal is open and the user tabs through the it,
+ * the focus will be repeated and the user will not lose their entire focusable element to an element in the background
+ * that is being blocked by the modal.
+ */
+
+export const useRepeatFocus = (ref: RefObject<HTMLDivElement>) => {
+  const getFocusableElement = (
+    element: HTMLElement,
+    position: "first" | "last"
+  ): HTMLElement | null => {
+    const focusableSelectors =
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const focusableElements = element.querySelectorAll<HTMLElement>(focusableSelectors);
+
+    if (position === "first") {
+      return focusableElements[0] || null;
+    } else if (position === "last") {
+      return focusableElements[focusableElements.length - 1] || null;
+    }
+
+    return null;
+  };
+
+  useEffect(() => {
+    if (!ref.current || !open) return;
+
+    const lastFocusableElement = getFocusableElement(ref.current, "last");
+    const firstFocusableElement = getFocusableElement(ref.current, "first");
+
+    if (!lastFocusableElement || !firstFocusableElement) return;
+
+    const handleTabKeyPress = (event: KeyboardEvent) => {
+      if (event.key !== "Tab") return;
+
+      if (event.shiftKey) {
+        if (document.activeElement === firstFocusableElement) {
+          event.preventDefault();
+          lastFocusableElement?.focus();
+        }
+      } else if (document.activeElement === lastFocusableElement) {
+        event.preventDefault();
+        firstFocusableElement?.focus();
+      }
+    };
+
+    lastFocusableElement.addEventListener("keydown", handleTabKeyPress);
+    firstFocusableElement.addEventListener("keydown", handleTabKeyPress);
+
+    return () => {
+      lastFocusableElement.removeEventListener("keydown", handleTabKeyPress);
+      firstFocusableElement.removeEventListener("keydown", handleTabKeyPress);
+    };
+  }, [ref, open]);
+};

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -17,7 +17,7 @@
 @use "../../../../mixins.module.scss";
 
 .snackbar {
-  padding: 0.5rem 1rem;
+  padding: 1rem;
   border-radius: var(--snackbar-border-radius);
   display: flex;
   gap: 0.5rem;
@@ -27,11 +27,6 @@
   @include mixins.transition(height, 0.2s, ease-in-out);
   flex-grow: 0;
 
-  &.has-title {
-    align-items: flex-start;
-    padding: 1rem;
-  }
-
   &.info {
     background-color: var(--snackbar-info-background-color);
   }
@@ -57,6 +52,7 @@
     align-self: center;
     width: 2.5rem;
     height: 2.5rem;
+    margin: -0.5rem 0;
     flex-shrink: 0;
     border: 0;
 
@@ -77,39 +73,36 @@
   .icon {
     color: var(--snackbar-text-color);
     font-size: 1rem;
-    line-height: var(--default-line-height);
-    display: flex;
+    height: 1.25rem;
+    display: inline-flex;
+    align-items: center;
+    align-self: flex-start;
   }
 
   .title {
     color: var(--snackbar-text-color);
     flex: 1;
     font-size: 0.875rem;
-    line-height: var(--default-line-height);
+    line-height: 1.25rem;
     margin-bottom: 0.25rem;
-    margin-top: -2.5px;
     display: block;
   }
 
-  .content-wrapper {
+  .outer-content-wrapper {
+    display: flex;
+    gap: 0.5rem;
     flex-grow: 1;
   }
 
-  &.has-title .content-wrapper {
-    width: 12.5rem;
-  }
-
-  @media screen and (min-width: 37.5em) {
-    &:not(.has-title) .content {
-      white-space: nowrap;
-    }
+  .content-wrapper {
+    flex-grow: 1;
   }
 
   .content {
     color: var(--snackbar-text-color);
     font-size: 0.875rem;
+    line-height: 1.25rem;
     margin-bottom: 0;
-    line-height: var(--default-line-height);
   }
 
   .actions {
@@ -125,7 +118,7 @@
     font-size: 0.875rem;
     line-height: var(--button-font-size);
     font-weight: 400;
-    margin: 0;
+    margin: -0.5rem 0;
     padding: 0.625rem 1.25rem;
     cursor: pointer;
     transition:

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.test.tsx

@@ -22,25 +22,27 @@ import userEvent from "@testing-library/user-event";
 const initParams: Props = {
   id: "id",
   title: "title",
+  content: "content",
   duration: 1,
   variant: "success",
   closeButtonTitle: "close",
   onClose: jest.fn()
 };
 
-describe("SnackbarItem", () => {
-  it("renders without crashing", () => {
+describe("<SnackbarItem />", () => {
+  it("should render without crashing", () => {
     const { container } = render(<SnackbarItem {...initParams} />);
 
-    expect(container).toHaveTextContent(initParams.title!);
+    const titleDiv = container.querySelector(".title");
+    expect(titleDiv).toHaveTextContent(initParams.title!);
     const contentDiv = container.querySelector(".content");
-    expect(contentDiv).toBeNull();
+    expect(contentDiv).toHaveTextContent(initParams.content!);
     const actionsDiv = container.querySelector(".actions");
     expect(actionsDiv).toBeNull();
     expect(getByRole(container, "button")).toBeDefined();
   });
 
-  it("clicking close button call callback function", async () => {
+  it("should clicking close button call callback function", async () => {
     const { container } = render(<SnackbarItem {...initParams} duration={10000000} />);
 
     expect(initParams.onClose).not.toBeCalled();
@@ -51,7 +53,7 @@ describe("SnackbarItem", () => {
     });
   });
 
-  it("call close callback after provided duration", () => {
+  it("should call close callback after provided duration", () => {
     render(<SnackbarItem {...initParams} />);
 
     expect(initParams.onClose).not.toBeCalled();
@@ -60,4 +62,16 @@ describe("SnackbarItem", () => {
       expect(initParams.onClose).toHaveBeenCalledWith(initParams.id);
     });
   });
+
+  it("should render only content when only title is provided", () => {
+    const { container } = render(<SnackbarItem {...initParams} content={undefined} />);
+
+    const titleDiv = container.querySelector(".title");
+    expect(titleDiv).toBeNull();
+    const contentDiv = container.querySelector(".content");
+    expect(contentDiv).toHaveTextContent(initParams.title!);
+    const actionsDiv = container.querySelector(".actions");
+    expect(actionsDiv).toBeNull();
+    expect(getByRole(container, "button")).toBeDefined();
+  });
 });

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.tsx

@@ -65,6 +65,9 @@ export const SnackbarItem = ({
   const timerHandler = useRef<ReturnType<typeof setTimeout>>();
   const onAnimationEnd = () => onClose(id);
   const { ref, animationStarted, startAnimation } = useAnimation<HTMLDivElement>(onAnimationEnd);
+  const hasOnlyTitle = !content && !!title;
+  const renderTitle = title && !hasOnlyTitle;
+  const renderContentOrTitleOnly = content || hasOnlyTitle;
 
   useRegisterSnackbarHeight(ref, id);
 
@@ -113,7 +116,6 @@ export const SnackbarItem = ({
     classes["snackbar"],
     classes[variant],
     animationStarted ? readyclasses["slide-out"] : readyclasses["slide-in"],
-    title ? classes["has-title"] : "",
     className ?? ""
   ].join(" ");
 
@@ -125,18 +127,20 @@ export const SnackbarItem = ({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      <Icon icon={getVariantIcon()} className={classes["icon"]} />
-      <div className={classes["content-wrapper"]}>
-        {title && (
-          <Typography className={classes["title"]} variant="body-bold" tag="span">
-            {title}
-          </Typography>
-        )}
-        {content && (
-          <Typography className={classes["content"]} variant="body">
-            {content}
-          </Typography>
-        )}
+      <div className={classes["outer-content-wrapper"]}>
+        <Icon icon={getVariantIcon()} className={classes["icon"]} />
+        <div className={classes["content-wrapper"]}>
+          {renderTitle && (
+            <Typography className={classes["title"]} variant="body-bold" tag="span">
+              {title}
+            </Typography>
+          )}
+          {renderContentOrTitleOnly && (
+            <Typography className={classes["content"]} variant="body">
+              {hasOnlyTitle ? title : content}
+            </Typography>
+          )}
+        </div>
       </div>
       {actionButtons.length > 0 && <div className={classes["actions"]}>{actionButtons}</div>}
       <IconButton

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

@@ -78,7 +78,7 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
         <button
           data-testid="show-success"
           onClick={() => {
-            enqueueSuccessSnackbar(successProps.title + index, undefined, successProps.options);
+            enqueueSuccessSnackbar({ title: successProps.title + index, ...successProps.options });
             setIndex(index + 1);
           }}
         >
@@ -87,7 +87,7 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
         <button
           data-testid="show-error"
           onClick={() => {
-            enqueueErrorSnackbar(errorProps.title + index);
+            enqueueErrorSnackbar({ title: errorProps.title + index });
             setIndex(index + 1);
           }}
         >
@@ -96,7 +96,11 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
         <button
           data-testid="show-info"
           onClick={() => {
-            enqueueSnackbar(infoProps.title + index, infoProps.content, infoProps.options);
+            enqueueSnackbar({
+              title: infoProps.title + index,
+              content: infoProps.content,
+              ...infoProps.options
+            });
             setIndex(index + 1);
           }}
         >
@@ -105,7 +109,7 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
         <button
           data-testid="show-warning"
           onClick={() => {
-            enqueueWarningSnackbar(warningProps.title + index, undefined, warningProps.options);
+            enqueueWarningSnackbar({ title: warningProps.title + index, ...warningProps.options });
             setIndex(index + 1);
           }}
         >
@@ -135,8 +139,8 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
   };
 };
 
-describe("SnackbarProvider", () => {
-  it("renders without crashing", () => {
+describe("<SnackbarProvider />", () => {
+  it("should render without crashing", () => {
     const { container } = renderSnackbarProvider();
 
     expect(container).toHaveTextContent("content");
@@ -176,40 +180,40 @@ describe("SnackbarProvider", () => {
 
     expect(infoProps.options.actions[0].onClick).toBeCalledTimes(1);
   });
-});
 
-describe("handlers", () => {
-  it("should fire onClose", async () => {
-    const onCloseHandler = jest.fn();
-    const ExampleComponent = () => {
-      const { enqueueErrorSnackbar, enqueueSuccessSnackbar } = useSnackbar();
+  describe("handlers", () => {
+    it("should fire onClose", async () => {
+      const onCloseHandler = jest.fn();
+      const ExampleComponent = () => {
+        const { enqueueErrorSnackbar, enqueueSuccessSnackbar } = useSnackbar();
 
-      useEffect(() => {
-        enqueueErrorSnackbar("error", undefined, { onClose: onCloseHandler, duration: 1 });
-        enqueueSuccessSnackbar("success", undefined, { onClose: onCloseHandler, duration: 1 });
-      }, []);
+        useEffect(() => {
+          enqueueErrorSnackbar("error", undefined, { onClose: onCloseHandler, duration: 1 });
+          enqueueSuccessSnackbar("success", undefined, { onClose: onCloseHandler, duration: 1 });
+        }, []);
 
-      return <div></div>;
-    };
+        return <div></div>;
+      };
 
-    const queries = render(
-      <SnackbarProvider closeButtonTitle="close">
-        <ExampleComponent />
-      </SnackbarProvider>
-    );
+      const queries = render(
+        <SnackbarProvider closeButtonTitle="close">
+          <ExampleComponent />
+        </SnackbarProvider>
+      );
 
-    const errorSnackbar = await queries.findByText(/error/i);
-    const successSnackbar = await queries.findByText(/success/i);
+      const errorSnackbar = await queries.findByText(/error/i);
+      const successSnackbar = await queries.findByText(/success/i);
 
-    expect(errorSnackbar).toBeTruthy();
-    expect(successSnackbar).toBeTruthy();
+      expect(errorSnackbar).toBeTruthy();
+      expect(successSnackbar).toBeTruthy();
 
-    const parentErrorSnackbar = errorSnackbar.closest(".snackbar")!;
-    const parentSuccessSnackbar = successSnackbar.closest(".snackbar")!;
+      const parentErrorSnackbar = errorSnackbar.closest(".snackbar")!;
+      const parentSuccessSnackbar = successSnackbar.closest(".snackbar")!;
 
-    fireEvent.animationEnd(parentErrorSnackbar);
-    fireEvent.animationEnd(parentSuccessSnackbar);
+      fireEvent.animationEnd(parentErrorSnackbar);
+      fireEvent.animationEnd(parentSuccessSnackbar);
 
-    await waitFor(() => expect(onCloseHandler).toHaveBeenCalledTimes(2));
+      await waitFor(() => expect(onCloseHandler).toHaveBeenCalledTimes(2));
+    });
   });
 });

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

@@ -17,7 +17,13 @@
 import React, { ReactNode, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { SnackbarContextProvider } from "./SnackbarStateProvider";
-import { Actions, SnackbarOptionsProps, Variant } from "../interfaces";
+import {
+  Actions,
+  EnqueueSnackbarProps,
+  SnackbarOptionsProps,
+  Variant,
+  isNewEnqueueSnackbarInterface
+} from "../interfaces";
 import { Placement, SnackbarContainer } from "../SnackbarContainer/SnackbarContainer";
 import { generateID } from "../../../../util/helper";
 import { SnackbarItem } from "../SnackbarItem/SnackbarItem";
@@ -92,52 +98,72 @@ export const SnackbarProvider = (
   };
 
   const enqueueSnackbar = (
-    title?: string,
+    propsOrTitle: EnqueueSnackbarProps | string | undefined,
     content?: string,
     options: SnackbarOptionsProps = {}
   ): void => {
+    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
+    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
     const {
       variant = "info",
       actions,
-      duration = getDuration(variant, actions, content),
+      duration = getDuration(variant, actions, props.content),
       onClose
-    } = options;
+    } = props;
     const item: Item = {
-      title,
-      content,
+      title: props.title,
+      content: props.content,
       variant,
-      className: options.className,
+      className: props.className,
       actions,
       duration,
       height: 0,
-      id: generateID(15, title),
+      id: generateID(15, props.title),
       onClose
     };
     addSnackbar(item);
   };
 
-  const enqueueSuccessSnackbar = (
+  const mapToNewInterface = (
     title?: string,
     content?: string,
-    options?: SnackbarOptionsProps
+    options: SnackbarOptionsProps = {}
+  ): EnqueueSnackbarProps => {
+    return {
+      title,
+      content,
+      ...options
+    };
+  };
+
+  const enqueueSuccessSnackbar = (
+    propsOrTitle: EnqueueSnackbarProps | string | undefined,
+    content?: string,
+    options: SnackbarOptionsProps = {}
   ): void => {
-    enqueueSnackbar(title, content, { ...options, variant: "success" });
+    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
+    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
+    enqueueSnackbar({ ...props, variant: "success" });
   };
 
   const enqueueErrorSnackbar = (
-    title?: string,
+    propsOrTitle: EnqueueSnackbarProps | string | undefined,
     content?: string,
-    options?: SnackbarOptionsProps
+    options: SnackbarOptionsProps = {}
   ): void => {
-    enqueueSnackbar(title, content, { ...options, variant: "error" });
+    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
+    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
+    enqueueSnackbar({ ...props, variant: "error" });
   };
 
   const enqueueWarningSnackbar = (
-    title?: string,
+    propsOrTitle: EnqueueSnackbarProps | string | undefined,
     content?: string,
-    options?: SnackbarOptionsProps
+    options: SnackbarOptionsProps = {}
   ): void => {
-    enqueueSnackbar(title, content, { ...options, variant: "warning" });
+    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
+    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
+    enqueueSnackbar({ ...props, variant: "warning" });
   };
 
   const onItemClosed = (id: string) => {

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

@@ -15,22 +15,14 @@
  */
 
 import React, { createContext } from "react";
-import { SnackbarOptionsProps } from "../interfaces";
+import { DeprecatedEnqueueSnackbarType } from "../interfaces";
 import { Item } from "./SnackbarProvider";
 
 interface SnackbarContextProps {
-  enqueueSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
-  enqueueSuccessSnackbar: (
-    title?: string,
-    content?: string,
-    options?: SnackbarOptionsProps
-  ) => void;
-  enqueueWarningSnackbar: (
-    title?: string,
-    content?: string,
-    options?: SnackbarOptionsProps
-  ) => void;
-  enqueueErrorSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
+  enqueueSnackbar: DeprecatedEnqueueSnackbarType;
+  enqueueSuccessSnackbar: DeprecatedEnqueueSnackbarType;
+  enqueueWarningSnackbar: DeprecatedEnqueueSnackbarType;
+  enqueueErrorSnackbar: DeprecatedEnqueueSnackbarType;
   setSnackbarHeight: (id: string, height: number) => void;
   snackbars: Item[];
 }

package/src/components/Notifications/Snackbar/interfaces.ts

@@ -27,3 +27,18 @@ export interface SnackbarOptionsProps {
   duration?: number;
   onClose?: () => void;
 }
+
+export interface EnqueueSnackbarProps extends SnackbarOptionsProps {
+  title?: string;
+  content?: string;
+}
+
+export type DeprecatedEnqueueSnackbarType = (
+  propsOrTitle: EnqueueSnackbarProps | string | undefined,
+  content?: string,
+  options?: SnackbarOptionsProps
+) => void;
+
+export function isNewEnqueueSnackbarInterface(args: unknown): args is EnqueueSnackbarProps {
+  return args !== null && typeof args === "object" && ("title" in args || "content" in args);
+}