@tsed/react-formio 1.10.6 → 1.10.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "1.10.6",
+  "version": "1.10.10",
   "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.6",
+    "@tsed/redux-utils": "1.10.10",
     "eventemitter2": "^6.4.3",
     "prop-types": "^15.7.2"
   },
@@ -28,8 +28,9 @@
     "tooltip.js": "^1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "1.10.6",
-    "@tsed/tailwind-formio": "1.10.6"
+    "@tsed/tailwind": "1.10.10",
+    "@tsed/tailwind-formio": "1.10.10",
+    "eslint-plugin-jsx-a11y": "^6.5.1"
   },
   "repository": "https://github.com/TypedProject/tsed-formio",
   "bugs": {

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

@@ -95,6 +95,17 @@ export const useForm = (props: any): any => {
     }
   }, [src]);
 
+  useEffect(() => {
+    if (form) {
+      createWebForm(form, options);
+    }
+
+    return () => {
+      isLoaded.current = false;
+      instance.current && instance.current.destroy(true);
+    };
+  }, []);
+
   useEffect(() => {
     props.onSubmit && events.current.set("onSubmit", props.onSubmit);
   }, [props.onSubmit, events]);

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/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/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/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/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;