@tsed/react-formio 1.10.8 → 1.10.12

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { FormOptions, FormSchema } from "../../interfaces";
 import { getFormSettingsSchema } from "./formSettings.schema";
-import { ChangedSubmission, Form } from "../form/form.component";
+import { Form } from "../form/form.component";
 import {
   FormSettingsSchema,
   formSettingsToSubmission,
@@ -9,6 +9,7 @@ import {
 } from "./formSettings.utils";
 import isEqual from "lodash/isEqual";
 import noop from "lodash/noop";
+import { ChangedSubmission } from "../form/useForm.hook";
 
 export interface FormSettingsProps {
   form: Partial<FormSchema>;
@@ -84,6 +85,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

@@ -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"}>

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/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/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/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/form-edit/useForm.hook.d.ts

@@ -1,16 +0,0 @@
-import { FormSchema } from "../../interfaces/FormSchema";
-export interface UseFormHookProps {
-    form: Partial<FormSchema>;
-    redo: Function;
-    undo: Function;
-    reset: Function;
-    hasChanged: boolean;
-    isValid: boolean;
-    hasUndo: boolean;
-    hasRedo: boolean;
-    onSubmit: () => void;
-    onCopy: () => void;
-    formChange: (newForm: Partial<FormSchema>) => void;
-    setChange: (path: string, value: any) => void;
-}
-export declare function useForm(props: any): UseFormHookProps;