@onewelcome/react-lib-components 0.1.7-alpha → 0.1.8-alpha

package/dist/util/helper.d.ts

@@ -1,6 +1,6 @@
 declare type KeyValuePair = {
     [key: string]: unknown;
 };
-export declare const generateID: (length?: number, stringToWeaveIn?: string) => string;
+export declare const generateID: (length?: number, stringToWeaveIn?: string | undefined) => string;
 export declare const filterProps: (props: any, regexPattern: RegExp, returnFiltered?: boolean) => KeyValuePair;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "0.1.7-alpha",
+  "version": "0.1.8-alpha",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",
@@ -34,7 +34,7 @@
     "react": ">=16"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=16"
   },
   "size-limit": [
     {
@@ -49,16 +49,16 @@
   "devDependencies": {
     "@babel/core": "^7.18.0",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.5.3",
-    "@storybook/addon-docs": "^6.5.3",
-    "@storybook/addon-essentials": "^6.5.3",
-    "@storybook/addon-links": "^6.5.3",
-    "@storybook/addons": "^6.5.3",
-    "@storybook/builder-webpack5": "^6.5.3",
-    "@storybook/manager-webpack5": "^6.5.3",
+    "@storybook/addon-a11y": "^6.5.8",
+    "@storybook/addon-docs": "^6.5.8",
+    "@storybook/addon-essentials": "^6.5.8",
+    "@storybook/addon-links": "^6.5.8",
+    "@storybook/addons": "^6.5.8",
+    "@storybook/builder-webpack5": "^6.5.8",
+    "@storybook/manager-webpack5": "^6.5.8",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.3",
-    "@storybook/theming": "^6.5.6",
+    "@storybook/react": "^6.5.8",
+    "@storybook/theming": "^6.5.8",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",

package/src/ContextMenu/ContextMenu.tsx

@@ -63,7 +63,22 @@ export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
         setFocusedContextMenuItem(selectedContextMenuItem);
       }
 
-      event.preventDefault();
+      const codesToPrevenDefault = [
+        'ArrowDown',
+        'ArrowUp',
+        'ArrowLeft',
+        'ArrowRight',
+        'Enter',
+        'Space',
+        'Escape',
+        'End',
+        'Home',
+      ];
+
+      if (codesToPrevenDefault.includes(event.code)) {
+        event.preventDefault();
+      }
+
       switch (event.code) {
         case 'ArrowDown':
           if (!showContextMenu) {

package/src/DataGrid/DataGrid.module.scss

@@ -0,0 +1,21 @@
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.table {
+  border-collapse: collapse;
+  padding-top: 0.5rem;
+  width: 100%;
+  position: relative;
+}
+
+.pagination {
+  margin-top: 1rem;
+  padding: 0 1rem;
+}
+
+@media only screen and (min-width: 50em) {
+  .pagination {
+    padding: 0 1.25rem;
+  }
+}

package/src/DataGrid/DataGrid.test.tsx

@@ -0,0 +1,276 @@
+import React, { useEffect, useRef } from 'react';
+import { DataGrid, Props } from './DataGrid';
+import { getAllByRole, render, queryAllByRole, getByRole } from '@testing-library/react';
+import { DataGridRow } from './DataGridBody/DataGridRow';
+import { DataGridCell } from './DataGridBody/DataGridCell';
+import { ContextMenu } from '../ContextMenu/ContextMenu';
+import { IconButton } from '../Button/IconButton';
+import { Icon, Icons } from '../Icon/Icon';
+import { ContextMenuItem } from '../ContextMenu/ContextMenuItem';
+import userEvent from '@testing-library/user-event';
+
+type DataType = { firstName: string; lastName: string; date: string };
+
+const defaultParams: Props<DataType> = {
+  children: ({ item }) => (
+    <DataGridRow key={item.firstName}>
+      <DataGridCell>{item.firstName}</DataGridCell>
+      <DataGridCell>{item.lastName}</DataGridCell>
+      <DataGridCell>{item.date}</DataGridCell>
+      <DataGridCell>
+        <ContextMenu
+          id={`consent_menu_${item.firstName}`}
+          trigger={
+            <IconButton title={`Actions for ${item.firstName}`} color="default">
+              <Icon icon={Icons.EllipsisAlt} />
+            </IconButton>
+          }
+        >
+          <ContextMenuItem>Item 1</ContextMenuItem>
+        </ContextMenu>
+      </DataGridCell>
+    </DataGridRow>
+  ),
+  headers: [
+    { name: 'firstName', headline: 'First name' },
+    { name: 'lastName', headline: 'Last name' },
+    { name: 'date', headline: 'Date' },
+  ],
+  enableMultiSorting: true,
+  data: [
+    { firstName: 'Paweł', lastName: 'Napieracz', date: '12.12.1990' },
+    { firstName: 'Michał', lastName: 'Górski', date: '12.12.1994' },
+    { firstName: 'Daniel', lastName: 'Velden', date: '12.12.199x' },
+    { firstName: 'Jasha', lastName: 'Joachimsthal', date: '12.12.198x' },
+  ],
+};
+
+const createDataGrid = (params?: (defaultParams: Props<DataType>) => Props<DataType>) => {
+  let parameters = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<DataGrid {...parameters} data-testid="dataGrid" />);
+  const dataGrid = queries.getByTestId('dataGrid');
+
+  return {
+    ...queries,
+    dataGrid,
+  };
+};
+
+describe('DataGrid should render', () => {
+  it('renders without crashing', () => {
+    const rowsCount = defaultParams.data?.length!;
+    const colsCount = defaultParams.headers?.length!;
+    const contextMenuCellCount = 1;
+    const { dataGrid, ...queries } = createDataGrid();
+
+    expect(dataGrid).toBeDefined();
+
+    expect(dataGrid.querySelector('.actions')).toBeNull();
+
+    const [thead, tbody] = queries.getAllByRole('rowgroup');
+
+    expect(queryAllByRole(thead, 'columnheader')).toHaveLength(3);
+    expect(queryAllByRole(thead, 'cell')).toHaveLength(contextMenuCellCount);
+    expect(queryAllByRole(thead, 'button')).toHaveLength(0); //sorting should be disabled by default
+
+    expect(queryAllByRole(tbody, 'cell')).toHaveLength(
+      rowsCount * (colsCount + contextMenuCellCount)
+    );
+  });
+
+  it('renders actions buttons', () => {
+    const { dataGrid } = createDataGrid((params) => ({
+      ...params,
+      actions: {
+        enableAddBtn: true,
+        enableColumnsBtn: true,
+        enableSearchBtn: true,
+      },
+    }));
+    const [addBtn, desktopColumnsBtn, mobileColumnsBtn, desktopSearchBtn, mobileSearchBtn] =
+      getAllByRole(dataGrid.querySelector('.actions')!, 'button');
+    expect(addBtn).toHaveTextContent('Add item');
+    expect(desktopColumnsBtn).toHaveTextContent('Columns');
+    expect(mobileColumnsBtn).toHaveTextContent('Show/hide columns');
+    expect(desktopSearchBtn).toHaveTextContent('Search');
+    expect(mobileSearchBtn).toHaveTextContent('Search');
+  });
+
+  it('renders table with initialized sorting indicators', () => {
+    const { getAllByRole } = createDataGrid((params) => ({
+      ...params,
+      onSort: jest.fn(),
+      initialSort: [
+        { name: defaultParams.headers[0].name, direction: 'DESC' },
+        { name: defaultParams.headers[2].name, direction: 'ASC' },
+      ],
+    }));
+
+    const [firstNameHeader, lastNameHeader, dateHeader] = getAllByRole('columnheader');
+    expect(firstNameHeader).toHaveAttribute('aria-sort', 'descending');
+    expect(lastNameHeader).not.toHaveAttribute('aria-sort');
+    expect(dateHeader).toHaveAttribute('aria-sort', 'ascending');
+  });
+
+  it('renders table without context menu', () => {
+    const rowsCount = defaultParams.data?.length!;
+    const colsCount = defaultParams.headers?.length!;
+    const { getAllByRole } = createDataGrid((params) => ({
+      ...params,
+      disableContextMenuColumn: true,
+      children: ({ item }) => (
+        <DataGridRow key={item.firstName}>
+          <DataGridCell>{item.firstName}</DataGridCell>
+          <DataGridCell>{item.lastName}</DataGridCell>
+          <DataGridCell>{item.date}</DataGridCell>
+        </DataGridRow>
+      ),
+    }));
+
+    expect(getAllByRole('columnheader')).toHaveLength(3);
+    expect(getAllByRole('cell')).toHaveLength(rowsCount * colsCount);
+  });
+
+  it('renders loading state with skeleton loading animation on data cells and empty row on content menu cells', () => {
+    const { ...queries } = createDataGrid((params) => ({ ...params, isLoading: true }));
+
+    const [_thead, tbody] = queries.getAllByRole('rowgroup');
+    expect(
+      getAllByRole(tbody, 'cell').find((cell, index) => {
+        const contextMenuCell = index % 4 === 3;
+        return (
+          !contextMenuCell && (cell.firstChild as HTMLElement).getAttribute('class') !== 'loading'
+        );
+      })
+    ).toBeUndefined();
+  });
+
+  it('renders empty state', () => {
+    const emptyLabel = 'emptyLabel';
+    const { ...queries } = createDataGrid((params) => ({ ...params, emptyLabel, data: [] }));
+
+    const [_thead, tbody] = queries.getAllByRole('rowgroup');
+    const rows = getAllByRole(tbody, 'row');
+    const firstRowCells = getAllByRole(rows[0], 'cell');
+    expect(firstRowCells).toHaveLength(1);
+    expect(firstRowCells[0]).toHaveAttribute('colspan', `${defaultParams.headers.length + 1}`);
+    expect(firstRowCells[0]).toHaveTextContent(emptyLabel);
+  });
+
+  it('renders pagination', () => {
+    const { getByRole } = createDataGrid((params) => ({
+      ...params,
+      paginationProps: {
+        totalElements: 105,
+        pageSize: 10,
+        currentPage: 2,
+        onPageChange: jest.fn(),
+        onPageSizeChange: jest.fn(),
+      },
+    }));
+
+    expect(getByRole('button', { name: 'previous' })).toBeDefined();
+    expect(getByRole('button', { name: 'next' })).toBeDefined();
+    expect(getByRole('button', { name: 'last' })).toBeDefined();
+  });
+});
+
+describe('DataGrid should have interactive table header', () => {
+  it('clicking table headers should call sort callback', () => {
+    const onSort = jest.fn();
+    const { getAllByRole } = createDataGrid((params) => ({
+      ...params,
+      onSort,
+    }));
+
+    const [firstNameHeader, lastNameHeader, dateHeader] = getAllByRole('columnheader');
+
+    userEvent.click(getByRole(firstNameHeader, 'button'));
+    expect(onSort).toBeCalledWith([{ name: defaultParams.headers[0].name, direction: 'ASC' }]);
+
+    userEvent.click(getByRole(lastNameHeader, 'button'));
+    userEvent.click(getByRole(dateHeader, 'button'));
+    expect(onSort).toBeCalledWith([
+      { name: defaultParams.headers[2].name, direction: 'ASC' },
+      { name: defaultParams.headers[1].name, direction: 'ASC' },
+      { name: defaultParams.headers[0].name, direction: 'ASC' },
+    ]);
+
+    userEvent.click(getByRole(firstNameHeader, 'button'));
+    expect(onSort).toBeCalledWith([
+      { name: defaultParams.headers[0].name, direction: 'DESC' },
+      { name: defaultParams.headers[2].name, direction: 'ASC' },
+      { name: defaultParams.headers[1].name, direction: 'ASC' },
+    ]);
+
+    userEvent.click(getByRole(dateHeader, 'button'));
+    expect(onSort).toBeCalledWith([
+      { name: defaultParams.headers[2].name, direction: 'DESC' },
+      { name: defaultParams.headers[0].name, direction: 'DESC' },
+      { name: defaultParams.headers[1].name, direction: 'ASC' },
+    ]);
+
+    userEvent.click(getByRole(dateHeader, 'button'));
+    userEvent.click(getByRole(firstNameHeader, 'button'));
+    userEvent.click(getByRole(lastNameHeader, 'button'));
+    expect(onSort).toBeCalledWith([{ name: defaultParams.headers[1].name, direction: 'DESC' }]);
+    expect(onSort).toBeCalledTimes(8);
+  });
+
+  it('clicking on show/hide columns popover should show/hide columns', async () => {
+    const { getByRole, findByLabelText, ...queries } = createDataGrid((params) => ({
+      ...params,
+      actions: { enableColumnsBtn: true },
+    }));
+    expect(queries.getAllByRole('columnheader')).toHaveLength(3);
+
+    userEvent.click(getByRole('button', { name: 'Columns' }));
+
+    const nameToggle = await findByLabelText(defaultParams.headers[1].headline);
+    expect(nameToggle).toBeChecked();
+    userEvent.click(nameToggle);
+    expect(nameToggle).not.toBeChecked();
+    expect(getByRole('button', { name: 'Close show columns dialog' })).toBeDefined();
+
+    const columns = queries.getAllByRole('columnheader');
+    expect(columns).toHaveLength(2);
+    expect(columns[0]).toHaveTextContent(defaultParams.headers[0].headline);
+    expect(columns[1]).toHaveTextContent(defaultParams.headers[2].headline);
+
+    const rowsCount = defaultParams.data?.length!;
+    const colsCount = defaultParams.headers.length;
+    const hiddenColsCount = defaultParams.headers.length;
+    const contextMenuColsCount = defaultParams.headers.length;
+    const [_thead, tbody] = queries.getAllByRole('rowgroup');
+    expect(getAllByRole(tbody, 'cell')).toHaveLength(
+      rowsCount * (colsCount - hiddenColsCount + contextMenuColsCount)
+    );
+  });
+});
+
+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: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        propagateRef(ref);
+      }, [ref]);
+
+      return <DataGrid {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/DataGrid/DataGrid.tsx

@@ -0,0 +1,101 @@
+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';
+
+export interface Props<T> extends ComponentPropsWithRef<'div'> {
+  children: ({ item, index }: { item: T; index: number }) => ReactElement;
+  data?: T[];
+  initialSort?: Sort;
+  onSort?: OnSortFunction;
+  headers: HeaderCell[];
+  actions?: {
+    enableAddBtn?: boolean;
+    enableColumnsBtn?: boolean;
+    enableSearchBtn?: boolean;
+    addBtnProps?: ButtonProps;
+    columnsBtnProps?: ButtonProps;
+    searchBtnProps?: ButtonProps;
+  };
+  emptyLabel?: string;
+  paginationProps?: PaginationProps;
+  disableContextMenuColumn?: boolean;
+  isLoading?: boolean;
+  enableMultiSorting?: boolean;
+}
+
+const DataGridInner = <T extends {}>(
+  {
+    children,
+    data,
+    initialSort,
+    onSort,
+    headers,
+    actions = {},
+    paginationProps,
+    disableContextMenuColumn,
+    isLoading,
+    enableMultiSorting,
+    emptyLabel,
+    ...rest
+  }: Props<T>,
+  ref: Ref<HTMLDivElement>
+) => {
+  if (!headers) {
+    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');
+  }
+
+  const [internalHeaders, setInternalHeaders] = useState(headers);
+
+  useEffect(() => setInternalHeaders(headers), [headers]);
+
+  const onColumnToggled = (colName: ColumnName) => {
+    setInternalHeaders(
+      internalHeaders.map((item) =>
+        item.name !== colName ? item : { ...item, hidden: !item.hidden }
+      )
+    );
+  };
+
+  return (
+    <div {...rest} ref={ref}>
+      <DataGridActions {...actions} headers={internalHeaders} onColumnToggled={onColumnToggled} />
+      <div className={classes['table-wrapper']}>
+        <table className={classes['table']}>
+          <DataGridHeader
+            headers={internalHeaders}
+            initialSort={initialSort}
+            onSort={onSort}
+            disableContextMenuColumn={disableContextMenuColumn}
+            enableMultiSorting={enableMultiSorting}
+          />
+          <DataGridBody
+            children={children}
+            data={data}
+            headers={internalHeaders}
+            isLoading={isLoading}
+            disableContextMenuColumn={disableContextMenuColumn}
+            emptyLabel={emptyLabel}
+          />
+        </table>
+      </div>
+      {paginationProps && !isLoading && (
+        <Pagination
+          {...paginationProps}
+          className={`${classes['pagination']} ${paginationProps.className ?? ''}`}
+        />
+      )}
+    </div>
+  );
+};
+
+export const DataGrid = React.forwardRef(DataGridInner) as <T extends {}>(
+  p: Props<T> & { ref?: Ref<HTMLDivElement> }
+) => ReactElement;

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

@@ -0,0 +1,35 @@
+.actions {
+  margin-bottom: 1rem;
+  padding: 0 1rem;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.left-actions {
+  flex: 1;
+}
+
+.right-actions {
+  display: flex;
+  gap: 1rem;
+}
+
+.desktop {
+  display: none;
+}
+
+@media only screen and (min-width: 50em) {
+  .actions {
+    padding: 0 1.25rem;
+  }
+}
+
+@media only screen and (min-width: 30em) {
+  .desktop {
+    display: block;
+  }
+
+  .mobile {
+    display: none;
+  }
+}

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

@@ -0,0 +1,184 @@
+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(),
+};
+
+const createDataGridActions = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<DataGridActions {...parameters} data-testid="dataGridActions" />);
+  const dataGridActions = queries.getByTestId('dataGridActions');
+
+  return {
+    ...queries,
+    dataGridActions,
+  };
+};
+
+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) => ({
+      ...params,
+      enableAddBtn: true,
+      enableColumnsBtn: true,
+      enableSearchBtn: true,
+    }));
+
+    expect(dataGridActions).toBeDefined();
+    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');
+  });
+
+  it('renders only add button', () => {
+    const { dataGridActions, getAllByRole } = createDataGridActions((params) => ({
+      ...params,
+      enableAddBtn: true,
+    }));
+
+    expect(dataGridActions).toBeDefined();
+    const buttons = getAllByRole('button');
+    expect(buttons).toHaveLength(1);
+    expect(buttons[0]).toHaveTextContent('Add item');
+  });
+
+  it('renders only columns button', () => {
+    const { dataGridActions, getAllByRole } = createDataGridActions((params) => ({
+      ...params,
+      enableColumnsBtn: true,
+    }));
+
+    expect(dataGridActions).toBeDefined();
+    const buttons = getAllByRole('button');
+    expect(buttons).toHaveLength(2);
+    expect(buttons[0]).toHaveTextContent('Columns');
+    expect(buttons[1]).toHaveTextContent('Show/hide columns');
+  });
+
+  it('renders only search button', () => {
+    const { dataGridActions, getAllByRole } = createDataGridActions((params) => ({
+      ...params,
+      enableSearchBtn: true,
+    }));
+
+    expect(dataGridActions).toBeDefined();
+    const buttons = getAllByRole('button');
+    expect(buttons).toHaveLength(2);
+    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) => ({
+      ...params,
+      enableAddBtn: true,
+      enableColumnsBtn: true,
+      enableSearchBtn: true,
+      addBtnProps,
+      columnsBtnProps,
+      searchBtnProps,
+    }));
+
+    expect(dataGridActions).toBeDefined();
+    const [addBtn, desktopColumnsBtn, mobileColumnsBtn, desktopSearchBtn, mobileSearchBtn] =
+      getAllByRole('button');
+    expect(addBtn).toHaveTextContent(addBtnProps.children);
+    expect(addBtn).toHaveAttribute('title', addBtnProps.title);
+    expect(desktopColumnsBtn).toHaveTextContent(columnsBtnProps.children);
+    expect(desktopColumnsBtn).toHaveAttribute('title', columnsBtnProps.title);
+    expect(mobileColumnsBtn).toHaveTextContent(columnsBtnProps.title);
+    expect(desktopSearchBtn).toHaveTextContent(searchBtnProps.children);
+    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) => ({
+      ...params,
+      enableColumnsBtn: true,
+      headers: [toggleHeader],
+    }));
+
+    userEvent.click(getAllByRole('button')[0]);
+
+    const toggle = await findByLabelText(toggleHeader.headline);
+    expect(toggle).toBeDefined();
+    expect(toggle).toBeChecked();
+
+    userEvent.click(toggle);
+    expect(defaultParams.onColumnToggled).toBeCalledWith(toggleHeader.name);
+  });
+
+  it('clicking on add button runs callback', () => {
+    const onClick = jest.fn();
+    const { getAllByRole } = createDataGridActions((params) => ({
+      ...params,
+      enableAddBtn: true,
+      addBtnProps: { onClick },
+    }));
+
+    userEvent.click(getAllByRole('button')[0]);
+
+    expect(onClick).toBeCalledTimes(1);
+  });
+
+  it('clicking on search button runs callback', () => {
+    const onClick = jest.fn();
+    const { getAllByRole } = createDataGridActions((params) => ({
+      ...params,
+      enableSearchBtn: true,
+      searchBtnProps: { onClick },
+    }));
+
+    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', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        propagateRef(ref);
+      }, [ref]);
+
+      return <DataGridActions {...defaultParams} data-ref="testing" enableAddBtn ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});