@onewelcome/react-lib-components 0.2.1 → 0.2.2

package/src/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.test.tsx

@@ -1,16 +1,16 @@
-import React, { useEffect, useRef } from 'react';
-import { DiscardChangesDialog, Props } from './DiscardChangesDialog';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { DiscardChangesDialog, Props } from "./DiscardChangesDialog";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
   open: true,
   onKeepEditing: jest.fn(),
   onDiscardChanges: jest.fn(),
-  discardChangesButtonLabel: 'Discard Changes',
-  keepEditingButtonLabel: 'Keep Editing',
-  contentLabel: 'Content',
-  titleLabel: 'Unsaved changes',
+  discardChangesButtonLabel: "Discard Changes",
+  keepEditingButtonLabel: "Keep Editing",
+  contentLabel: "Content",
+  titleLabel: "Unsaved changes"
 };
 
 const createDiscardChangesDialog = (params?: (defaultParams: Props) => Props) => {
@@ -21,24 +21,24 @@ const createDiscardChangesDialog = (params?: (defaultParams: Props) => Props) =>
   const queries = render(
     <DiscardChangesDialog {...parameters} data-testid="DiscardChangesDialog"></DiscardChangesDialog>
   );
-  const discardChangesDialog = queries.getByTestId('DiscardChangesDialog');
-  const discardChangesBtn = queries.getByRole('button', {
-    name: defaultParams.discardChangesButtonLabel,
+  const discardChangesDialog = queries.getByTestId("DiscardChangesDialog");
+  const discardChangesBtn = queries.getByRole("button", {
+    name: defaultParams.discardChangesButtonLabel
   });
-  const keepEditingBtn = queries.getByRole('button', {
-    name: defaultParams.keepEditingButtonLabel,
+  const keepEditingBtn = queries.getByRole("button", {
+    name: defaultParams.keepEditingButtonLabel
   });
 
   return {
     ...queries,
     discardChangesDialog,
     discardChangesBtn,
-    keepEditingBtn,
+    keepEditingBtn
   };
 };
 
-describe('DiscardChangesDialog should render', () => {
-  it('renders without crashing', () => {
+describe("DiscardChangesDialog should render", () => {
+  it("renders without crashing", () => {
     const { discardChangesDialog, discardChangesBtn, keepEditingBtn } =
       createDiscardChangesDialog();
 
@@ -54,10 +54,10 @@ describe('DiscardChangesDialog should render', () => {
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -87,7 +87,7 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);

package/src/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.tsx

@@ -1,9 +1,9 @@
-import React, { ComponentPropsWithRef } from 'react';
-import { Dialog } from '../../Dialog/Dialog';
-import { Typography } from '../../../Typography/Typography';
-import { DataAttributeKey } from '../../../interfaces';
+import React, { ComponentPropsWithRef } from "react";
+import { Dialog } from "../../Dialog/Dialog";
+import { Typography } from "../../../Typography/Typography";
+import { DataAttributeKey } from "../../../interfaces";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   open: boolean;
   discardChangesButtonLabel: string;
   keepEditingButtonLabel: string;
@@ -38,11 +38,11 @@ export const DiscardChangesDialog = React.forwardRef<HTMLDivElement, Props>(
         onClose={onKeepEditing}
         primaryAction={{
           label: discardChangesButtonLabel,
-          onClick: onDiscardChanges,
+          onClick: onDiscardChanges
         }}
         secondaryAction={{
           label: keepEditingButtonLabel,
-          onClick: onKeepEditing,
+          onClick: onKeepEditing
         }}
         disableEscapeKeyDown={false}
       >

package/src/Notifications/DiscardChangesModal/DiscardChangesModal.test.tsx

@@ -1,24 +1,24 @@
-import React, { useEffect, useRef } from 'react';
-import { DiscardChangesModal, Props } from './DiscardChangesModal';
-import { findByTestId, getAllByRole, render, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { DiscardChangesModal, Props } from "./DiscardChangesModal";
+import { findByTestId, getAllByRole, render, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
-  id: 'modal',
+  id: "modal",
   open: true,
   hasUnsavedChanges: jest.fn(),
   onClose: jest.fn(),
   headerProps: {
-    title: 'Header',
+    title: "Header"
   },
   discardChangedDialogProps: {
-    'data-testid': 'discardChangesDialog',
-    discardChangesButtonLabel: 'Discard',
-    keepEditingButtonLabel: 'Keep editing',
-    contentLabel: 'Unsaved changes',
-    titleLabel: 'Dialog',
+    "data-testid": "discardChangesDialog",
+    discardChangesButtonLabel: "Discard",
+    keepEditingButtonLabel: "Keep editing",
+    contentLabel: "Unsaved changes",
+    titleLabel: "Dialog"
   },
-  children: <span>children</span>,
+  children: <span>children</span>
 };
 
 const createDiscardChangesModal = (params?: (defaultParams: Props) => Props) => {
@@ -27,37 +27,37 @@ const createDiscardChangesModal = (params?: (defaultParams: Props) => Props) =>
     parameters = params(defaultParams);
   }
   const queries = render(<DiscardChangesModal {...parameters} data-testid="discardChangesModal" />);
-  const discardChangesModal = queries.getByTestId('discardChangesModal');
-  const closeBtn = queries.getByRole('button', { name: 'close modal' });
+  const discardChangesModal = queries.getByTestId("discardChangesModal");
+  const closeBtn = queries.getByRole("button", { name: "close modal" });
 
   return {
     ...queries,
     discardChangesModal,
-    closeBtn,
+    closeBtn
   };
 };
 
 const getDiscardChangesButtons = (container: HTMLElement) =>
-  getAllByRole(container, 'button', {
+  getAllByRole(container, "button", {
     name: new RegExp(
       `(${defaultParams.discardChangedDialogProps.discardChangesButtonLabel}|${defaultParams.discardChangedDialogProps.keepEditingButtonLabel})`
-    ),
+    )
   });
 
 const findDiscardChangesDialog = (container: HTMLElement) =>
-  findByTestId(container, 'discardChangesDialog');
+  findByTestId(container, "discardChangesDialog");
 
-describe('DiscardChangesModal should render', () => {
-  it('renders without crashing', () => {
+describe("DiscardChangesModal should render", () => {
+  it("renders without crashing", () => {
     const { discardChangesModal, container } = createDiscardChangesModal();
 
     expect(discardChangesModal).toBeDefined();
-    expect(discardChangesModal).toHaveTextContent('children');
+    expect(discardChangesModal).toHaveTextContent("children");
     expect(discardChangesModal).toHaveTextContent(defaultParams.headerProps.title);
     expect(container).not.toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel);
   });
 
-  it('clicking on close button without making any changes close the modal', () => {
+  it("clicking on close button without making any changes close the modal", () => {
     (
       defaultParams.hasUnsavedChanges as jest.MockedFunction<typeof defaultParams.hasUnsavedChanges>
     ).mockReturnValue(false);
@@ -68,8 +68,8 @@ describe('DiscardChangesModal should render', () => {
   });
 });
 
-describe('DiscardChangesModal should show DiscardChangesDialog', () => {
-  it('showing DiscardChangesDialog and clicking on `keep editing` button', async () => {
+describe("DiscardChangesModal should show DiscardChangesDialog", () => {
+  it("showing DiscardChangesDialog and clicking on `keep editing` button", async () => {
     (
       defaultParams.hasUnsavedChanges as jest.MockedFunction<typeof defaultParams.hasUnsavedChanges>
     ).mockReturnValue(true);
@@ -92,7 +92,7 @@ describe('DiscardChangesModal should show DiscardChangesDialog', () => {
     );
   });
 
-  it('showing DiscardChangesDialog and clicking on `discard` button', async () => {
+  it("showing DiscardChangesDialog and clicking on `discard` button", async () => {
     (
       defaultParams.hasUnsavedChanges as jest.MockedFunction<typeof defaultParams.hasUnsavedChanges>
     ).mockReturnValue(true);
@@ -110,10 +110,10 @@ describe('DiscardChangesModal should show DiscardChangesDialog', () => {
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (
         ref1: React.RefObject<HTMLElement>,
@@ -136,15 +136,15 @@ describe('ref should work', () => {
           data-ref="testing"
           hasUnsavedChanges={jest.fn()}
           onClose={jest.fn()}
-          headerProps={{ title: 'test' }}
+          headerProps={{ title: "test" }}
           open={false}
           children="test"
           discardChangedDialogProps={{
-            contentLabel: 'test',
-            discardChangesButtonLabel: 'test',
-            keepEditingButtonLabel: 'test',
-            titleLabel: 'test',
-            'data-ref': 'testing',
+            contentLabel: "test",
+            discardChangesButtonLabel: "test",
+            keepEditingButtonLabel: "test",
+            titleLabel: "test",
+            "data-ref": "testing"
           }}
           title="test"
           id="test"
@@ -153,8 +153,8 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref1: React.RefObject<HTMLElement>, ref2: React.RefObject<HTMLElement>) => {
-      expect(ref1.current).toHaveAttribute('data-ref', 'testing');
-      expect(ref2.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref1.current).toHaveAttribute("data-ref", "testing");
+      expect(ref2.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);

package/src/Notifications/DiscardChangesModal/DiscardChangesModal.tsx

@@ -1,18 +1,18 @@
-import React, { Fragment, useState } from 'react';
-import { Modal, Props as ModalProps } from '../Modal/Modal';
-import { ModalHeader, Props as ModalHeaderProps } from '../Modal/ModalHeader/ModalHeader';
+import React, { Fragment, useState } from "react";
+import { Modal, Props as ModalProps } from "../Modal/Modal";
+import { ModalHeader, Props as ModalHeaderProps } from "../Modal/ModalHeader/ModalHeader";
 import {
   DiscardChangesDialog,
-  Props as DiscardChangesDialogProps,
-} from './DiscardChangesDialog/DiscardChangesDialog';
+  Props as DiscardChangesDialogProps
+} from "./DiscardChangesDialog/DiscardChangesDialog";
 
-export interface Props extends Omit<ModalProps, 'onClose'> {
+export interface Props extends Omit<ModalProps, "onClose"> {
   hasUnsavedChanges: () => boolean;
   onClose: (event?: React.MouseEvent<HTMLElement>) => unknown;
-  headerProps: Omit<ModalHeaderProps, 'onClose' | 'id'>;
+  headerProps: Omit<ModalHeaderProps, "onClose" | "id">;
   discardChangedDialogProps: Omit<
     DiscardChangesDialogProps,
-    'open' | 'onKeepEditing' | 'onDiscardChanges'
+    "open" | "onKeepEditing" | "onDiscardChanges"
   >;
   modalRef?: React.RefObject<HTMLDivElement>;
   dialogRef?: React.RefObject<HTMLDivElement>;

package/src/Notifications/Modal/Modal.test.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import * as ReactDOM from 'react-dom';
-import { Modal } from './Modal';
+import React from "react";
+import * as ReactDOM from "react-dom";
+import { Modal } from "./Modal";
 
-describe('Modal', () => {
-  it('renders without crashing', () => {
-    const div = document.createElement('div');
+describe("Modal", () => {
+  it("renders without crashing", () => {
+    const div = document.createElement("div");
     ReactDOM.render(
       <Modal id="modal" open={true} onClose={() => {}}>
         test

package/src/Notifications/Modal/Modal.tsx

@@ -1 +1 @@
-export { BaseModal as Modal, Props } from '../BaseModal/BaseModal';
+export { BaseModal as Modal, Props } from "../BaseModal/BaseModal";

package/src/Notifications/Modal/ModalActions/ModalActions.tsx

@@ -1,4 +1,4 @@
 export {
   BaseModalActions as ModalActions,
-  Props,
-} from '../../BaseModal/BaseModalActions/BaseModalActions';
+  Props
+} from "../../BaseModal/BaseModalActions/BaseModalActions";

package/src/Notifications/Modal/ModalContent/ModalContent.tsx

@@ -1,4 +1,4 @@
 export {
   BaseModalContent as ModalContent,
-  Props,
-} from '../../BaseModal/BaseModalContent/BaseModalContent';
+  Props
+} from "../../BaseModal/BaseModalContent/BaseModalContent";

package/src/Notifications/Modal/ModalHeader/ModalHeader.tsx

@@ -1,4 +1,4 @@
 export {
   BaseModalHeader as ModalHeader,
-  Props,
-} from '../../BaseModal/BaseModalHeader/BaseModalHeader';
+  Props
+} from "../../BaseModal/BaseModalHeader/BaseModalHeader";

package/src/Notifications/SlideInModal/SlideInModal.test.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useRef } from 'react';
-import { SlideInModal } from './SlideInModal';
-import { Props } from '../Modal/Modal';
-import { render, fireEvent } from '@testing-library/react';
+import React, { useEffect, useRef } from "react";
+import { SlideInModal } from "./SlideInModal";
+import { Props } from "../Modal/Modal";
+import { render, fireEvent } from "@testing-library/react";
 
 const defaultParams: Props = {
-  id: '',
+  id: "",
   children: undefined,
-  open: false,
+  open: false
 };
 
 const createSlideInModal = (params?: (defaultParams: Props) => Props) => {
@@ -15,16 +15,16 @@ const createSlideInModal = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<SlideInModal {...parameters} data-testid="SlideInModal" />);
-  const slideInModal = queries.getByTestId('SlideInModal');
+  const slideInModal = queries.getByTestId("SlideInModal");
 
   return {
     ...queries,
-    slideInModal,
+    slideInModal
   };
 };
 
-describe('SlideInModal should render', () => {
-  it('renders without crashing', () => {
+describe("SlideInModal should render", () => {
+  it("renders without crashing", () => {
     const { slideInModal } = createSlideInModal();
 
     expect(slideInModal).toBeDefined();
@@ -33,19 +33,19 @@ describe('SlideInModal should render', () => {
   it("makes modal content's container visible after opening transition ends", () => {
     const { slideInModal, rerender } = createSlideInModal();
 
-    expect(slideInModal).toHaveClass('hidden');
+    expect(slideInModal).toHaveClass("hidden");
 
     rerender(<SlideInModal {...defaultParams} open />);
     fireEvent.transitionEnd(slideInModal);
 
-    expect(slideInModal).not.toHaveClass('hidden');
+    expect(slideInModal).not.toHaveClass("hidden");
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -61,7 +61,7 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);

package/src/Notifications/SlideInModal/SlideInModal.tsx

@@ -1,26 +1,31 @@
-import React, { useState } from 'react';
-import { Props as ModalProps, Modal } from '../Modal/Modal';
-import classes from './SlideInModal.module.scss';
+import React, { TransitionEventHandler, useState, useRef } from "react";
+import { Props as ModalProps, Modal } from "../Modal/Modal";
+import classes from "./SlideInModal.module.scss";
 
 export const SlideInModal = React.forwardRef<HTMLDivElement, ModalProps>(
   ({ children, id, open, ...rest }: ModalProps, ref) => {
-    const [classHideOnTransition, setClassHideOnTransition] = useState<'hidden' | ''>('hidden');
+    const [classHideOnTransition, setClassHideOnTransition] = useState<string>("hidden");
+    const containerRef = useRef(null);
 
-    const onTransitionEnd = () => setClassHideOnTransition((prev) => (prev ? '' : 'hidden'));
+    const onTransitionEnd: TransitionEventHandler<HTMLDivElement> = e => {
+      if (e.target === containerRef.current) {
+        setClassHideOnTransition(prev => (prev ? "" : "hidden"));
+      }
+    };
 
     return (
       <Modal
         {...rest}
         id={id}
         open={open}
-        className={`${classes['slide-in-modal']} ${open ? classes['visible'] : ''} ${
-          !open ? classes[classHideOnTransition] : ''
+        className={`${classes["slide-in-modal"]} ${open ? classes["visible"] : ""} ${
+          !open ? classes[classHideOnTransition] : ""
         }`}
-        containerProps={{ className: classes['container'] }}
-        backdropProps={{ className: classes['backdrop-slide'] }}
+        containerProps={{ className: classes["container"] }}
+        backdropProps={{ className: classes["backdrop-slide"] }}
         forceContainerOpen
         onTransitionEnd={onTransitionEnd}
-        ref={ref}
+        ref={ref || containerRef}
       >
         {children}
       </Modal>
@@ -28,4 +33,4 @@ export const SlideInModal = React.forwardRef<HTMLDivElement, ModalProps>(
   }
 );
 
-export { Props } from '../Modal/Modal';
+export { Props } from "../Modal/Modal";

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

@@ -1,10 +1,10 @@
-import React from 'react';
-import { SnackbarContainer, Props } from './SnackbarContainer';
-import { render } from '@testing-library/react';
+import React from "react";
+import { SnackbarContainer, Props } from "./SnackbarContainer";
+import { render } from "@testing-library/react";
 
 const defaultParams: Props = {
-  placement: { vertical: 'top', horizontal: 'center' },
-  children: <span>children</span>,
+  placement: { vertical: "top", horizontal: "center" },
+  children: <span>children</span>
 };
 
 const createSnackbarContainer = (params?: (defaultParams: Props) => Props) => {
@@ -13,25 +13,25 @@ const createSnackbarContainer = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<SnackbarContainer {...parameters} data-testid="snackbarcontainer" />);
-  const snackbarcontainer = queries.getByTestId('snackbarcontainer');
+  const snackbarcontainer = queries.getByTestId("snackbarcontainer");
   return { ...queries, snackbarcontainer };
 };
 
-describe('SnackbarContainer should render', () => {
-  it('renders without crashing', () => {
+describe("SnackbarContainer should render", () => {
+  it("renders without crashing", () => {
     const { snackbarcontainer, getByText } = createSnackbarContainer();
-    expect(snackbarcontainer).toHaveClass('top');
-    expect(snackbarcontainer).toHaveClass('center');
-    expect(snackbarcontainer).toHaveStyle({ zIndex: '' });
-    expect(getByText('children')).toBeDefined();
+    expect(snackbarcontainer).toHaveClass("top");
+    expect(snackbarcontainer).toHaveClass("center");
+    expect(snackbarcontainer).toHaveStyle({ zIndex: "" });
+    expect(getByText("children")).toBeDefined();
     expect(snackbarcontainer).toBeDefined();
   });
 
-  it('renders with zIndex', () => {
-    const { snackbarcontainer } = createSnackbarContainer((defaultParams) => ({
+  it("renders with zIndex", () => {
+    const { snackbarcontainer } = createSnackbarContainer(defaultParams => ({
       ...defaultParams,
-      zIndex: 1,
+      zIndex: 1
     }));
-    expect(snackbarcontainer).toHaveStyle({ zIndex: '1' });
+    expect(snackbarcontainer).toHaveStyle({ zIndex: "1" });
   });
 });

package/src/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import classes from './SnackbarContainer.module.scss';
+import React from "react";
+import classes from "./SnackbarContainer.module.scss";
 
 export interface Placement {
-  vertical: 'top' | 'bottom';
-  horizontal: 'start' | 'center' | 'end';
+  vertical: "top" | "bottom";
+  horizontal: "start" | "center" | "end";
 }
 
 export interface Props {
@@ -18,9 +18,9 @@ export const SnackbarContainer = ({ placement, children, zIndex, className, ...r
     <div
       {...rest}
       style={{ zIndex }}
-      className={`${classes['snackbars']} ${classes[placement.horizontal]} ${
+      className={`${classes["snackbars"]} ${classes[placement.horizontal]} ${
         classes[placement.vertical]
-      } ${className ?? ''}`}
+      } ${className ?? ""}`}
     >
       {children}
     </div>

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

@@ -1,4 +1,4 @@
-@import '../../../readyclasses.module.scss';
+@import "../../../readyclasses.module.scss";
 
 .snackbar {
   padding: 1rem 1.25rem;
@@ -110,7 +110,7 @@
         calc(1.25rem + var(--button-border-width));
 
       &:after {
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         left: 0;

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

@@ -1,41 +1,41 @@
-import React from 'react';
-import { render, getByRole, waitFor } from '@testing-library/react';
-import { SnackbarItem, Props } from './SnackbarItem';
-import userEvent from '@testing-library/user-event';
+import React from "react";
+import { render, getByRole, waitFor } from "@testing-library/react";
+import { SnackbarItem, Props } from "./SnackbarItem";
+import userEvent from "@testing-library/user-event";
 
 const initParams: Props = {
-  id: 'id',
-  title: 'title',
+  id: "id",
+  title: "title",
   duration: 1,
-  variant: 'success',
-  closeButtonTitle: 'close',
-  onClose: jest.fn(),
+  variant: "success",
+  closeButtonTitle: "close",
+  onClose: jest.fn()
 };
 
-describe('SnackbarItem', () => {
-  it('renders without crashing', () => {
+describe("SnackbarItem", () => {
+  it("renders without crashing", () => {
     const { container } = render(<SnackbarItem {...initParams} />);
 
     expect(container).toHaveTextContent(initParams.title);
-    const contentDiv = container.querySelector('.content');
+    const contentDiv = container.querySelector(".content");
     expect(contentDiv).toBeNull();
-    const actionsDiv = container.querySelector('.actions');
+    const actionsDiv = container.querySelector(".actions");
     expect(actionsDiv).toBeNull();
-    expect(getByRole(container, 'button')).toBeDefined();
+    expect(getByRole(container, "button")).toBeDefined();
   });
 
-  it('clicking close button call callback function', () => {
+  it("clicking close button call callback function", () => {
     const { container } = render(<SnackbarItem {...initParams} duration={10000000} />);
 
     expect(initParams.onClose).not.toBeCalled();
-    userEvent.click(getByRole(container, 'button'));
+    userEvent.click(getByRole(container, "button"));
     waitFor(() => {
       expect(initParams.onClose).toBeCalledTimes(1);
       expect(initParams.onClose).toHaveBeenCalledWith(initParams.id);
     });
   });
 
-  it('call close callback after provided duration', () => {
+  it("call close callback after provided duration", () => {
     render(<SnackbarItem {...initParams} />);
 
     expect(initParams.onClose).not.toBeCalled();