@tsed/react-formio 1.13.0 → 1.13.3

package/src/components/input-text/inputText.stories.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+
 import { iconClass } from "../../utils/iconClass";
 import { InputText } from "./inputText.component";
 

package/src/components/loader/loader.component.spec.tsx

@@ -1,20 +1,21 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import React from "react";
+
 import { Sandbox } from "./loader.stories";
 describe("Loader", () => {
   it("should render a component (when isActive = true)", () => {
-    const { getByTestId } = render(<Sandbox isActive={true} />);
+    render(<Sandbox isActive={true} />);
 
-    const icon = getByTestId("icon_radio-circle");
+    const icon = screen.getByTestId("icon_radio-circle");
 
     expect(icon).toBeTruthy();
     expect(icon).toBeInTheDocument();
   });
 
   it("should render a component (when isActive = false)", () => {
-    const { queryByTestId } = render(<Sandbox isActive={false} />);
+    render(<Sandbox isActive={false} />);
 
-    const icon = queryByTestId("icon_radio-circle");
+    const icon = screen.queryByTestId("icon_radio-circle");
 
     expect(icon).toBeFalsy();
     expect(icon).not.toBeInTheDocument();

package/src/components/loader/loader.component.tsx

@@ -1,6 +1,7 @@
 import classnames from "classnames";
 import PropTypes from "prop-types";
 import React, { PropsWithChildren } from "react";
+
 import { iconClass } from "../../utils/iconClass";
 
 export interface LoaderProps {

package/src/components/loader/loader.stories.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { Loader } from "./loader.component";
 
 export default {

package/src/components/modal/modal.component.spec.tsx

@@ -1,6 +1,8 @@
 import "@testing-library/jest-dom/extend-expect";
+
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
+
 import { WithFooter, WithTitle } from "./modal.stories";
 
 describe("Modal", () => {
@@ -8,69 +10,70 @@ describe("Modal", () => {
     it("should display the modal when we click on the button", async () => {
       const onClose = jest.fn();
 
-      const { queryByTestId, getByTestId, findByTestId } = render(<WithTitle {...WithTitle.args} onClose={onClose} />);
+      render(<WithTitle {...WithTitle.args} onClose={onClose} />);
 
-      expect(queryByTestId("modalTitle")).toBeFalsy();
-      expect(queryByTestId("modalBody")).toBeFalsy();
-      expect(queryByTestId("modalFooter")).toBeFalsy();
+      expect(screen.queryByTestId("modalTitle")).toBeFalsy();
+      expect(screen.queryByTestId("modalBody")).toBeFalsy();
+      expect(screen.queryByTestId("modalFooter")).toBeFalsy();
 
       fireEvent.click(screen.getByRole("button", { name: "Open modal" }));
 
-      await findByTestId("modalTitle");
+      await screen.findByTestId("modalTitle");
 
-      expect(getByTestId("modalTitle")).toBeTruthy();
-      expect(getByTestId("modalTitle")).toHaveTextContent("Modal title");
-      expect(getByTestId("modalBody")).toBeTruthy();
-      expect(getByTestId("modalBody")).toHaveTextContent("Hello body");
-      expect(queryByTestId("modalFooter")).toBeFalsy();
+      expect(screen.getByTestId("modalTitle")).toBeTruthy();
+      expect(screen.getByTestId("modalTitle")).toHaveTextContent("Modal title");
+      expect(screen.getByTestId("modalBody")).toBeTruthy();
+      expect(screen.getByTestId("modalBody")).toHaveTextContent("Hello body");
+      expect(screen.queryByTestId("modalFooter")).toBeFalsy();
 
       fireEvent.click(screen.getByTestId("closeModal"));
 
-      expect(queryByTestId("modalTitle")).toBeFalsy();
-      expect(queryByTestId("modalBody")).toBeFalsy();
-      expect(queryByTestId("modalFooter")).toBeFalsy();
+      expect(screen.queryByTestId("modalTitle")).toBeFalsy();
+      expect(screen.queryByTestId("modalBody")).toBeFalsy();
+      expect(screen.queryByTestId("modalFooter")).toBeFalsy();
       expect(onClose).toHaveBeenCalledWith();
     });
   });
 
   describe("WithFooter", () => {
     it("should display the modal when we click on the button", async () => {
-      const { getByRole, queryByTestId, getByTestId, findByTestId } = render(<WithFooter {...WithFooter.args} />);
+      render(<WithFooter {...WithFooter.args} />);
 
-      expect(queryByTestId("modalTitle")).toBeFalsy();
-      expect(queryByTestId("modalBody")).toBeFalsy();
-      expect(queryByTestId("modalFooter")).toBeFalsy();
+      expect(screen.queryByTestId("modalTitle")).toBeFalsy();
+      expect(screen.queryByTestId("modalBody")).toBeFalsy();
+      expect(screen.queryByTestId("modalFooter")).toBeFalsy();
 
-      fireEvent.click(getByRole("button", { name: "Open modal" }));
+      fireEvent.click(screen.getByRole("button", { name: "Open modal" }));
 
-      await findByTestId("modalTitle");
+      await screen.findByTestId("modalTitle");
 
-      expect(getByTestId("modalTitle")).toBeTruthy();
-      expect(getByTestId("modalTitle")).toHaveTextContent("Modal title");
-      expect(getByTestId("modalBody")).toBeTruthy();
-      expect(getByTestId("modalBody")).toHaveTextContent("Hello body");
-      expect(getByTestId("modalFooter")).toBeTruthy();
+      expect(screen.getByTestId("modalTitle")).toBeTruthy();
+      expect(screen.getByTestId("modalTitle")).toHaveTextContent("Modal title");
+      expect(screen.getByTestId("modalBody")).toBeTruthy();
+      expect(screen.getByTestId("modalBody")).toHaveTextContent("Hello body");
+      expect(screen.getByTestId("modalFooter")).toBeTruthy();
 
       fireEvent.click(screen.getByTestId("customCloseModal"));
 
-      expect(queryByTestId("modalTitle")).toBeFalsy();
-      expect(queryByTestId("modalBody")).toBeFalsy();
-      expect(queryByTestId("modalFooter")).toBeFalsy();
+      expect(screen.queryByTestId("modalTitle")).toBeFalsy();
+      expect(screen.queryByTestId("modalBody")).toBeFalsy();
+      expect(screen.queryByTestId("modalFooter")).toBeFalsy();
     });
     it("should call the onSubmit listener", async () => {
       const onSubmit = jest.fn();
-      const { getByRole, queryByTestId, findByTestId } = render(<WithFooter {...WithFooter.args} onSubmit={onSubmit} />);
 
-      fireEvent.click(getByRole("button", { name: "Open modal" }));
+      render(<WithFooter {...WithFooter.args} onSubmit={onSubmit} />);
+
+      fireEvent.click(screen.getByRole("button", { name: "Open modal" }));
 
-      await findByTestId("modalTitle");
+      await screen.findByTestId("modalTitle");
 
       fireEvent.click(screen.getByTestId("customSubmitModal"));
 
       expect(onSubmit).toHaveBeenCalled();
-      expect(queryByTestId("modalTitle")).toBeFalsy();
-      expect(queryByTestId("modalBody")).toBeFalsy();
-      expect(queryByTestId("modalFooter")).toBeFalsy();
+      expect(screen.queryByTestId("modalTitle")).toBeFalsy();
+      expect(screen.queryByTestId("modalBody")).toBeFalsy();
+      expect(screen.queryByTestId("modalFooter")).toBeFalsy();
     });
   });
 });

package/src/components/modal/modal.component.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 import noop from "lodash";
+import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 
 export function useModal() {
   const [show, setShowModal] = useState(false);
@@ -37,8 +37,8 @@ export function Modal({
   className = "",
   ...props
 }: PropsWithChildren<ModalProps>) {
-  const titleRef = useRef<HTMLDivElement>();
-  const footerRef = useRef<HTMLDivElement>();
+  const titleRef: any = useRef<HTMLDivElement>();
+  const footerRef: any = useRef<HTMLDivElement>();
   const [maxHeight, setMaxHeight] = useState<string>();
 
   const onClickClose = () => {

package/src/components/modal/modal.stories.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { Modal, ModalProps, useModal } from "./modal.component";
 import { RemoveModal, RemoveModalProps } from "./removeModal.component";
 

package/src/components/modal/removeModal.component.tsx

@@ -1,6 +1,7 @@
 import classnames from "classnames";
 import noop from "lodash/noop";
 import React, { PropsWithChildren, useState } from "react";
+
 import { iconClass } from "../../utils/iconClass";
 import { InputText } from "../input-text/inputText.component";
 import { Modal, ModalProps } from "./modal.component";

package/src/components/pagination/pagination.component.spec.tsx

@@ -1,15 +1,16 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
+
 import { Sandbox } from "./pagination.stories";
 
 describe("Pagination", () => {
   it("should render the pagination component", () => {
-    const { container, getByTestId, queryAllByTestId } = render(<Sandbox {...Sandbox.args} />);
-    const paginationBtn = queryAllByTestId("pagination-button");
+    render(<Sandbox {...Sandbox.args} />);
+
+    const paginationBtn = screen.queryAllByTestId("pagination-button");
     const allBtnBlocks = paginationBtn.map((bloc) => bloc.textContent);
-    const select = getByTestId("select_page");
+    const select = screen.getByTestId("select_page");
 
-    expect(container).toBeInTheDocument();
     paginationBtn.forEach((child) => expect(child).toBeInTheDocument());
     expect(select).toBeInTheDocument();
     expect(allBtnBlocks[0]).toBe("Previous");
@@ -18,11 +19,11 @@ describe("Pagination", () => {
 
   it("should call previousPage() callback", () => {
     const previousPageSpy = jest.fn();
-    const { queryAllByTestId } = render(<Sandbox previousPage={previousPageSpy} canPreviousPage={true} />);
-    const paginationBtn = queryAllByTestId("pagination-button");
+    render(<Sandbox previousPage={previousPageSpy} canPreviousPage={true} />);
+    const paginationBtn = screen.queryAllByTestId("pagination-button");
     const btnPreviousPage = paginationBtn.find((btn) => btn.textContent === "Previous");
 
-    fireEvent.click(btnPreviousPage);
+    fireEvent.click(btnPreviousPage!);
 
     expect(previousPageSpy).toHaveBeenCalledTimes(1);
   });
@@ -40,13 +41,14 @@ describe("Pagination", () => {
     const gotoPageSpy = jest.fn();
     let page: number;
 
-    const { queryAllByTestId } = render(<Sandbox {...Sandbox.args} gotoPage={gotoPageSpy} />);
-    const paginationBtn = queryAllByTestId("pagination-button");
+    render(<Sandbox {...Sandbox.args} gotoPage={gotoPageSpy} />);
+
+    const paginationBtn = screen.queryAllByTestId("pagination-button");
     const buttonsPage = paginationBtn.filter((btn) => btn.textContent !== "Previous" && btn.textContent !== "Next");
 
     buttonsPage.forEach((btn) => {
       if (btn.textContent !== "...") {
-        page = +btn.textContent;
+        page = +btn.textContent!;
         fireEvent.click(btn);
         // eslint-disable-next-line jest/no-conditional-expect
         expect(gotoPageSpy).toHaveBeenCalled();
@@ -58,8 +60,9 @@ describe("Pagination", () => {
 
   it("should have Previous button disabled and not clickable", () => {
     const previousPageSpy = jest.fn();
-    const { getByText } = render(<Sandbox canPreviousPage={false} previousPage={previousPageSpy} {...Sandbox.args} />);
-    const previousButton = getByText("Previous");
+    render(<Sandbox canPreviousPage={false} previousPage={previousPageSpy} {...Sandbox.args} />);
+
+    const previousButton = screen.getByText("Previous");
 
     expect(previousButton).toHaveAttribute("disabled");
     fireEvent.click(previousButton);
@@ -68,9 +71,9 @@ describe("Pagination", () => {
 
   it("should have Previous button NOT disabled and clickable", () => {
     const previousPageSpy = jest.fn();
-    const { getByText } = render(<Sandbox {...Sandbox.args} canPreviousPage={true} previousPage={previousPageSpy} />);
+    render(<Sandbox {...Sandbox.args} canPreviousPage={true} previousPage={previousPageSpy} />);
 
-    const previousButton = getByText("Previous");
+    const previousButton = screen.getByText("Previous");
 
     expect(previousButton).not.toHaveAttribute("disabled");
     fireEvent.click(previousButton);
@@ -79,9 +82,9 @@ describe("Pagination", () => {
 
   it("should have Next button disabled and not clickable", () => {
     const nextPageSpy = jest.fn();
-    const { getByText } = render(<Sandbox canNextPage={false} nextPage={nextPageSpy} {...Sandbox.args} />);
+    render(<Sandbox canNextPage={false} nextPage={nextPageSpy} {...Sandbox.args} />);
 
-    const nextButton = getByText("Next");
+    const nextButton = screen.getByText("Next");
     expect(nextButton).toHaveAttribute("disabled");
     fireEvent.click(nextButton);
     expect(nextPageSpy).not.toHaveBeenCalled();
@@ -89,8 +92,8 @@ describe("Pagination", () => {
 
   it("should have Next button NOT disabled and clickable", () => {
     const nextPageSpy = jest.fn();
-    const { getByText } = render(<Sandbox canNextPage={true} nextPage={nextPageSpy} {...Sandbox.args} />);
-    const nextButton = getByText("Next");
+    render(<Sandbox canNextPage={true} nextPage={nextPageSpy} {...Sandbox.args} />);
+    const nextButton = screen.getByText("Next");
     expect(nextButton).not.toHaveAttribute("disabled");
     fireEvent.click(nextButton);
     expect(nextPageSpy).toHaveBeenCalled();
@@ -99,8 +102,8 @@ describe("Pagination", () => {
   it("should correctly render select component", () => {
     const pageSizes = [10, 25, 50, 100, 200, 500];
 
-    const { getByTestId } = render(<Sandbox {...Sandbox.args} pageSizes={pageSizes} />);
-    const selectComp = getByTestId("select_page");
+    render(<Sandbox {...Sandbox.args} pageSizes={pageSizes} />);
+    const selectComp = screen.getByTestId("select_page");
     const selectChilds = Array.prototype.map.call(selectComp, function (child) {
       return +child.textContent;
     });

package/src/components/pagination/pagination.component.tsx

@@ -1,5 +1,6 @@
 import classnames from "classnames";
 import React, { PropsWithChildren } from "react";
+
 import { Select } from "../select/select.component";
 import { getPageNumbers, LEFT_PAGE, RIGHT_PAGE } from "../table/utils/getPageNumbers";
 

package/src/components/pagination/pagination.stories.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+
 import { Pagination } from "./pagination.component";
 
 export default {

package/src/components/react-component/reactComponent.component.tsx

@@ -1,11 +1,12 @@
 import { Components, ComponentSchema } from "formiojs";
 import ReactDOM from "react-dom";
+
 import { Submission } from "../../interfaces/Submission";
 
 export class ReactComponent<Data = any> extends Components.components.field {
   public reactInstance: any;
-  public shouldSetValue: boolean;
-  private dataForSetting: Data;
+  public shouldSetValue?: boolean;
+  private dataForSetting?: Data;
 
   /**
    * This is the first phase of component building where the component is instantiated.
@@ -14,13 +15,13 @@ export class ReactComponent<Data = any> extends Components.components.field {
    * @param options - Any options passed into the renderer.
    * @param data - The submission data where this component's data exists.
    */
-  // eslint-disable-next-line no-useless-constructor
+  // eslint-disable-next-line no-useless-constructor,import/no-anonymous-default-export
   constructor(component: ComponentSchema, options: any, data: Submission<Data>) {
     super(component, options, data);
   }
 
   get $reactNode() {
-    return this.refs[`react-${this.id}`];
+    return (this.refs as any)[`react-${this.id}`];
   }
 
   /**
@@ -67,7 +68,9 @@ export class ReactComponent<Data = any> extends Components.components.field {
       [`react-${this.id}`]: "single"
     });
 
+    // @ts-ignore
     if (this.refs[`react-${this.id}`]) {
+      // @ts-ignore
       this.reactInstance = this.attachReact(this.refs[`react-${this.id}`]);
 
       if (this.shouldSetValue) {
@@ -82,7 +85,9 @@ export class ReactComponent<Data = any> extends Components.components.field {
    * or it is being removed from the form.
    */
   detach() {
+    // @ts-ignore
     if (this.refs[`react-${this.id}`]) {
+      // @ts-ignore
       this.detachReact(this.refs[`react-${this.id}`]);
     }
     super.detach();
@@ -122,8 +127,7 @@ export class ReactComponent<Data = any> extends Components.components.field {
    * @param value
    * @param flags
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  setValue(value: any, flags?: any): boolean {
+  setValue(value: any, flags?: any) {
     if (this.reactInstance) {
       this.reactInstance.setState({
         value: value
@@ -134,7 +138,7 @@ export class ReactComponent<Data = any> extends Components.components.field {
       this.dataForSetting = value;
     }
 
-    return undefined;
+    return false;
   }
 
   /**

package/src/components/select/select.component.spec.tsx

@@ -1,18 +1,19 @@
+import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+
 import { Choicesjs, Sandbox } from "./select.stories";
 
 describe("Select", () => {
   describe("select component Sandbox version", () => {
     it("should render the select component", () => {
-      const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test-sandbox"} />);
+      render(<Sandbox {...Sandbox.args} name={"test-sandbox"} />);
 
-      expect(getByTestId("select_test-sandbox")).toBeInTheDocument();
+      expect(screen.getByTestId("select_test-sandbox")).toBeInTheDocument();
     });
 
     it("should render the select component with a different size", () => {
-      const { getByTestId } = render(<Sandbox {...Sandbox.args} size='small' name={"test-sandbox"} />);
-      const select = getByTestId("select_test-sandbox");
+      render(<Sandbox {...Sandbox.args} size='small' name={"test-sandbox"} />);
+      const select = screen.getByTestId("select_test-sandbox");
       expect(select).toBeInTheDocument();
       expect(select).toHaveClass("form-control-small");
     });
@@ -25,11 +26,11 @@ describe("Select", () => {
 
       const placeHolderTest = "Placeholder test";
 
-      const { getByRole } = render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
+      render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
 
-      expect(getByRole("option", { name: "Placeholder test" })).toBeInTheDocument();
-      expect(getByRole("option", { name: "test1" })).toBeInTheDocument();
-      expect(getByRole("option", { name: "test2" })).toBeInTheDocument();
+      expect(screen.getByRole("option", { name: "Placeholder test" })).toBeInTheDocument();
+      expect(screen.getByRole("option", { name: "test1" })).toBeInTheDocument();
+      expect(screen.getByRole("option", { name: "test2" })).toBeInTheDocument();
     });
 
     it("should have Placeholder label as selected option by default", () => {
@@ -39,8 +40,8 @@ describe("Select", () => {
       ];
       const placeHolderTest = "Placeholder test";
 
-      const { getByRole } = render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
-      const option = getByRole("option", { name: placeHolderTest }) as HTMLOptionElement;
+      render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
+      const option = screen.getByRole("option", { name: placeHolderTest }) as HTMLOptionElement;
 
       expect(option.selected).toBeTruthy();
     });
@@ -53,15 +54,13 @@ describe("Select", () => {
       const placeHolderTest = "Placeholder test";
       const onChange = jest.fn();
 
-      const { getByRole, getByTestId } = render(
-        <Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} onChange={onChange} />
-      );
+      render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} onChange={onChange} />);
 
-      fireEvent.change(getByTestId("select_test-sandbox"), {
+      fireEvent.change(screen.getByTestId("select_test-sandbox"), {
         target: { value: "value1" }
       });
 
-      const option = getByRole("option", { name: "test1" }) as HTMLOptionElement;
+      const option = screen.getByRole("option", { name: "test1" }) as HTMLOptionElement;
 
       expect(option.selected).toBeTruthy();
       expect(onChange).toHaveBeenCalledWith("test-sandbox", "value1");
@@ -76,11 +75,11 @@ describe("Select", () => {
       ];
       const placeHolderTest = "Placeholder test";
 
-      const { getByRole } = render(
+      render(
         <Choicesjs {...Choicesjs.args} layout={"choicesjs"} choices={choices} placeholder={placeHolderTest} name={"test-choicesjs"} />
       );
 
-      expect(getByRole("option", { name: "test1" })).toBeInTheDocument();
+      expect(screen.getByRole("option", { name: "test1" })).toBeInTheDocument();
     });
   });
 });

package/src/components/select/select.component.tsx

@@ -2,6 +2,7 @@ import Choices from "choices.js";
 import classnames from "classnames";
 import PropTypes from "prop-types";
 import React, { ReactElement, useEffect, useRef } from "react";
+
 import { getEventValue } from "../../utils/getEventValue";
 import { FormControl, FormControlProps } from "../form-control/formControl.component";
 
@@ -33,7 +34,7 @@ export function Select<T = any>({
   layout,
   ...props
 }: SelectProps<T>): ReactElement {
-  const ref = useRef();
+  const ref = useRef<any>();
 
   useEffect(() => {
     let instance: any;
@@ -75,7 +76,7 @@ export function Select<T = any>({
         value={value || ("" as any)}
         placeholder={placeholder}
         onChange={(event) => {
-          onChange(name, getEventValue(event));
+          onChange && onChange(name, getEventValue(event));
         }}
       >
         {choices.map(({ label, value }) => {

package/src/components/select/select.stories.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+
 import { iconClass } from "../../utils/iconClass";
 import { Select } from "./select.component";
 

package/src/components/submissions-table/submissionsTable.component.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { FormSchema, Submission } from "../../interfaces";
 import { Table, TableProps } from "../table/table.component";
 import { mapFormToColumns } from "../table/utils/mapFormToColumns";
@@ -8,7 +9,7 @@ export type SubmissionsTableProps = Omit<TableProps<Submission>, "columns"> & {
 };
 
 export function SubmissionsTable({ form, ...props }: SubmissionsTableProps) {
-  const columns: any[] = React.useMemo(() => form && mapFormToColumns(form), [form]);
+  const columns: any[] | undefined = form && mapFormToColumns(form);
 
-  return <Table {...props} columns={columns} />;
+  return <Table {...props} columns={columns!} />;
 }

package/src/components/submissions-table/submissionsTable.stories.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { mapPagination } from "../../utils/mapPagination";
 import formSchema from "../__fixtures__/form-schema.json";
 import formSubmissions from "../__fixtures__/form-submissions.json";

package/src/components/table/components/defaultArrowSort.component.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { iconClass } from "../../../utils/iconClass";
 
 export function DefaultArrowSort({ column }: any) {

package/src/components/table/components/defaultCellHeader.component.tsx

@@ -5,7 +5,7 @@ export interface DefaultCellHeaderProps<Data extends object = any> extends Recor
   column: HeaderGroup<Data>;
 }
 
-export function DefaultCellHeader<Data extends Record<string, unknown> = {}>({ column }: DefaultCellHeaderProps) {
+export function DefaultCellHeader<Data extends Record<string, unknown> = {}>({ column }: DefaultCellHeaderProps<Data>) {
   return (
     <div className={"table-cell-header"}>
       <div className='table-cell-header__label' {...column.getSortByToggleProps()}>

package/src/components/table/components/defaultCellOperations.component.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { DefaultOperationButton } from "./defaultOperationButton.component";
 
 export function DefaultCellOperations({ operations, row, onClick, ctx, i18n }: any) {

package/src/components/table/components/defaultOperationButton.component.tsx

@@ -1,5 +1,6 @@
 import classnames from "classnames";
 import React from "react";
+
 import { iconClass } from "../../../utils/iconClass";
 import { stopPropagationWrapper } from "../../../utils/stopPropagationWrapper";
 

package/src/components/table/filters/defaultColumnFilter.component.spec.tsx

@@ -1,6 +1,8 @@
 import "@testing-library/jest-dom/extend-expect";
-import { fireEvent, render, act } from "@testing-library/react";
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
+
 import { DefaultColumnFilter } from "./defaultColumnFilter.component";
 
 describe("DefaultColumnFilter", () => {
@@ -12,12 +14,12 @@ describe("DefaultColumnFilter", () => {
       column: { id: "id", filterValue: "", setFilter: jest.fn() }
     };
 
-    const { getByRole } = render(
+    render(
       // @ts-ignore
       <DefaultColumnFilter {...props} />
     );
 
-    const input = getByRole("textbox");
+    const input = screen.getByRole("textbox");
 
     // eslint-disable-next-line testing-library/no-unnecessary-act
     await act(async () => {

package/src/components/table/filters/defaultColumnFilter.component.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from "react";
 import { FilterProps } from "react-table";
+
 import { InputText } from "../../input-text/inputText.component";
 
 export function DefaultColumnFilter<D extends Record<string, unknown> = {}>(

package/src/components/table/filters/selectColumnFilter.component.spec.tsx

@@ -1,6 +1,8 @@
 import "@testing-library/jest-dom/extend-expect";
-import { render } from "@testing-library/react";
+
+import { render, screen } from "@testing-library/react";
 import React from "react";
+
 import { SelectColumnFilter } from "./selectColumnFilter.component";
 
 describe("SelectColumnFilter", () => {
@@ -15,13 +17,13 @@ describe("SelectColumnFilter", () => {
       }
     };
 
-    const { getByText } = render(
+    render(
       // @ts-ignore
       <SelectColumnFilter {...props} />
     );
 
-    expect(getByText("select-choice-1")).toBeDefined();
-    expect(getByText("select-choice-2")).toBeDefined();
+    expect(screen.getByText("select-choice-1")).toBeDefined();
+    expect(screen.getByText("select-choice-2")).toBeDefined();
   });
   it("should display select with custom choices", async () => {
     const mockSetFilter = jest.fn();
@@ -35,12 +37,12 @@ describe("SelectColumnFilter", () => {
       }
     };
 
-    const { queryByText, getByText } = render(
+    render(
       // @ts-ignore
       <SelectColumnFilter {...props} />
     );
 
-    expect(queryByText("select-choice-1")).toBeNull();
-    expect(getByText("fake-choice")).toBeDefined();
+    expect(screen.queryByText("select-choice-1")).toBeNull();
+    expect(screen.getByText("fake-choice")).toBeDefined();
   });
 });