@tsed/react-formio 1.10.7 → 1.10.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "1.10.7",
+  "version": "1.10.11",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.ts",
@@ -13,7 +13,7 @@
     "prettier": "prettier '{src,test}/**/*.{ts,tsx}' --write"
   },
   "dependencies": {
-    "@tsed/redux-utils": "1.10.7",
+    "@tsed/redux-utils": "1.10.11",
     "eventemitter2": "^6.4.3",
     "prop-types": "^15.7.2"
   },
@@ -28,8 +28,9 @@
     "tooltip.js": "^1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "1.10.7",
-    "@tsed/tailwind-formio": "1.10.7"
+    "@tsed/tailwind": "1.10.11",
+    "@tsed/tailwind-formio": "1.10.11",
+    "eslint-plugin-jsx-a11y": "^6.5.1"
   },
   "repository": "https://github.com/TypedProject/tsed-formio",
   "bugs": {

package/src/components/actions-table/actionsTable.component.spec.tsx

@@ -8,32 +8,30 @@ describe("ActionsTable", () => {
   it("should render the table actions", async () => {
     const onAddAction = jest.fn();
 
-    const { getByTestId, getAllByRole } = render(
+    const { getByRole, getAllByRole } = render(
       <Sandbox {...Sandbox.args} onAddAction={onAddAction} />
     );
 
-    const btn = getByTestId("submit");
+    const btn = getByRole("button", { name: /add action/i });
     const cells = getAllByRole("cell");
-    const select = getByTestId("select");
+    const options = getAllByRole("option");
 
-    expect(btn).toHaveAttribute("disabled");
-    expect(btn).toHaveTextContent("Add action");
-    expect(cells[0]).toHaveTextContent("Save Submission");
-    expect(select.children.length).toEqual(
-      Sandbox.args.availableActions.length + 1
-    );
+    expect(btn).toHaveProperty("disabled");
+    expect(btn.innerHTML).toMatch("Add action");
+    expect(cells[0].innerHTML).toMatch("Save Submission");
+    expect(options.length).toEqual(Sandbox.args.availableActions.length + 1);
 
-    expect(select.children[0]).toHaveTextContent("Select an action");
-    expect(select.children[1]).toHaveTextContent("Email");
+    expect(options[0].innerHTML).toMatch("Select an action");
+    expect(options[1].innerHTML).toMatch("Email");
   });
   it("should not call addAction when the default item is selected", async () => {
     const onAddAction = jest.fn();
 
-    const { getByTestId } = render(
+    const { getByRole } = render(
       <Sandbox {...Sandbox.args} onAddAction={onAddAction} />
     );
 
-    const btn = getByTestId("submit");
+    const btn = getByRole("button", { name: /add action/i });
 
     await fireEvent.click(btn);
     expect(onAddAction).not.toHaveBeenCalled();
@@ -41,12 +39,12 @@ describe("ActionsTable", () => {
   it("should call addAction with the selected action", async () => {
     const onAddAction = jest.fn();
 
-    const { getByTestId } = render(
+    const { getByRole } = render(
       <Sandbox {...Sandbox.args} onAddAction={onAddAction} />
     );
 
-    const btn = getByTestId("submit");
-    const select = getByTestId("select");
+    const btn = getByRole("button", { name: /add action/i });
+    const select = getByRole("combobox");
 
     await userEvent.selectOptions(
       select,
@@ -55,7 +53,7 @@ describe("ActionsTable", () => {
 
     await fireEvent.click(btn);
 
-    expect(btn).not.toHaveAttribute("disabled");
+    expect(btn).not.toHaveProperty("disabled", true);
     expect(onAddAction).toHaveBeenCalledWith("webhook");
   });
 });

package/src/components/actions-table/actionsTable.component.tsx

@@ -53,6 +53,7 @@ export function ActionsTable({
             disabled={currentAction === ""}
             className={"btn btn-success"}
             onClick={() => currentAction && onAddAction(currentAction)}
+            type={"submit"}
           >
             <i className={classnames(iconClass(undefined, "plus"), "mr-1")} />{" "}
             {i18n("Add action")}

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

@@ -6,8 +6,8 @@ describe("Card", () => {
   it("should render the card component", () => {
     const { getByRole } = render(<Sandbox {...Sandbox.args} />);
 
-    const title = getByRole("card-heading");
-    const body = getByRole("card-body");
+    const title = getByRole("heading");
+    const body = getByRole("article");
 
     expect(title).toHaveTextContent("label");
     expect(body).toHaveTextContent("test");

package/src/components/card/card.component.tsx

@@ -14,11 +14,9 @@ export function Card({
   return (
     <div className={classnames("card", className)}>
       <div className={"card-header "}>
-        <h4 className={"card-title"} role={"card-heading"}>
-          {label}
-        </h4>
+        <h4 className={"card-title"}>{label}</h4>
       </div>
-      <div className={"card-body"} role={"card-body"}>
+      <div className={"card-body"} role={"article"}>
         {children}
       </div>
     </div>

package/src/components/form-builder/formBuilder.component.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { ComponentSchema } from "formiojs";
 import AllComponents from "formiojs/components";
 import Components from "formiojs/components/Components";

package/src/components/form-settings/formSettings.component.tsx

@@ -84,6 +84,7 @@ export function FormSettings(props: FormSettingsProps) {
         disabled={!isValid}
         className={"mt-5 btn btn-primary"}
         onClick={onSubmit}
+        type={"submit"}
       >
         {i18n("Save settings")}
       </button>

package/src/components/forms-table/components/formCell.component.tsx

@@ -32,7 +32,7 @@ export function FormsCell(
           </span>
 
           {(form.tags || []).map((tag, index) => (
-            <span
+            <button
               key={index}
               className='badge badge-hover bg-secondary mr-1'
               onClick={stopPropagationWrapper(() => {
@@ -42,7 +42,7 @@ export function FormsCell(
             >
               <i className={classnames(iconClass(undefined, "tags"), "mr-1")} />
               {tag}
-            </span>
+            </button>
           ))}
         </li>
       </ul>

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

@@ -56,7 +56,7 @@ export function InputText<T = any>({
       <input
         type={type || "text"}
         {...props}
-        data-testid={"input"}
+        data-testid={`input_${name}`}
         className={classnames("form-control", size && `form-control-${size}`)}
         id={name}
         required={required}

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

@@ -6,7 +6,7 @@ describe("Loader", () => {
   it("should render a component (with isActive = true)", () => {
     const { getByTestId } = render(<Loader isActive={true} />);
 
-    const icon = getByTestId("icon");
+    const icon = getByTestId("icon_radio-circle");
 
     expect(icon).toBeTruthy();
   });
@@ -14,7 +14,7 @@ describe("Loader", () => {
   it("should render a component (with isActive = false)", () => {
     const { queryByTestId } = render(<Loader isActive={false} />);
 
-    const icon = queryByTestId("icon");
+    const icon = queryByTestId("icon_radio-circle");
 
     expect(icon).toBeFalsy();
   });

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

@@ -25,7 +25,7 @@ export function Loader({
         )}
       >
         <span
-          data-testid={"icon"}
+          data-testid={`icon_${icon}`}
           color={color}
           className={`text-11xl ${iconClass(undefined, icon, true)}`}
         />

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

@@ -16,7 +16,7 @@ describe("Modal", () => {
       expect(queryByTestId("modalBody")).toBeFalsy();
       expect(queryByTestId("modalFooter")).toBeFalsy();
 
-      fireEvent.click(screen.getByRole("openModal"));
+      fireEvent.click(screen.getByRole("button", { name: "Open modal" }));
 
       await waitFor(() => getByTestId("modalTitle"));
 
@@ -45,7 +45,7 @@ describe("Modal", () => {
       expect(queryByTestId("modalBody")).toBeFalsy();
       expect(queryByTestId("modalFooter")).toBeFalsy();
 
-      fireEvent.click(getByRole("openModal"));
+      fireEvent.click(getByRole("button", { name: "Open modal" }));
 
       await waitFor(() => getByTestId("modalTitle"));
 
@@ -67,7 +67,7 @@ describe("Modal", () => {
         <WithFooter {...WithFooter.args} onSubmit={onSubmit} />
       );
 
-      fireEvent.click(getByRole("openModal"));
+      fireEvent.click(getByRole("button", { name: "Open modal" }));
 
       await waitFor(() => getByTestId("modalTitle"));
 

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

@@ -1,3 +1,5 @@
+/* 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";
 
@@ -61,7 +63,10 @@ export function Modal({
   }
 
   return (
-    <div className={`formio-dialog formio-dialog-theme-default ${className}`}>
+    <div
+      role={"dialog"}
+      className={`formio-dialog formio-dialog-theme-default ${className}`}
+    >
       <div className='formio-dialog-overlay' onClick={onClickClose} />
       <div style={style} className={"formio-dialog-content"}>
         <div className={"formio-dialog-wrapper"}>

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

@@ -26,11 +26,7 @@ export const Sandbox = (args: ModalProps) => {
   return (
     <div>
       <div>
-        <button
-          role={"openModal"}
-          className={"btn btn-primary"}
-          onClick={modal.openModal}
-        >
+        <button className={"btn btn-primary"} onClick={modal.openModal}>
           Open modal
         </button>
       </div>
@@ -51,11 +47,7 @@ export const WithTitle = (args: ModalProps) => {
   return (
     <div>
       <div>
-        <button
-          role={"openModal"}
-          className={"btn btn-primary"}
-          onClick={modal.openModal}
-        >
+        <button className={"btn btn-primary"} onClick={modal.openModal}>
           Open modal
         </button>
       </div>
@@ -103,11 +95,7 @@ export const WithFooter = (args: ModalProps) => {
   return (
     <div>
       <div>
-        <button
-          className={"btn btn-primary"}
-          role={"openModal"}
-          onClick={modal.openModal}
-        >
+        <button className={"btn btn-primary"} onClick={modal.openModal}>
           Open modal
         </button>
       </div>
@@ -185,12 +173,8 @@ export const WithRemoveModal = (args: RemoveModalProps) => {
   return (
     <div>
       <div>
-        <button
-          className={"btn btn-primary"}
-          role={"openModal"}
-          onClick={modal.openModal}
-        >
-          Open
+        <button className={"btn btn-primary"} onClick={modal.openModal}>
+          Open modal
         </button>
       </div>
       <RemoveModal

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

@@ -1,6 +1,6 @@
 import classnames from "classnames";
 import noop from "lodash/noop";
-import React, { useState } from "react";
+import React, { PropsWithChildren, useState } from "react";
 import { iconClass } from "../../utils/iconClass";
 import { InputText } from "../input-text/inputText.component";
 import { Modal, ModalProps } from "./modal.component";
@@ -10,7 +10,7 @@ function RemoveModalFooter({
   valueToCompare,
   onSubmit,
   onClose,
-  i18n = noop
+  i18n = (f: string) => f
 }: ModalProps) {
   return (
     <div className={"flex items-center justify-center bg-white p-2"}>
@@ -42,22 +42,29 @@ export interface RemoveModalProps extends ModalProps {
   valueToCompare: string;
   itemType?: string;
   i18n?: (f: string) => string;
+  maxWidth?: string;
 }
 
-export function RemoveModal(props: RemoveModalProps) {
+export function RemoveModal({
+  maxWidth = "300px",
+  children,
+  ...props
+}: PropsWithChildren<RemoveModalProps>) {
   const { i18n = noop } = props;
   const [value, setValue] = useState();
 
   return (
     <Modal
       {...props}
-      style={{ maxWidth: "300px" }}
+      className={classnames(props.className, "formio-dialog-theme-remove")}
+      style={{ maxWidth }}
       title={`Drop ${props.itemType?.toLowerCase()}`}
       value={value}
       footer={RemoveModalFooter}
     >
       <div className={"px-4 pt-3 pb-5"}>
         <div className={"pb-1"}>
+          {children}
           {i18n("To drop")} <strong>{props.valueToCompare}</strong>,&nbsp;
           {i18n("type the")}&nbsp;
           <strong>&quot;{props.itemType?.toLowerCase()}&quot;</strong>&nbsp;

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

@@ -106,6 +106,7 @@ export class ReactComponent<Data = any> extends Components.components.field {
    */
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   attachReact(element?: any) {
+    // eslint-disable-next-line react/no-render-return-value
     return ReactDOM.render(this.renderReact(), element);
   }
 

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

@@ -71,7 +71,7 @@ export function Select<T = any>({
       <select
         ref={ref}
         {...props}
-        data-testid={"select"}
+        data-testid={`select_${name}`}
         className={classnames("form-control", size && `form-control-${size}`)}
         name={name}
         id={name}

package/src/components/table/components/{cell.component.tsx → defaultCell.component.tsx}

@@ -1,6 +1,9 @@
 import React from "react";
 
-export function Cell({ value, render = (f: any) => f }: any): JSX.Element {
+export function DefaultCell({
+  value,
+  render = (f: any) => f
+}: any): JSX.Element {
   if (value === undefined) {
     return <></>;
   }

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

@@ -30,7 +30,7 @@ export function DefaultOperationButton(props: OperationButtonProps) {
   } = props;
 
   return (
-    <span
+    <button
       className={classnames(
         className,
         ["btn", buttonOutline && "outline", buttonType]
@@ -48,6 +48,6 @@ export function DefaultOperationButton(props: OperationButtonProps) {
       {title && (
         <span className={icon && title ? "ml-1" : ""}>{i18n(title)}</span>
       )}
-    </span>
+    </button>
   );
 }

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

@@ -12,13 +12,13 @@ describe("DefaultColumnFilter", () => {
       column: { id: "id", filterValue: "", setFilter: jest.fn() }
     };
 
-    const { getByTestId } = render(
+    const { getByRole } = render(
       // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
       // @ts-ignore
       <DefaultColumnFilter {...props} />
     );
 
-    const input = getByTestId("input");
+    const input = getByRole("textbox");
 
     await act(async () => {
       fireEvent.change(input, { target: { value: "value-test" } });

package/src/components/table/index.ts

@@ -1,6 +1,6 @@
 export * from "./utils/useOperations.hook";
-export * from "./components/cell.component";
 export * from "./components/defaultArrowSort.component";
+export * from "./components/defaultCell.component";
 export * from "./components/defaultCellHeader.component";
 export * from "./components/defaultCellHeader.component";
 export * from "./components/defaultCellOperations.component";

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

@@ -215,10 +215,14 @@ export function Table<Data extends object = any>(
         /* style={{ marginBottom: disablePagination ? "-1px" : "0px" }} */
       >
         <thead>
-          {tableInstance.headerGroups.map((headerGroup) => (
-            <tr {...headerGroup.getHeaderGroupProps()}>
+          {tableInstance.headerGroups.map((headerGroup, i) => (
+            <tr
+              key={`tableInstance.headerGroups${i}`}
+              {...headerGroup.getHeaderGroupProps()}
+            >
               {headerGroup.headers.map((column) => (
                 <th
+                  key={`tableInstance.headers.column.${column.id}`}
                   /* className='text-left py-2 align-top' */
                   {...column.getHeaderProps()}
                 >
@@ -230,20 +234,27 @@ export function Table<Data extends object = any>(
         </thead>
         {!isLoading ? (
           <tbody {...tableInstance.getTableBodyProps()}>
-            {tableInstance.page.map((row, i) => {
+            {tableInstance.page.map((row) => {
               tableInstance.prepareRow(row);
               return (
                 <tr
+                  key={`tableInstance.page.${row.id}`}
                   onClick={() => _onClick(row.original, "row")}
                   {...row.getRowProps()}
                 >
-                  {row.cells.map((cell) => {
+                  {row.cells.map((cell, i) => {
                     const { hidden, colspan } = cell.column as any;
                     if (hidden) {
                       return null;
                     }
                     return (
-                      <td colSpan={colspan} {...cell.getCellProps()}>
+                      <td
+                        key={`tableInstance.page.cells.${
+                          cell.value || "value"
+                        }.${i}`}
+                        colSpan={colspan}
+                        {...cell.getCellProps()}
+                      >
                         {cell.render("Cell")}
                       </td>
                     );

package/src/components/table/utils/mapFormToColumns.tsx

@@ -1,9 +1,9 @@
+import React from "react";
 import { Components, ExtendedComponentSchema } from "formiojs";
 import FormioUtils from "formiojs/utils";
-import React from "react";
 import { Column } from "react-table";
 import { FormSchema } from "../../../interfaces";
-import { Cell } from "../components/cell.component";
+import { DefaultCell } from "../components/defaultCell.component";
 import { SelectColumnFilter } from "../filters/selectColumnFilter.component";
 
 export function mapFormToColumns(form: FormSchema): Column[] {
@@ -19,7 +19,10 @@ export function mapFormToColumns(form: FormSchema): Column[] {
           Header: component.label || component.title || component.key,
           accessor: `data.${component.key}`,
           Cell: (props: any) => (
-            <Cell {...props} render={(value: any) => cmp.asString(value)} />
+            <DefaultCell
+              {...props}
+              render={(value: any) => cmp.asString(value)}
+            />
           )
         };
 

package/src/components/tabs/tabs.component.stories.tsx

@@ -87,7 +87,7 @@ Sandbox.args = {
 function AddButton({ onCreate }: any) {
   return (
     <div>
-      <div onClick={onCreate}>+</div>
+      <button onClick={onCreate}>+</button>
     </div>
   );
 }

package/dist/components/table/components/cell.component.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function Cell({ value, render }: any): JSX.Element;