@onewelcome/react-lib-components 0.2.0 → 0.2.3

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

@@ -1,13 +1,13 @@
-import React, { useEffect, useRef } from 'react';
-import { DataGridHeader, Props } from './DataGridHeader';
-import { getByRole, render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { DataGridHeader, Props } from "./DataGridHeader";
+import { getByRole, render } from "@testing-library/react";
+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" },
+    { name: "lastName", headline: "Last name" }
+  ]
 };
 
 const createDataGridHeader = (params?: (defaultParams: Props) => Props) => {
@@ -15,224 +15,224 @@ const createDataGridHeader = (params?: (defaultParams: Props) => Props) => {
   if (params) {
     parameters = params(defaultParams);
   }
-  const container = document.createElement('table');
+  const container = document.createElement("table");
   const queries = render(<DataGridHeader {...parameters} data-testid="dataGridHeader" />, {
-    container,
+    container
   });
-  const dataGridHeader = queries.getByTestId('dataGridHeader');
+  const dataGridHeader = queries.getByTestId("dataGridHeader");
 
   return {
     ...queries,
-    dataGridHeader,
+    dataGridHeader
   };
 };
 
-describe('DataGridHeader should render', () => {
-  it('renders without crashing', () => {
+describe("DataGridHeader should render", () => {
+  it("renders without crashing", () => {
     const { dataGridHeader, getAllByRole, getByRole } = createDataGridHeader();
 
     expect(dataGridHeader).toBeDefined();
-    expect(getAllByRole('columnheader')).toHaveLength(2);
-    expect(getByRole('cell')).toBeDefined(); //context-menu empty cell
+    expect(getAllByRole("columnheader")).toHaveLength(2);
+    expect(getByRole("cell")).toBeDefined(); //context-menu empty cell
 
-    expect(dataGridHeader.querySelectorAll('[data-icon]')).toHaveLength(0);
+    expect(dataGridHeader.querySelectorAll("[data-icon]")).toHaveLength(0);
   });
 
-  it('renders without hidden cell', () => {
-    const { dataGridHeader, getByRole } = createDataGridHeader((params) => ({
+  it("renders without hidden cell", () => {
+    const { dataGridHeader, getByRole } = createDataGridHeader(params => ({
       ...params,
-      headers: [...params.headers].map((header, idx) => ({ ...header, hidden: idx === 1 })),
+      headers: [...params.headers].map((header, idx) => ({ ...header, hidden: idx === 1 }))
     }));
 
     expect(dataGridHeader).toBeDefined();
-    expect(getByRole('columnheader')).toHaveTextContent(defaultParams.headers[0].headline);
-    expect(getByRole('cell')).toBeDefined(); //context-menu empty cell
+    expect(getByRole("columnheader")).toHaveTextContent(defaultParams.headers[0].headline);
+    expect(getByRole("cell")).toBeDefined(); //context-menu empty cell
 
-    expect(dataGridHeader.querySelectorAll('[data-icon]')).toHaveLength(0);
+    expect(dataGridHeader.querySelectorAll("[data-icon]")).toHaveLength(0);
   });
 
-  it('renders without contenxt-menu empty cell', () => {
-    const { dataGridHeader, getAllByRole, queryByRole } = createDataGridHeader((params) => ({
+  it("renders without contenxt-menu empty cell", () => {
+    const { dataGridHeader, getAllByRole, queryByRole } = createDataGridHeader(params => ({
       ...params,
-      disableContextMenuColumn: true,
+      disableContextMenuColumn: true
     }));
 
     expect(dataGridHeader).toBeDefined();
-    expect(getAllByRole('columnheader')).toHaveLength(2);
-    expect(queryByRole('cell')).toBeNull(); //context-menu empty cell
+    expect(getAllByRole("columnheader")).toHaveLength(2);
+    expect(queryByRole("cell")).toBeNull(); //context-menu empty cell
   });
 
-  it('renders headers cells without sorting indicators even when initialSort is provided', () => {
-    const { dataGridHeader } = createDataGridHeader((params) => ({
+  it("renders headers cells without sorting indicators even when initialSort is provided", () => {
+    const { dataGridHeader } = createDataGridHeader(params => ({
       ...params,
-      initialSort: [{ name: params.headers[0].name, direction: 'ASC' }],
+      initialSort: [{ name: params.headers[0].name, direction: "ASC" }]
     }));
 
-    expect(dataGridHeader.querySelectorAll('[data-icon]')).toHaveLength(0);
+    expect(dataGridHeader.querySelectorAll("[data-icon]")).toHaveLength(0);
   });
 
-  it('renders headers cells with sorting indicators', () => {
+  it("renders headers cells with sorting indicators", () => {
     const onSort = jest.fn();
-    const { dataGridHeader } = createDataGridHeader((params) => ({
+    const { dataGridHeader } = createDataGridHeader(params => ({
       ...params,
-      onSort,
+      onSort
     }));
 
-    const sortingIcons = dataGridHeader.querySelectorAll('[data-icon]');
+    const sortingIcons = dataGridHeader.querySelectorAll("[data-icon]");
     expect(sortingIcons).toHaveLength(4);
-    sortingIcons.forEach((icon) => expect(icon).not.toHaveClass('hidden'));
+    sortingIcons.forEach(icon => expect(icon).not.toHaveClass("hidden"));
   });
 
-  it('renders headers cells with sorting indicators when initialSort provided with direction ASC', () => {
+  it("renders headers cells with sorting indicators when initialSort provided with direction ASC", () => {
     const onSort = jest.fn();
-    const { dataGridHeader, getAllByRole } = createDataGridHeader((params) => ({
+    const { dataGridHeader, getAllByRole } = createDataGridHeader(params => ({
       ...params,
-      initialSort: [{ name: params.headers[0].name, direction: 'ASC' }],
-      onSort,
+      initialSort: [{ name: params.headers[0].name, direction: "ASC" }],
+      onSort
     }));
 
-    expect(dataGridHeader.querySelectorAll('[data-icon]:not(.hidden)')).toHaveLength(3);
-    const [firstNameCell, lastNameCell] = getAllByRole('columnheader');
-    expect(firstNameCell).toHaveAttribute('aria-sort', 'ascending');
-    expect(lastNameCell).not.toHaveAttribute('aria-sort');
+    expect(dataGridHeader.querySelectorAll("[data-icon]:not(.hidden)")).toHaveLength(3);
+    const [firstNameCell, lastNameCell] = getAllByRole("columnheader");
+    expect(firstNameCell).toHaveAttribute("aria-sort", "ascending");
+    expect(lastNameCell).not.toHaveAttribute("aria-sort");
   });
 
-  it('renders headers cells with sorting indicators when initialSort provided with direction DESC', () => {
+  it("renders headers cells with sorting indicators when initialSort provided with direction DESC", () => {
     const onSort = jest.fn();
-    const { dataGridHeader, getAllByRole } = createDataGridHeader((params) => ({
+    const { dataGridHeader, getAllByRole } = createDataGridHeader(params => ({
       ...params,
-      initialSort: [{ name: params.headers[1].name, direction: 'DESC' }],
-      onSort,
+      initialSort: [{ name: params.headers[1].name, direction: "DESC" }],
+      onSort
     }));
 
-    expect(dataGridHeader.querySelectorAll('[data-icon]:not(.hidden)')).toHaveLength(3);
-    const [firstNameCell, lastNameCell] = getAllByRole('columnheader');
-    expect(firstNameCell).not.toHaveAttribute('aria-sort');
-    expect(lastNameCell).toHaveAttribute('aria-sort', 'descending');
+    expect(dataGridHeader.querySelectorAll("[data-icon]:not(.hidden)")).toHaveLength(3);
+    const [firstNameCell, lastNameCell] = getAllByRole("columnheader");
+    expect(firstNameCell).not.toHaveAttribute("aria-sort");
+    expect(lastNameCell).toHaveAttribute("aria-sort", "descending");
   });
 });
 
-describe('DataGridHeader should be interactive', () => {
-  it('clicking on cell call onSort callback', () => {
+describe("DataGridHeader should be interactive", () => {
+  it("clicking on cell call onSort callback", () => {
     const onSortHandler = jest.fn();
-    const { getAllByRole } = createDataGridHeader((params) => ({
+    const { getAllByRole } = createDataGridHeader(params => ({
       ...params,
-      onSort: onSortHandler,
+      onSort: onSortHandler
     }));
 
-    const [firstNameCell, lastNameCell] = getAllByRole('columnheader');
-    userEvent.click(getByRole(firstNameCell, 'button'));
+    const [firstNameCell, lastNameCell] = getAllByRole("columnheader");
+    userEvent.click(getByRole(firstNameCell, "button"));
 
     expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[0].name, direction: 'ASC' },
+      { name: defaultParams.headers[0].name, direction: "ASC" }
     ]);
-    expect(firstNameCell).toHaveAttribute('aria-sort', 'ascending');
-    expect(lastNameCell).not.toHaveAttribute('aria-sort');
+    expect(firstNameCell).toHaveAttribute("aria-sort", "ascending");
+    expect(lastNameCell).not.toHaveAttribute("aria-sort");
   });
 
-  it('clicking on multiple cells call onSort callback with one column selected when single-sorting is enabled', () => {
+  it("clicking on multiple cells call onSort callback with one column selected when single-sorting is enabled", () => {
     const onSortHandler = jest.fn();
-    const { getAllByRole } = createDataGridHeader((params) => ({
+    const { getAllByRole } = createDataGridHeader(params => ({
       ...params,
-      onSort: onSortHandler,
+      onSort: onSortHandler
     }));
 
-    const [firstNameCell, lastNameCell] = getAllByRole('columnheader');
+    const [firstNameCell, lastNameCell] = getAllByRole("columnheader");
 
-    userEvent.click(getByRole(firstNameCell, 'button'));
-    userEvent.click(getByRole(lastNameCell, 'button'));
+    userEvent.click(getByRole(firstNameCell, "button"));
+    userEvent.click(getByRole(lastNameCell, "button"));
     expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[0].name, direction: 'ASC' },
+      { name: defaultParams.headers[0].name, direction: "ASC" }
     ]);
     expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[1].name, direction: 'ASC' },
+      { name: defaultParams.headers[1].name, direction: "ASC" }
     ]);
-    expect(firstNameCell).not.toHaveAttribute('aria-sort');
-    expect(lastNameCell).toHaveAttribute('aria-sort', 'ascending');
+    expect(firstNameCell).not.toHaveAttribute("aria-sort");
+    expect(lastNameCell).toHaveAttribute("aria-sort", "ascending");
 
-    userEvent.click(getByRole(lastNameCell, 'button'));
+    userEvent.click(getByRole(lastNameCell, "button"));
     expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[1].name, direction: 'DESC' },
+      { name: defaultParams.headers[1].name, direction: "DESC" }
     ]);
-    expect(firstNameCell).not.toHaveAttribute('aria-sort');
-    expect(lastNameCell).toHaveAttribute('aria-sort', 'descending');
+    expect(firstNameCell).not.toHaveAttribute("aria-sort");
+    expect(lastNameCell).toHaveAttribute("aria-sort", "descending");
 
-    userEvent.click(getByRole(firstNameCell, 'button'));
+    userEvent.click(getByRole(firstNameCell, "button"));
     expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[0].name, direction: 'ASC' },
+      { name: defaultParams.headers[0].name, direction: "ASC" }
     ]);
-    expect(firstNameCell).toHaveAttribute('aria-sort', 'ascending');
-    expect(lastNameCell).not.toHaveAttribute('aria-sort');
+    expect(firstNameCell).toHaveAttribute("aria-sort", "ascending");
+    expect(lastNameCell).not.toHaveAttribute("aria-sort");
 
-    userEvent.click(getByRole(firstNameCell, 'button'));
+    userEvent.click(getByRole(firstNameCell, "button"));
     expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[1].name, direction: 'DESC' },
+      { name: defaultParams.headers[1].name, direction: "DESC" }
     ]);
-    expect(firstNameCell).toHaveAttribute('aria-sort', 'descending');
-    expect(lastNameCell).not.toHaveAttribute('aria-sort');
+    expect(firstNameCell).toHaveAttribute("aria-sort", "descending");
+    expect(lastNameCell).not.toHaveAttribute("aria-sort");
 
-    userEvent.click(getByRole(firstNameCell, 'button'));
+    userEvent.click(getByRole(firstNameCell, "button"));
     expect(onSortHandler).toBeCalledWith([]);
-    expect(firstNameCell).not.toHaveAttribute('aria-sort');
-    expect(lastNameCell).not.toHaveAttribute('aria-sort');
+    expect(firstNameCell).not.toHaveAttribute("aria-sort");
+    expect(lastNameCell).not.toHaveAttribute("aria-sort");
   });
 
-  it('clicking on multiple cells call onSort callback with multiple columns selected when multi-sorting is enabled', () => {
+  it("clicking on multiple cells call onSort callback with multiple columns selected when multi-sorting is enabled", () => {
     const onSortHandler = jest.fn();
-    const { getAllByRole } = createDataGridHeader((params) => ({
+    const { getAllByRole } = createDataGridHeader(params => ({
       ...params,
       enableMultiSorting: true,
-      onSort: onSortHandler,
+      onSort: onSortHandler
     }));
 
-    const [firstNameCell, lastNameCell] = getAllByRole('columnheader');
+    const [firstNameCell, lastNameCell] = getAllByRole("columnheader");
 
-    userEvent.click(getByRole(firstNameCell, 'button'));
-    userEvent.click(getByRole(lastNameCell, 'button'));
+    userEvent.click(getByRole(firstNameCell, "button"));
+    userEvent.click(getByRole(lastNameCell, "button"));
     expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[0].name, direction: 'ASC' },
+      { name: defaultParams.headers[0].name, direction: "ASC" }
     ]);
     expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[1].name, direction: 'ASC' },
-      { name: defaultParams.headers[0].name, direction: 'ASC' },
+      { name: defaultParams.headers[1].name, direction: "ASC" },
+      { name: defaultParams.headers[0].name, direction: "ASC" }
     ]);
-    expect(firstNameCell).toHaveAttribute('aria-sort', 'ascending');
-    expect(lastNameCell).toHaveAttribute('aria-sort', 'ascending');
+    expect(firstNameCell).toHaveAttribute("aria-sort", "ascending");
+    expect(lastNameCell).toHaveAttribute("aria-sort", "ascending");
 
-    userEvent.click(getByRole(lastNameCell, 'button'));
+    userEvent.click(getByRole(lastNameCell, "button"));
     expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[1].name, direction: 'DESC' },
-      { name: defaultParams.headers[0].name, direction: 'ASC' },
+      { name: defaultParams.headers[1].name, direction: "DESC" },
+      { name: defaultParams.headers[0].name, direction: "ASC" }
     ]);
-    expect(firstNameCell).toHaveAttribute('aria-sort', 'ascending');
-    expect(lastNameCell).toHaveAttribute('aria-sort', 'descending');
+    expect(firstNameCell).toHaveAttribute("aria-sort", "ascending");
+    expect(lastNameCell).toHaveAttribute("aria-sort", "descending");
 
-    userEvent.click(getByRole(firstNameCell, 'button'));
+    userEvent.click(getByRole(firstNameCell, "button"));
     expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[0].name, direction: 'DESC' },
-      { name: defaultParams.headers[1].name, direction: 'DESC' },
+      { name: defaultParams.headers[0].name, direction: "DESC" },
+      { name: defaultParams.headers[1].name, direction: "DESC" }
     ]);
-    expect(firstNameCell).toHaveAttribute('aria-sort', 'descending');
-    expect(lastNameCell).toHaveAttribute('aria-sort', 'descending');
+    expect(firstNameCell).toHaveAttribute("aria-sort", "descending");
+    expect(lastNameCell).toHaveAttribute("aria-sort", "descending");
 
-    userEvent.click(getByRole(firstNameCell, 'button'));
+    userEvent.click(getByRole(firstNameCell, "button"));
     expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[1].name, direction: 'DESC' },
+      { name: defaultParams.headers[1].name, direction: "DESC" }
     ]);
-    expect(firstNameCell).not.toHaveAttribute('aria-sort');
-    expect(lastNameCell).toHaveAttribute('aria-sort', 'descending');
+    expect(firstNameCell).not.toHaveAttribute("aria-sort");
+    expect(lastNameCell).toHaveAttribute("aria-sort", "descending");
 
-    userEvent.click(getByRole(lastNameCell, 'button'));
+    userEvent.click(getByRole(lastNameCell, "button"));
     expect(onSortHandler).toBeCalledWith([]);
-    expect(firstNameCell).not.toHaveAttribute('aria-sort');
-    expect(lastNameCell).not.toHaveAttribute('aria-sort');
+    expect(firstNameCell).not.toHaveAttribute("aria-sort");
+    expect(lastNameCell).not.toHaveAttribute("aria-sort");
   });
 });
 
-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;
     }) => {
@@ -246,10 +246,10 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
-    const container = document.createElement('table');
+    const container = document.createElement("table");
     render(<ExampleComponent propagateRef={refCheck} />, { container });
   });
 });

package/src/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -1,9 +1,9 @@
-import React, { ComponentPropsWithRef, useEffect, useState } from 'react';
-import { ColumnName, Direction, HeaderCell, OnSortFunction, Sort } from '../datagrid.interfaces';
-import { DataGridHeaderCell } from './DataGridHeaderCell';
-import classes from './DataGridHeader.module.scss';
+import React, { ComponentPropsWithRef, useEffect, useState } from "react";
+import { ColumnName, Direction, HeaderCell, OnSortFunction, Sort } from "../datagrid.interfaces";
+import { DataGridHeaderCell } from "./DataGridHeaderCell";
+import classes from "./DataGridHeader.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'thead'> {
+export interface Props extends ComponentPropsWithRef<"thead"> {
   headers: HeaderCell[];
   initialSort?: Sort;
   onSort?: OnSortFunction;
@@ -12,7 +12,7 @@ export interface Props extends ComponentPropsWithRef<'thead'> {
   spacing?: React.CSSProperties;
 }
 
-const sortingStates = [undefined, 'ASC', 'DESC'] as (Direction | undefined)[];
+const sortingStates = [undefined, "ASC", "DESC"] as (Direction | undefined)[];
 
 export const DataGridHeader = React.forwardRef<HTMLTableSectionElement, Props>(
   (
@@ -34,7 +34,7 @@ export const DataGridHeader = React.forwardRef<HTMLTableSectionElement, Props>(
     }, [initialSort]);
 
     const calculateNextSortState = (direction?: Direction) => {
-      const currentDirectionIdx = sortingStates.findIndex((item) => item === direction);
+      const currentDirectionIdx = sortingStates.findIndex(item => item === direction);
       return sortingStates[currentDirectionIdx + (1 % sortingStates.length)];
     };
 
@@ -43,8 +43,8 @@ export const DataGridHeader = React.forwardRef<HTMLTableSectionElement, Props>(
      * Last modified sorting column has the highest priority.
      */
     const updateSortList = (name: ColumnName): Sort => {
-      const current = sortList.find((item) => item.name === name);
-      const restSortList = enableMultiSorting ? sortList.filter((item) => item.name !== name) : [];
+      const current = sortList.find(item => item.name === name);
+      const restSortList = enableMultiSorting ? sortList.filter(item => item.name !== name) : [];
       const newSortDirection = calculateNextSortState(current?.direction);
       return newSortDirection
         ? [{ name, direction: newSortDirection }, ...restSortList]
@@ -71,7 +71,7 @@ export const DataGridHeader = React.forwardRef<HTMLTableSectionElement, Props>(
         headerStyle.paddingRight = spacing?.paddingRight;
       }
 
-      const sort = sortList.find((item) => item.name === header.name);
+      const sort = sortList.find(item => item.name === header.name);
       return (
         <DataGridHeaderCell
           key={header.name}
@@ -86,14 +86,14 @@ export const DataGridHeader = React.forwardRef<HTMLTableSectionElement, Props>(
     });
 
     return (
-      <thead {...rest} ref={ref} className={classes['thead']}>
-        <tr className={classes['row']}>
+      <thead {...rest} ref={ref} className={classes["thead"]}>
+        <tr className={classes["row"]}>
           {headerCells}
           {!disableContextMenuColumn && (
             <td
               style={{ paddingRight: spacing?.paddingRight }}
               aria-label="context menu"
-              className={classes['context-menu']}
+              className={classes["context-menu"]}
             ></td>
           )}
         </tr>

package/src/DataGrid/DataGridHeader/DataGridHeaderCell.module.scss

@@ -21,6 +21,8 @@
     border: 0;
     background: none;
     cursor: pointer;
+    display: inline-flex;
+    align-items: center;
   }
 }
 

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

@@ -1,111 +1,111 @@
-import React, { useEffect, useRef } from 'react';
-import { DataGridHeaderCell, Props } from './DataGridHeaderCell';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { DataGridHeaderCell, Props } from "./DataGridHeaderCell";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
-const defaultParams: Props = { name: 'name-123', headline: 'Test' };
+const defaultParams: Props = { name: "name-123", headline: "Test" };
 
 const createDataGridHeaderCell = (params?: (defaultParams: Props) => Props) => {
   let parameters: Props = defaultParams;
   if (params) {
     parameters = params(defaultParams);
   }
-  const container = document.createElement('tr');
+  const container = document.createElement("tr");
   const queries = render(<DataGridHeaderCell {...parameters} data-testid="dataGridHeaderCell" />, {
-    container,
+    container
   });
-  const dataGridHeaderCell = queries.getByTestId('dataGridHeaderCell');
+  const dataGridHeaderCell = queries.getByTestId("dataGridHeaderCell");
 
   return {
     ...queries,
-    dataGridHeaderCell,
+    dataGridHeaderCell
   };
 };
 
-describe('DataGridHeaderCell should render', () => {
-  it('renders without crashing', () => {
+describe("DataGridHeaderCell should render", () => {
+  it("renders without crashing", () => {
     const { dataGridHeaderCell, queryByRole } = createDataGridHeaderCell();
 
     expect(dataGridHeaderCell).toBeDefined();
     expect(dataGridHeaderCell).toHaveTextContent(defaultParams.headline);
-    expect(queryByRole('button')).toBeDefined();
-    expect(dataGridHeaderCell.querySelectorAll('[data-icon]')).toHaveLength(2);
+    expect(queryByRole("button")).toBeDefined();
+    expect(dataGridHeaderCell.querySelectorAll("[data-icon]")).toHaveLength(2);
   });
 
-  it('renders without sorting indicators (icons)', () => {
-    const { dataGridHeaderCell } = createDataGridHeaderCell((params) => ({
+  it("renders without sorting indicators (icons)", () => {
+    const { dataGridHeaderCell } = createDataGridHeaderCell(params => ({
       ...params,
-      disableSorting: true,
+      disableSorting: true
     }));
 
-    expect(dataGridHeaderCell.querySelector('[data-icon]')).toBeNull();
+    expect(dataGridHeaderCell.querySelector("[data-icon]")).toBeNull();
   });
 
-  it('renders DESC and ASC sorting indicators (icons) when sorting is enabled and current sorting is not defined', () => {
+  it("renders DESC and ASC sorting indicators (icons) when sorting is enabled and current sorting is not defined", () => {
     const { dataGridHeaderCell } = createDataGridHeaderCell();
 
     expect(dataGridHeaderCell).toBeDefined();
-    const sortingIcons = dataGridHeaderCell.querySelectorAll('[data-icon]');
+    const sortingIcons = dataGridHeaderCell.querySelectorAll("[data-icon]");
     expect(sortingIcons).toHaveLength(2);
-    sortingIcons.forEach((icon) => {
-      expect(icon).toHaveClass('indicator');
-      expect(icon).not.toHaveClass('active');
-      expect(icon).not.toHaveClass('hidden');
+    sortingIcons.forEach(icon => {
+      expect(icon).toHaveClass("indicator");
+      expect(icon).not.toHaveClass("active");
+      expect(icon).not.toHaveClass("hidden");
     });
   });
 
-  it('renders ASC sorting indicator (icon) when sorting is enabled and current sorting is ASC', () => {
-    const { dataGridHeaderCell } = createDataGridHeaderCell((params) => ({
+  it("renders ASC sorting indicator (icon) when sorting is enabled and current sorting is ASC", () => {
+    const { dataGridHeaderCell } = createDataGridHeaderCell(params => ({
       ...params,
-      activeSortDirection: 'ASC',
+      activeSortDirection: "ASC"
     }));
 
     expect(dataGridHeaderCell).toBeDefined();
-    const sortingIcons = dataGridHeaderCell.querySelectorAll('[data-icon]');
+    const sortingIcons = dataGridHeaderCell.querySelectorAll("[data-icon]");
     expect(sortingIcons).toHaveLength(2);
-    sortingIcons.forEach((icon) => expect(icon).toHaveClass('indicator'));
-    expect(sortingIcons[0]).toHaveClass('indicator', 'active', 'icon-triangle-up');
-    expect(sortingIcons[0]).not.toHaveClass('hidden');
-    expect(sortingIcons[1]).toHaveClass('indicator', 'hidden', 'icon-triangle-down');
-    expect(sortingIcons[1]).not.toHaveClass('active');
+    sortingIcons.forEach(icon => expect(icon).toHaveClass("indicator"));
+    expect(sortingIcons[0]).toHaveClass("indicator", "active", "icon-triangle-up");
+    expect(sortingIcons[0]).not.toHaveClass("hidden");
+    expect(sortingIcons[1]).toHaveClass("indicator", "hidden", "icon-triangle-down");
+    expect(sortingIcons[1]).not.toHaveClass("active");
   });
 });
 
-it('renders DESC sorting indicator (icon) when sorting is enabled and current sorting is DESC', () => {
-  const { dataGridHeaderCell } = createDataGridHeaderCell((params) => ({
+it("renders DESC sorting indicator (icon) when sorting is enabled and current sorting is DESC", () => {
+  const { dataGridHeaderCell } = createDataGridHeaderCell(params => ({
     ...params,
-    activeSortDirection: 'DESC',
+    activeSortDirection: "DESC"
   }));
 
   expect(dataGridHeaderCell).toBeDefined();
-  const sortingIcons = dataGridHeaderCell.querySelectorAll('[data-icon]');
+  const sortingIcons = dataGridHeaderCell.querySelectorAll("[data-icon]");
   expect(sortingIcons).toHaveLength(2);
-  sortingIcons.forEach((icon) => expect(icon).toHaveClass('indicator'));
-  expect(sortingIcons[0]).toHaveClass('indicator', 'hidden', 'icon-triangle-up');
-  expect(sortingIcons[0]).not.toHaveClass('active');
-  expect(sortingIcons[1]).toHaveClass('indicator', 'active', 'icon-triangle-down');
-  expect(sortingIcons[1]).not.toHaveClass('hidden');
+  sortingIcons.forEach(icon => expect(icon).toHaveClass("indicator"));
+  expect(sortingIcons[0]).toHaveClass("indicator", "hidden", "icon-triangle-up");
+  expect(sortingIcons[0]).not.toHaveClass("active");
+  expect(sortingIcons[1]).toHaveClass("indicator", "active", "icon-triangle-down");
+  expect(sortingIcons[1]).not.toHaveClass("hidden");
 });
 
-describe('DataGridHeaderCell should be interactive', () => {
-  it('clicking on cell calls onSort callback', () => {
+describe("DataGridHeaderCell should be interactive", () => {
+  it("clicking on cell calls onSort callback", () => {
     const onSortHandler = jest.fn();
-    const { getByRole } = createDataGridHeaderCell((params) => ({
+    const { getByRole } = createDataGridHeaderCell(params => ({
       ...params,
       disableSorting: false,
-      onSort: onSortHandler,
+      onSort: onSortHandler
     }));
 
-    userEvent.click(getByRole('button'));
+    userEvent.click(getByRole("button"));
 
     expect(onSortHandler).toBeCalledWith(defaultParams.name);
   });
 });
 
-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;
     }) => {
@@ -119,10 +119,10 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
-    const container = document.createElement('tr');
+    const container = document.createElement("tr");
     render(<ExampleComponent propagateRef={refCheck} />, { container });
   });
 });