@onewelcome/react-lib-components 0.2.0 → 0.2.3

package/src/DataGrid/DataGrid.tsx

@@ -1,14 +1,14 @@
-import React, { ComponentPropsWithRef, ReactElement, Ref, useEffect, useState } from 'react';
-import { Props as ButtonProps } from '../Button/Button';
-import classes from './DataGrid.module.scss';
-import { DataGridHeader } from './DataGridHeader/DataGridHeader';
-import { DataGridActions } from './DataGridActions/DataGridActions';
-import { DataGridBody } from './DataGridBody/DataGridBody';
-import { ColumnName, HeaderCell, OnSortFunction, Sort } from './datagrid.interfaces';
-import { Pagination, Props as PaginationProps } from '../Pagination/Pagination';
-import { Spacing, useSpacing } from '../hooks/useSpacing';
+import React, { ComponentPropsWithRef, ReactElement, Ref, useEffect, useState } from "react";
+import { Props as ButtonProps } from "../Button/Button";
+import classes from "./DataGrid.module.scss";
+import { DataGridHeader } from "./DataGridHeader/DataGridHeader";
+import { DataGridActions } from "./DataGridActions/DataGridActions";
+import { DataGridBody } from "./DataGridBody/DataGridBody";
+import { ColumnName, HeaderCell, OnSortFunction, Sort } from "./datagrid.interfaces";
+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 ComponentPropsWithRef<"div"> {
   children: ({ item, index }: { item: T; index: number }) => ReactElement;
   data?: T[];
   initialSort?: Sort;
@@ -50,10 +50,10 @@ const DataGridInner = <T extends {}>(
   ref: Ref<HTMLDivElement>
 ) => {
   if (!headers) {
-    throw new Error('Headers definition has to be provided');
+    throw new Error("Headers definition has to be provided");
   }
   if (!children) {
-    throw new Error('DataGridBody should be provieded with a template how to render rows');
+    throw new Error("DataGridBody should be provieded with a template how to render rows");
   }
 
   const [internalHeaders, setInternalHeaders] = useState(headers);
@@ -63,14 +63,14 @@ const DataGridInner = <T extends {}>(
 
   const onColumnToggled = (colName: ColumnName) => {
     setInternalHeaders(
-      internalHeaders.map((item) =>
+      internalHeaders.map(item =>
         item.name !== colName ? item : { ...item, hidden: !item.hidden }
       )
     );
   };
 
   if (styleWithSpacing?.padding) {
-    const splitPaddings = styleWithSpacing.padding.toString().split(' ');
+    const splitPaddings = styleWithSpacing.padding.toString().split(" ");
 
     let paddingLeftIndex: number = 0;
 
@@ -83,41 +83,41 @@ const DataGridInner = <T extends {}>(
 
     Object.defineProperties(styleWithSpacing, {
       paddingTop: {
-        value: splitPaddings[0],
+        value: splitPaddings[0]
       },
       paddingRight: {
-        value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0],
+        value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0]
       },
       paddingBottom: {
-        value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0],
+        value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0]
       },
       paddingLeft: {
-        value: splitPaddings[paddingLeftIndex],
-      },
+        value: splitPaddings[paddingLeftIndex]
+      }
     });
   }
 
   return (
     <div
       {...rest}
-      className={classes['grid-wrapper']}
+      className={classes["grid-wrapper"]}
       ref={ref}
       style={{
         paddingTop: styleWithSpacing?.paddingTop,
-        paddingBottom: styleWithSpacing?.paddingBottom,
+        paddingBottom: styleWithSpacing?.paddingBottom
       }}
     >
       <DataGridActions
         {...actions}
         style={{
           paddingLeft: styleWithSpacing?.paddingLeft,
-          paddingRight: styleWithSpacing?.paddingRight,
+          paddingRight: styleWithSpacing?.paddingRight
         }}
         headers={internalHeaders}
         onColumnToggled={onColumnToggled}
       />
-      <div className={classes['table-wrapper']}>
-        <table className={classes['table']}>
+      <div className={classes["table-wrapper"]}>
+        <table className={classes["table"]}>
           <DataGridHeader
             headers={internalHeaders}
             initialSort={initialSort}
@@ -143,9 +143,9 @@ const DataGridInner = <T extends {}>(
           style={{
             ...paginationProps.style,
             paddingLeft: styleWithSpacing?.paddingLeft,
-            paddingRight: styleWithSpacing?.paddingRight,
+            paddingRight: styleWithSpacing?.paddingRight
           }}
-          className={`${classes['pagination']} ${paginationProps.className ?? ''}`}
+          className={`${classes["pagination"]} ${paginationProps.className ?? ""}`}
         />
       )}
     </div>

package/src/DataGrid/DataGridActions/DataGridActions.test.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef } from 'react';
-import { DataGridActions, Props } from './DataGridActions';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { DataGridActions, Props } from "./DataGridActions";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
   headers: [],
-  onColumnToggled: jest.fn(),
+  onColumnToggled: jest.fn()
 };
 
 const createDataGridActions = (params?: (defaultParams: Props) => Props) => {
@@ -14,115 +14,115 @@ const createDataGridActions = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<DataGridActions {...parameters} data-testid="dataGridActions" />);
-  const dataGridActions = queries.getByTestId('dataGridActions');
+  const dataGridActions = queries.getByTestId("dataGridActions");
 
   return {
     ...queries,
-    dataGridActions,
+    dataGridActions
   };
 };
 
-describe('DataGridActions should render', () => {
-  it('renders without crashing', () => {
+describe("DataGridActions should render", () => {
+  it("renders without crashing", () => {
     const { container } = render(<DataGridActions {...defaultParams} />);
 
     expect(container).toBeEmptyDOMElement();
   });
 
-  it('renders all buttons', () => {
-    const { dataGridActions, getAllByRole } = createDataGridActions((params) => ({
+  it("renders all buttons", () => {
+    const { dataGridActions, getAllByRole } = createDataGridActions(params => ({
       ...params,
       enableAddBtn: true,
       enableColumnsBtn: true,
-      enableSearchBtn: true,
+      enableSearchBtn: true
     }));
 
     expect(dataGridActions).toBeDefined();
-    const buttons = getAllByRole('button');
+    const buttons = getAllByRole("button");
     expect(buttons).toHaveLength(5);
-    expect(buttons[0]).toHaveTextContent('Add item');
-    expect(buttons[1]).toHaveTextContent('Columns');
-    expect(buttons[2]).toHaveTextContent('Show/hide columns');
-    expect(buttons[3]).toHaveTextContent('Search');
-    expect(buttons[4]).toHaveTextContent('Search');
+    expect(buttons[0]).toHaveTextContent("Add item");
+    expect(buttons[1]).toHaveTextContent("Columns");
+    expect(buttons[2]).toHaveTextContent("Show/hide columns");
+    expect(buttons[3]).toHaveTextContent("Search");
+    expect(buttons[4]).toHaveTextContent("Search");
   });
 
-  it('renders only add button', () => {
-    const { dataGridActions, getAllByRole } = createDataGridActions((params) => ({
+  it("renders only add button", () => {
+    const { dataGridActions, getAllByRole } = createDataGridActions(params => ({
       ...params,
-      enableAddBtn: true,
+      enableAddBtn: true
     }));
 
     expect(dataGridActions).toBeDefined();
-    const buttons = getAllByRole('button');
+    const buttons = getAllByRole("button");
     expect(buttons).toHaveLength(1);
-    expect(buttons[0]).toHaveTextContent('Add item');
+    expect(buttons[0]).toHaveTextContent("Add item");
   });
 
-  it('renders only columns button', () => {
-    const { dataGridActions, getAllByRole } = createDataGridActions((params) => ({
+  it("renders only columns button", () => {
+    const { dataGridActions, getAllByRole } = createDataGridActions(params => ({
       ...params,
-      enableColumnsBtn: true,
+      enableColumnsBtn: true
     }));
 
     expect(dataGridActions).toBeDefined();
-    const buttons = getAllByRole('button');
+    const buttons = getAllByRole("button");
     expect(buttons).toHaveLength(2);
-    expect(buttons[0]).toHaveTextContent('Columns');
-    expect(buttons[1]).toHaveTextContent('Show/hide columns');
+    expect(buttons[0]).toHaveTextContent("Columns");
+    expect(buttons[1]).toHaveTextContent("Show/hide columns");
   });
 
-  it('renders only search button', () => {
-    const { dataGridActions, getAllByRole } = createDataGridActions((params) => ({
+  it("renders only search button", () => {
+    const { dataGridActions, getAllByRole } = createDataGridActions(params => ({
       ...params,
-      enableSearchBtn: true,
+      enableSearchBtn: true
     }));
 
     expect(dataGridActions).toBeDefined();
-    const buttons = getAllByRole('button');
+    const buttons = getAllByRole("button");
     expect(buttons).toHaveLength(2);
-    expect(buttons[0]).toHaveTextContent('Search');
-    expect(buttons[1]).toHaveTextContent('Search');
+    expect(buttons[0]).toHaveTextContent("Search");
+    expect(buttons[1]).toHaveTextContent("Search");
   });
 
-  it('renders buttons with overwritten props', () => {
-    const addBtnProps = { children: 'button1', title: 'title1' };
-    const columnsBtnProps = { children: 'button2', title: 'title2' };
-    const searchBtnProps = { children: 'button3', title: 'title3' };
-    const { dataGridActions, getAllByRole } = createDataGridActions((params) => ({
+  it("renders buttons with overwritten props", () => {
+    const addBtnProps = { children: "button1", title: "title1" };
+    const columnsBtnProps = { children: "button2", title: "title2" };
+    const searchBtnProps = { children: "button3", title: "title3" };
+    const { dataGridActions, getAllByRole } = createDataGridActions(params => ({
       ...params,
       enableAddBtn: true,
       enableColumnsBtn: true,
       enableSearchBtn: true,
       addBtnProps,
       columnsBtnProps,
-      searchBtnProps,
+      searchBtnProps
     }));
 
     expect(dataGridActions).toBeDefined();
     const [addBtn, desktopColumnsBtn, mobileColumnsBtn, desktopSearchBtn, mobileSearchBtn] =
-      getAllByRole('button');
+      getAllByRole("button");
     expect(addBtn).toHaveTextContent(addBtnProps.children);
-    expect(addBtn).toHaveAttribute('title', addBtnProps.title);
+    expect(addBtn).toHaveAttribute("title", addBtnProps.title);
     expect(desktopColumnsBtn).toHaveTextContent(columnsBtnProps.children);
-    expect(desktopColumnsBtn).toHaveAttribute('title', columnsBtnProps.title);
+    expect(desktopColumnsBtn).toHaveAttribute("title", columnsBtnProps.title);
     expect(mobileColumnsBtn).toHaveTextContent(columnsBtnProps.title);
     expect(desktopSearchBtn).toHaveTextContent(searchBtnProps.children);
-    expect(desktopSearchBtn).toHaveAttribute('title', searchBtnProps.title);
+    expect(desktopSearchBtn).toHaveAttribute("title", searchBtnProps.title);
     expect(mobileSearchBtn).toHaveTextContent(searchBtnProps.title);
   });
 });
 
-describe('DataGridActions should be interactive', () => {
-  it('clicking on columns button opens show/hide columns popover', async () => {
-    const toggleHeader = { name: 'test', headline: 'Label' };
-    const { getAllByRole, findByLabelText } = createDataGridActions((params) => ({
+describe("DataGridActions should be interactive", () => {
+  it("clicking on columns button opens show/hide columns popover", async () => {
+    const toggleHeader = { name: "test", headline: "Label" };
+    const { getAllByRole, findByLabelText } = createDataGridActions(params => ({
       ...params,
       enableColumnsBtn: true,
-      headers: [toggleHeader],
+      headers: [toggleHeader]
     }));
 
-    userEvent.click(getAllByRole('button')[0]);
+    userEvent.click(getAllByRole("button")[0]);
 
     const toggle = await findByLabelText(toggleHeader.headline);
     expect(toggle).toBeDefined();
@@ -132,37 +132,37 @@ describe('DataGridActions should be interactive', () => {
     expect(defaultParams.onColumnToggled).toBeCalledWith(toggleHeader.name);
   });
 
-  it('clicking on add button runs callback', () => {
+  it("clicking on add button runs callback", () => {
     const onClick = jest.fn();
-    const { getAllByRole } = createDataGridActions((params) => ({
+    const { getAllByRole } = createDataGridActions(params => ({
       ...params,
       enableAddBtn: true,
-      addBtnProps: { onClick },
+      addBtnProps: { onClick }
     }));
 
-    userEvent.click(getAllByRole('button')[0]);
+    userEvent.click(getAllByRole("button")[0]);
 
     expect(onClick).toBeCalledTimes(1);
   });
 
-  it('clicking on search button runs callback', () => {
+  it("clicking on search button runs callback", () => {
     const onClick = jest.fn();
-    const { getAllByRole } = createDataGridActions((params) => ({
+    const { getAllByRole } = createDataGridActions(params => ({
       ...params,
       enableSearchBtn: true,
-      searchBtnProps: { onClick },
+      searchBtnProps: { onClick }
     }));
 
-    userEvent.click(getAllByRole('button')[0]);
+    userEvent.click(getAllByRole("button")[0]);
 
     expect(onClick).toBeCalledTimes(1);
   });
 });
 
-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;
     }) => {
@@ -176,7 +176,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/DataGrid/DataGridActions/DataGridActions.tsx

@@ -1,12 +1,12 @@
-import React, { ComponentPropsWithRef, Fragment, useRef, useState } from 'react';
-import { Button, Props as ButtonProps } from '../../Button/Button';
-import { IconButton } from '../../Button/IconButton';
-import { Icon, Icons } from '../../Icon/Icon';
-import { HeaderCell, ColumnName } from '../datagrid.interfaces';
-import classes from './DataGridActions.module.scss';
-import { DataGridColumnsToggle } from './DataGridColumnsToggle';
+import React, { ComponentPropsWithRef, Fragment, useRef, useState } from "react";
+import { Button, Props as ButtonProps } from "../../Button/Button";
+import { IconButton } from "../../Button/IconButton";
+import { Icon, Icons } from "../../Icon/Icon";
+import { HeaderCell, ColumnName } from "../datagrid.interfaces";
+import classes from "./DataGridActions.module.scss";
+import { DataGridColumnsToggle } from "./DataGridColumnsToggle";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   enableAddBtn?: boolean;
   enableColumnsBtn?: boolean;
   enableSearchBtn?: boolean;
@@ -38,8 +38,8 @@ export const DataGridActions = React.forwardRef<HTMLDivElement, Props>(
     const showColumnBtn = useRef<HTMLButtonElement>(null);
 
     return isHidden ? null : (
-      <div {...rest} ref={ref} className={`${classes['actions']} ${className ?? ''}`}>
-        <div className={classes['left-actions']}>
+      <div {...rest} ref={ref} className={`${classes["actions"]} ${className ?? ""}`}>
+        <div className={classes["left-actions"]}>
           {enableAddBtn && (
             <Button
               color="primary"
@@ -52,7 +52,7 @@ export const DataGridActions = React.forwardRef<HTMLDivElement, Props>(
             />
           )}
         </div>
-        <div className={classes['right-actions']}>
+        <div className={classes["right-actions"]}>
           {enableColumnsBtn && (
             <Fragment>
               <Button
@@ -61,7 +61,7 @@ export const DataGridActions = React.forwardRef<HTMLDivElement, Props>(
                 variant="text"
                 children="Columns"
                 {...columnsBtnProps}
-                className={`${classes['desktop']} ${columnsBtnProps?.className ?? ''}`}
+                className={`${classes["desktop"]} ${columnsBtnProps?.className ?? ""}`}
                 ref={showColumnBtn}
                 onClick={() => setShowColsPopover(true)}
               />
@@ -69,7 +69,7 @@ export const DataGridActions = React.forwardRef<HTMLDivElement, Props>(
                 title="Show/hide columns"
                 {...columnsBtnProps}
                 onClick={() => setShowColsPopover(true)}
-                className={`${classes['mobile']} ${columnsBtnProps?.className ?? ''}`}
+                className={`${classes["mobile"]} ${columnsBtnProps?.className ?? ""}`}
               >
                 <Icon icon={Icons.Change} />
               </IconButton>
@@ -91,12 +91,12 @@ export const DataGridActions = React.forwardRef<HTMLDivElement, Props>(
                 variant="text"
                 children="Search"
                 {...searchBtnProps}
-                className={`${classes['desktop']} ${searchBtnProps?.className ?? ''}`}
+                className={`${classes["desktop"]} ${searchBtnProps?.className ?? ""}`}
               />
               <IconButton
                 title="Search"
                 {...searchBtnProps}
-                className={`${classes['mobile']} ${columnsBtnProps?.className ?? ''}`}
+                className={`${classes["mobile"]} ${columnsBtnProps?.className ?? ""}`}
               >
                 <Icon icon={Icons.TableSearch} />
               </IconButton>

package/src/DataGrid/DataGridActions/DataGridColumnsToggle.module.scss

@@ -6,7 +6,7 @@
 }
 
 .backdrop {
-  content: '';
+  content: "";
   position: absolute;
   width: 100%;
   height: 100%;

package/src/DataGrid/DataGridActions/DataGridColumnsToggle.test.tsx

@@ -1,16 +1,16 @@
-import React, { useEffect, useRef } from 'react';
-import { DataGridColumnsToggle, Props } from './DataGridColumnsToggle';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { DataGridColumnsToggle, Props } from "./DataGridColumnsToggle";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
   open: true,
   headers: [
-    { headline: 'Name', name: 'name' },
-    { headline: 'Date', name: 'date', hidden: true },
+    { headline: "Name", name: "name" },
+    { headline: "Date", name: "date", hidden: true }
   ],
   onClose: jest.fn(),
-  onToggleClicked: jest.fn(),
+  onToggleClicked: jest.fn()
 };
 
 const createDataGridColumnsToggle = (params?: (defaultParams: Props) => Props) => {
@@ -21,47 +21,47 @@ const createDataGridColumnsToggle = (params?: (defaultParams: Props) => Props) =
   const queries = render(
     <DataGridColumnsToggle {...parameters} data-testid="dataGridColumnsToggle" />
   );
-  const dataGridColumnsToggle = queries.getByTestId('dataGridColumnsToggle');
+  const dataGridColumnsToggle = queries.getByTestId("dataGridColumnsToggle");
 
   return {
     ...queries,
-    dataGridColumnsToggle,
+    dataGridColumnsToggle
   };
 };
 
-describe('DataGridColumnsToggle should render', () => {
-  it('renders without crashing', () => {
+describe("DataGridColumnsToggle should render", () => {
+  it("renders without crashing", () => {
     const { dataGridColumnsToggle, getByLabelText, getByText } = createDataGridColumnsToggle();
 
     expect(dataGridColumnsToggle).toBeDefined();
-    expect(getByText('Show columns')).toBeDefined();
+    expect(getByText("Show columns")).toBeDefined();
     expect(getByLabelText(defaultParams.headers[0].headline)).toBeChecked();
     expect(getByLabelText(defaultParams.headers[1].headline)).not.toBeChecked();
   });
 });
 
-describe('DataGridColumnsToggle should be interactive', () => {
-  it('clicking on close calls onClose callback', () => {
+describe("DataGridColumnsToggle should be interactive", () => {
+  it("clicking on close calls onClose callback", () => {
     const { getByRole } = createDataGridColumnsToggle();
 
-    userEvent.click(getByRole('button'));
+    userEvent.click(getByRole("button"));
 
     expect(defaultParams.onClose).toBeCalledTimes(1);
   });
 
-  it('clicking outside of container (on backdrop layer) calls onClose callback', () => {
+  it("clicking outside of container (on backdrop layer) calls onClose callback", () => {
     createDataGridColumnsToggle();
 
-    userEvent.click(document.querySelector('.backdrop')!);
+    userEvent.click(document.querySelector(".backdrop")!);
 
     expect(defaultParams.onClose).toBeCalledTimes(1);
   });
 });
 
-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;
     }) => {
@@ -75,7 +75,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/DataGrid/DataGridActions/DataGridColumnsToggle.tsx

@@ -1,13 +1,13 @@
-import React, { Fragment, useState } from 'react';
-import { IconButton } from '../../Button/IconButton';
-import { Toggle } from '../../Form/Toggle/Toggle';
-import { Icon, Icons } from '../../Icon/Icon';
-import { Popover, Props as PopoverProps } from '../../Popover/Popover';
-import { Typography } from '../../Typography/Typography';
-import { generateID } from '../../util/helper';
-import { ColumnName, HeaderCell } from '../datagrid.interfaces';
-import classes from './DataGridColumnsToggle.module.scss';
-import { createPortal } from 'react-dom';
+import React, { Fragment, useState } from "react";
+import { IconButton } from "../../Button/IconButton";
+import { Toggle } from "../../Form/Toggle/Toggle";
+import { Icon, Icons } from "../../Icon/Icon";
+import { Popover, Props as PopoverProps } from "../../Popover/Popover";
+import { Typography } from "../../Typography/Typography";
+import { generateID } from "../../util/helper";
+import { ColumnName, HeaderCell } from "../datagrid.interfaces";
+import classes from "./DataGridColumnsToggle.module.scss";
+import { createPortal } from "react-dom";
 
 export interface Props extends PopoverProps {
   open: boolean;
@@ -24,8 +24,8 @@ export const DataGridColumnsToggle = React.forwardRef<HTMLDivElement, Props>(
     {
       open,
       headers,
-      titleLabel = 'Show columns',
-      closeButtonTitle = 'Close show columns dialog',
+      titleLabel = "Show columns",
+      closeButtonTitle = "Close show columns dialog",
       onClose,
       onToggleClicked,
       className,
@@ -35,9 +35,9 @@ export const DataGridColumnsToggle = React.forwardRef<HTMLDivElement, Props>(
     ref
   ) => {
     const [id] = useState(generateID());
-    const labelledId = id + '_header';
+    const labelledId = id + "_header";
 
-    const toggles = headers.map((item) => (
+    const toggles = headers.map(item => (
       <Toggle
         key={item.name}
         name={item.name}
@@ -54,7 +54,7 @@ export const DataGridColumnsToggle = React.forwardRef<HTMLDivElement, Props>(
       <Popover
         {...rest}
         ref={ref}
-        className={`${classes['popover']} ${className}`}
+        className={`${classes["popover"]} ${className}`}
         show={open}
         role="dialog"
         aria-modal="true"
@@ -62,24 +62,24 @@ export const DataGridColumnsToggle = React.forwardRef<HTMLDivElement, Props>(
       >
         {open &&
           createPortal(
-            <div className={classes['backdrop']} onClick={handleBackdropClick}></div>,
+            <div className={classes["backdrop"]} onClick={handleBackdropClick}></div>,
             domRoot
           )}
         {open && (
           <Fragment>
-            <div className={classes['header']}>
-              <Typography id={labelledId} className={classes['title']} tag="span" variant="h4">
+            <div className={classes["header"]}>
+              <Typography id={labelledId} className={classes["title"]} tag="span" variant="h4">
                 {titleLabel}
               </Typography>
               <IconButton
                 onClick={onClose}
-                className={`${classes['close-btn']}`}
+                className={`${classes["close-btn"]}`}
                 title={closeButtonTitle}
               >
                 <Icon icon={Icons.Times} />
               </IconButton>
             </div>
-            <div className={classes['content']}>{toggles}</div>
+            <div className={classes["content"]}>{toggles}</div>
           </Fragment>
         )}
       </Popover>