@tsed/react-formio 1.10.6 → 1.10.10

package/.eslintrc

@@ -7,7 +7,9 @@
     "prettier/react",
     "plugin:@typescript-eslint/recommended",
     "prettier/@typescript-eslint",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended"
   ],
   "env": {
     "node": true,
@@ -31,12 +33,15 @@
     "react/prop-types": 0,
     "react/jsx-handler-names": 0,
     "react/jsx-fragments": 0,
+    "react/no-unescaped-entities": 0,
     "react/no-unused-prop-types": 0,
+    "react/display-name": 1,
     "no-unused-vars": "off",
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/explicit-function-return-type": 0,
     "@typescript-eslint/camelcase": 0,
     "@typescript-eslint/no-empty-function": 0,
-    "import/export": 0
+    "import/export": 0,
+    "jsx-a11y/no-autofocus": 1
   }
 }

package/dist/components/modal/removeModal.component.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
+import { PropsWithChildren } from "react";
 import { ModalProps } from "./modal.component";
 export interface RemoveModalProps extends ModalProps {
     valueToCompare: string;
     itemType?: string;
     i18n?: (f: string) => string;
+    maxWidth?: string;
 }
-export declare function RemoveModal(props: RemoveModalProps): JSX.Element;
+export declare function RemoveModal({ maxWidth, children, ...props }: PropsWithChildren<RemoveModalProps>): JSX.Element;

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

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

package/dist/components/table/index.d.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/dist/index.js

@@ -2102,7 +2102,7 @@ function DefaultOperationButton(props) {
       i18n = _props$i18n === void 0 ? function (f) {
     return f;
   } : _props$i18n;
-  return React__default['default'].createElement("span", {
+  return React__default['default'].createElement("button", {
     className: classnames(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), "btn-" + buttonSize),
     onClick: stopPropagationWrapper(function () {
       return onClick(action);
@@ -2305,19 +2305,24 @@ function Table(props) {
     className: classnames("table-group table-responsive", className)
   }, React__default['default'].createElement("table", Object.assign({
     className: "table table-striped table-hover"
-  }, tableInstance.getTableProps()), React__default['default'].createElement("thead", null, tableInstance.headerGroups.map(function (headerGroup) {
-    return React__default['default'].createElement("tr", Object.assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) {
-      return React__default['default'].createElement("th", Object.assign({}, column.getHeaderProps()), React__default['default'].createElement(CellHeader, {
+  }, tableInstance.getTableProps()), React__default['default'].createElement("thead", null, tableInstance.headerGroups.map(function (headerGroup, i) {
+    return React__default['default'].createElement("tr", Object.assign({
+      key: "tableInstance.headerGroups" + i
+    }, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) {
+      return React__default['default'].createElement("th", Object.assign({
+        key: "tableInstance.headers.column." + column.id
+      }, column.getHeaderProps()), React__default['default'].createElement(CellHeader, {
         column: column
       }));
     }));
-  })), !isLoading ? React__default['default'].createElement("tbody", Object.assign({}, tableInstance.getTableBodyProps()), tableInstance.page.map(function (row, i) {
+  })), !isLoading ? React__default['default'].createElement("tbody", Object.assign({}, tableInstance.getTableBodyProps()), tableInstance.page.map(function (row) {
     tableInstance.prepareRow(row);
     return React__default['default'].createElement("tr", Object.assign({
+      key: "tableInstance.page." + row.id,
       onClick: function onClick() {
         return _onClick(row.original, "row");
       }
-    }, row.getRowProps()), row.cells.map(function (cell) {
+    }, row.getRowProps()), row.cells.map(function (cell, i) {
       var _cell$column = cell.column,
           hidden = _cell$column.hidden,
           colspan = _cell$column.colspan;
@@ -2327,6 +2332,7 @@ function Table(props) {
       }
 
       return React__default['default'].createElement("td", Object.assign({
+        key: "tableInstance.page.cells." + (cell.value || "value") + "." + i,
         colSpan: colspan
       }, cell.getCellProps()), cell.render("Cell"));
     }));
@@ -2463,11 +2469,10 @@ function Card(_ref) {
   }, React__default['default'].createElement("div", {
     className: "card-header "
   }, React__default['default'].createElement("h4", {
-    className: "card-title",
-    role: "card-heading"
+    className: "card-title"
   }, label)), React__default['default'].createElement("div", {
     className: "card-body",
-    role: "card-body"
+    role: "article"
   }, children));
 }
 
@@ -2561,6 +2566,16 @@ var useForm = function useForm(props) {
       createWebForm(src, options);
     }
   }, [src]);
+  React.useEffect(function () {
+    if (form) {
+      createWebForm(form, options);
+    }
+
+    return function () {
+      isLoaded.current = false;
+      instance.current && instance.current.destroy(true);
+    };
+  }, []);
   React.useEffect(function () {
     props.onSubmit && events.current.set("onSubmit", props.onSubmit);
   }, [props.onSubmit, events]);
@@ -9019,7 +9034,7 @@ function FormsCell(props) {
   }, React__default['default'].createElement("i", {
     className: classnames(iconClass(undefined, "history"), "mr-1")
   }), React__default['default'].createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map(function (tag, index) {
-    return React__default['default'].createElement("span", {
+    return React__default['default'].createElement("button", {
       key: index,
       className: 'badge badge-hover bg-secondary mr-1',
       onClick: stopPropagationWrapper(function () {
@@ -9132,6 +9147,7 @@ function Modal(_ref) {
   }
 
   return React__default['default'].createElement("div", {
+    role: "dialog",
     className: "formio-dialog formio-dialog-theme-default " + className
   }, React__default['default'].createElement("div", {
     className: 'formio-dialog-overlay',
@@ -9172,7 +9188,9 @@ function RemoveModalFooter(_ref) {
       onSubmit = _ref.onSubmit,
       onClose = _ref.onClose,
       _ref$i18n = _ref.i18n,
-      i18n = _ref$i18n === void 0 ? noop__default['default'] : _ref$i18n;
+      i18n = _ref$i18n === void 0 ? function (f) {
+    return f;
+  } : _ref$i18n;
   return React__default['default'].createElement("div", {
     className: "flex items-center justify-center bg-white p-2"
   }, React__default['default'].createElement("button", {
@@ -9193,9 +9211,14 @@ function RemoveModalFooter(_ref) {
   }), i18n("Remove")));
 }
 
-function RemoveModal(props) {
+function RemoveModal(_ref2) {
   var _props$itemType, _props$itemType2;
 
+  var _ref2$maxWidth = _ref2.maxWidth,
+      maxWidth = _ref2$maxWidth === void 0 ? "300px" : _ref2$maxWidth,
+      children = _ref2.children,
+      props = _objectWithoutPropertiesLoose(_ref2, ["maxWidth", "children"]);
+
   var _props$i18n = props.i18n,
       i18n = _props$i18n === void 0 ? noop__default['default'] : _props$i18n;
 
@@ -9204,8 +9227,9 @@ function RemoveModal(props) {
       setValue = _useState[1];
 
   return React__default['default'].createElement(Modal, Object.assign({}, props, {
+    className: classnames(props.className, "formio-dialog-theme-remove"),
     style: {
-      maxWidth: "300px"
+      maxWidth: maxWidth
     },
     title: "Drop " + ((_props$itemType = props.itemType) == null ? void 0 : _props$itemType.toLowerCase()),
     value: value,
@@ -9214,7 +9238,7 @@ function RemoveModal(props) {
     className: "px-4 pt-3 pb-5"
   }, React__default['default'].createElement("div", {
     className: "pb-1"
-  }, i18n("To drop"), " ", React__default['default'].createElement("strong", null, props.valueToCompare), ",\xA0", i18n("type the"), "\xA0", React__default['default'].createElement("strong", null, "\"", (_props$itemType2 = props.itemType) == null ? void 0 : _props$itemType2.toLowerCase(), "\""), "\xA0", i18n("name"), " ", React__default['default'].createElement("strong", null, "\"", props.valueToCompare, "\""), "."), React__default['default'].createElement(InputText, {
+  }, children, i18n("To drop"), " ", React__default['default'].createElement("strong", null, props.valueToCompare), ",\xA0", i18n("type the"), "\xA0", React__default['default'].createElement("strong", null, "\"", (_props$itemType2 = props.itemType) == null ? void 0 : _props$itemType2.toLowerCase(), "\""), "\xA0", i18n("name"), " ", React__default['default'].createElement("strong", null, "\"", props.valueToCompare, "\""), "."), React__default['default'].createElement(InputText, {
     name: 'remove',
     value: value,
     onChange: function onChange(name, value) {
@@ -22639,6 +22663,7 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
   ;
 
   _proto.attachReact = function attachReact(element) {
+    // eslint-disable-next-line react/no-render-return-value
     return reactDom.render(this.renderReact(), element);
   }
   /**
@@ -22723,7 +22748,7 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
   return ReactComponent;
 }(formiojs.Components.components.field);
 
-function Cell(_ref) {
+function DefaultCell(_ref) {
   var value = _ref.value,
       _ref$render = _ref.render,
       render = _ref$render === void 0 ? function (f) {
@@ -22755,8 +22780,8 @@ function mapFormToColumns(form) {
       var column = {
         Header: component.label || component.title || component.key,
         accessor: "data." + component.key,
-        Cell: function Cell$1(props) {
-          return React__default['default'].createElement(Cell, Object.assign({}, props, {
+        Cell: function Cell(props) {
+          return React__default['default'].createElement(DefaultCell, Object.assign({}, props, {
             render: function render(value) {
               return cmp.asString(value);
             }
@@ -22975,8 +23000,8 @@ exports.ActionsTable = ActionsTable;
 exports.Alert = Alert;
 exports.ButtonTab = ButtonTab;
 exports.Card = Card;
-exports.Cell = Cell;
 exports.DefaultArrowSort = DefaultArrowSort;
+exports.DefaultCell = DefaultCell;
 exports.DefaultCellHeader = DefaultCellHeader;
 exports.DefaultCellOperations = DefaultCellOperations;
 exports.DefaultColumnFilter = DefaultColumnFilter;