@tsed/react-formio 1.12.0 → 1.13.2

package/dist/index.js

@@ -564,7 +564,7 @@ function checkRoleFormAccess(auth, form, roles) {
       return true;
     }
 
-    return !!(roles.includes("owner") && get__default['default'](form, "owner") === get__default['default'](auth, "user._id"));
+    return roles.includes("owner") && get__default['default'](form, "owner") === get__default['default'](auth, "user._id");
   }
 
   return true;
@@ -1693,24 +1693,24 @@ function FormControl(_ref) {
       description = _ref.description,
       label = _ref.label,
       className = _ref.className;
-  return React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "form-group-" + (name || ""),
     className: classnames("form-group", className)
-  }, label && React__default['default'].createElement("label", {
+  }, label && /*#__PURE__*/React__default['default'].createElement("label", {
     htmlFor: name,
     className: "col-form-label " + (required ? " field-required" : "")
-  }, label), React__default['default'].createElement("div", {
+  }, label), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "input-group"
-  }, prefix && React__default['default'].createElement("div", {
-    className: 'input-group-prepend'
-  }, React__default['default'].createElement("span", {
-    className: 'input-group-text'
-  }, prefix)), children, suffix && React__default['default'].createElement("div", {
-    className: 'input-group-append'
-  }, React__default['default'].createElement("span", {
-    className: 'input-group-text'
-  }, suffix))), description && React__default['default'].createElement("div", {
-    className: 'form-text text-muted'
+  }, prefix && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "input-group-prepend"
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "input-group-text"
+  }, prefix)), children, suffix && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "input-group-append"
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "input-group-text"
+  }, suffix))), description && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "form-text text-muted"
   }, description));
 }
 FormControl.propTypes = {
@@ -1756,7 +1756,7 @@ function Select(_ref) {
     label: placeholder,
     value: ""
   }].concat(choices);
-  return React__default['default'].createElement(FormControl, {
+  return /*#__PURE__*/React__default['default'].createElement(FormControl, {
     name: name,
     label: label,
     required: required,
@@ -1764,7 +1764,7 @@ function Select(_ref) {
     prefix: prefix,
     suffix: suffix,
     shadow: false
-  }, React__default['default'].createElement("select", Object.assign({
+  }, /*#__PURE__*/React__default['default'].createElement("select", _extends({
     ref: ref
   }, props, {
     "data-testid": "select_" + name,
@@ -1775,12 +1775,12 @@ function Select(_ref) {
     value: value || "",
     placeholder: placeholder,
     onChange: function onChange(event) {
-      _onChange(name, getEventValue(event));
+      _onChange && _onChange(name, getEventValue(event));
     }
   }), choices.map(function (_ref2) {
     var label = _ref2.label,
         value = _ref2.value;
-    return React__default['default'].createElement("option", {
+    return /*#__PURE__*/React__default['default'].createElement("option", {
       key: String(value),
       label: label,
       value: value
@@ -1858,8 +1858,8 @@ function PaginationButton(props) {
       active = props.active,
       otherProps = _objectWithoutPropertiesLoose(props, ["component", "children", "disabled", "active"]);
 
-  return React__default['default'].createElement(Component, Object.assign({}, otherProps, {
-    "data-testid": 'pagination-button',
+  return /*#__PURE__*/React__default['default'].createElement(Component, _extends({}, otherProps, {
+    "data-testid": "pagination-button",
     disabled: disabled,
     className: classnames("page-link", disabled ? "disabled" : "", active ? "" : "", props.className)
   }), children);
@@ -1895,14 +1895,14 @@ function Pagination(props) {
       label: value
     };
   });
-  return React__default['default'].createElement("nav", {
-    "aria-label": 'Page navigation',
+  return /*#__PURE__*/React__default['default'].createElement("nav", {
+    "aria-label": "Page navigation",
     className: classnames("pagination-group -mb-3", className)
-  }, React__default['default'].createElement("ul", {
-    className: 'pagination mb-3 mr-3'
-  }, React__default['default'].createElement("li", {
+  }, /*#__PURE__*/React__default['default'].createElement("ul", {
+    className: "pagination mb-3 mr-3"
+  }, /*#__PURE__*/React__default['default'].createElement("li", {
     className: classnames("page-item", !canPreviousPage && "disabled")
-  }, React__default['default'].createElement(PaginationButton, {
+  }, /*#__PURE__*/React__default['default'].createElement(PaginationButton, {
     tabIndex: -1,
     disabled: !canPreviousPage,
     onClick: function onClick() {
@@ -1910,68 +1910,68 @@ function Pagination(props) {
     }
   }, i18n("Previous"))), pageNumbers.map(function (page) {
     if ([LEFT_PAGE, RIGHT_PAGE].includes(page)) {
-      return React__default['default'].createElement("li", {
-        className: 'page-item',
+      return /*#__PURE__*/React__default['default'].createElement("li", {
+        className: "page-item",
         key: page
-      }, React__default['default'].createElement(PaginationButton, {
-        "aria-hidden": 'true'
+      }, /*#__PURE__*/React__default['default'].createElement(PaginationButton, {
+        "aria-hidden": "true"
       }, "..."));
     }
 
     var active = page - 1 === pageIndex;
-    return React__default['default'].createElement("li", {
+    return /*#__PURE__*/React__default['default'].createElement("li", {
       className: classnames("page-item", active && "active"),
       key: page
-    }, React__default['default'].createElement(PaginationButton, {
+    }, /*#__PURE__*/React__default['default'].createElement(PaginationButton, {
       tabIndex: pageIndex,
       active: active,
       onClick: function onClick() {
         return gotoPage(page - 1);
       }
     }, page));
-  }), React__default['default'].createElement("li", {
+  }), /*#__PURE__*/React__default['default'].createElement("li", {
     className: classnames("page-item", !canNextPage && "disabled")
-  }, React__default['default'].createElement(PaginationButton, {
+  }, /*#__PURE__*/React__default['default'].createElement(PaginationButton, {
     tabIndex: pageNumbers.length,
     disabled: !canNextPage,
     onClick: function onClick() {
       return nextPage();
     }
-  }, i18n("Next")))), React__default['default'].createElement("li", {
-    className: 'mb-3 mr-3 flex items-center'
-  }, React__default['default'].createElement(Select, {
+  }, i18n("Next")))), /*#__PURE__*/React__default['default'].createElement("li", {
+    className: "mb-3 mr-3 flex items-center"
+  }, /*#__PURE__*/React__default['default'].createElement(Select, {
     name: "page",
     value: pageSize,
     choices: choices,
     onChange: function onChange(name, value) {
       setPageSize(+value);
     }
-  }), React__default['default'].createElement("span", {
+  }), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "ml-3"
-  }, i18n("items per page"))), pageOptions && React__default['default'].createElement("li", {
+  }, i18n("items per page"))), pageOptions && /*#__PURE__*/React__default['default'].createElement("li", {
     className: "mb-3 flex items-center"
-  }, React__default['default'].createElement("span", null, i18n("Page"), "\xA0"), React__default['default'].createElement("strong", null, pageIndex + 1, " of ", pageOptions.length)));
+  }, /*#__PURE__*/React__default['default'].createElement("span", null, i18n("Page"), "\xA0"), /*#__PURE__*/React__default['default'].createElement("strong", null, pageIndex + 1, " of ", pageOptions.length)));
 }
 
 function DefaultArrowSort(_ref) {
   var column = _ref.column;
   var isSorted = column.isSorted,
       isSortedDesc = column.isSortedDesc;
-  return React__default['default'].createElement("span", {
+  return /*#__PURE__*/React__default['default'].createElement("span", {
     className: "table-arrow-sort"
-  }, isSorted ? React__default['default'].createElement("i", {
+  }, isSorted ? /*#__PURE__*/React__default['default'].createElement("i", {
     className: iconClass(undefined, isSortedDesc ? "sort-up" : "sort-down")
   }) : "");
 }
 
 function DefaultCellHeader(_ref) {
   var column = _ref.column;
-  return React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "table-cell-header"
-  }, React__default['default'].createElement("div", Object.assign({
-    className: 'table-cell-header__label'
-  }, column.getSortByToggleProps()), React__default['default'].createElement("span", null, column.render("Header")), column.render("ArrowSort")), column.canFilter ? React__default['default'].createElement("div", {
-    className: 'table-cell-header__filter'
+  }, /*#__PURE__*/React__default['default'].createElement("div", _extends({
+    className: "table-cell-header__label"
+  }, column.getSortByToggleProps()), /*#__PURE__*/React__default['default'].createElement("span", null, column.render("Header")), column.render("ArrowSort")), column.canFilter ? /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "table-cell-header__filter"
   }, column.render("Filter")) : null);
 }
 
@@ -2011,12 +2011,12 @@ function InputText(_ref) {
       setValue = _useState[1];
 
   var change = React.useMemo(function () {
-    return callLast(onChange, 300);
+    return onChange && callLast(onChange, 300);
   }, [onChange]);
   React.useEffect(function () {
     setValue(value);
   }, [value]);
-  return React__default['default'].createElement(FormControl, {
+  return /*#__PURE__*/React__default['default'].createElement(FormControl, {
     name: name,
     label: label,
     required: required,
@@ -2024,19 +2024,19 @@ function InputText(_ref) {
     prefix: prefix,
     suffix: suffix,
     className: className
-  }, React__default['default'].createElement("input", Object.assign({
+  }, /*#__PURE__*/React__default['default'].createElement("input", _extends({
     type: type || "text"
   }, props, {
     "data-testid": "input_" + name,
     className: classnames("form-control", size && "form-control-" + size),
     id: name,
     required: required,
-    value: localValue || placeholder || "",
+    value: localValue || "",
     placeholder: placeholder,
     onChange: function onChange(event) {
       var value = getEventValue(event);
       setValue(value);
-      return change(name, value);
+      return change && change(name, value);
     }
   })));
 }
@@ -2069,7 +2069,7 @@ function DefaultColumnFilter(props) {
     setFilterId(id);
     setFilter(value || undefined);
   }, [id, setValue, setFilterId, setFilter]);
-  return React__default['default'].createElement(InputText, {
+  return /*#__PURE__*/React__default['default'].createElement(InputText, {
     size: "sm",
     id: id,
     name: id,
@@ -2106,14 +2106,14 @@ function DefaultOperationButton(props) {
       i18n = _props$i18n === void 0 ? function (f) {
     return f;
   } : _props$i18n;
-  return React__default['default'].createElement("button", {
+  return /*#__PURE__*/React__default['default'].createElement("button", {
     className: classnames(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), "btn-" + buttonSize),
     onClick: stopPropagationWrapper(function () {
       return onClick(action);
     })
-  }, icon ? React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement("i", {
+  }, icon ? /*#__PURE__*/React__default['default'].createElement(Fragment, null, /*#__PURE__*/React__default['default'].createElement("i", {
     className: iconClass(undefined, icon)
-  }), " ", title && " ") : null, title && React__default['default'].createElement("span", {
+  }), " ", title && " ") : null, title && /*#__PURE__*/React__default['default'].createElement("span", {
     className: icon && title ? "ml-1" : ""
   }, i18n(title)));
 }
@@ -2125,8 +2125,8 @@ function DefaultCellOperations(_ref) {
       ctx = _ref.ctx,
       i18n = _ref.i18n;
   var data = row.original;
-  return React__default['default'].createElement("div", {
-    className: 'btn-group'
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "btn-group"
   }, operations.filter(function (_ref2) {
     var permissionsResolver = _ref2.permissionsResolver;
     return !permissionsResolver || permissionsResolver(data, ctx);
@@ -2135,7 +2135,7 @@ function DefaultCellOperations(_ref) {
         OperationButton = _ref3$OperationButton === void 0 ? DefaultOperationButton : _ref3$OperationButton,
         operation = _objectWithoutPropertiesLoose(_ref3, ["OperationButton"]);
 
-    return React__default['default'].createElement(OperationButton, Object.assign({
+    return /*#__PURE__*/React__default['default'].createElement(OperationButton, _extends({
       key: operation.action
     }, operation, {
       onClick: function onClick(action) {
@@ -2168,12 +2168,12 @@ function useOperations(_ref) {
         id: "operations",
         groupByBoundary: true,
         Header: function Header() {
-          return React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
             className: "text-center"
           }, i18n("Operations"));
         },
         Cell: function Cell(props) {
-          return React__default['default'].createElement(CellOperations, Object.assign({}, props, {
+          return /*#__PURE__*/React__default['default'].createElement(CellOperations, _extends({}, props, {
             operations: operations,
             onClick: onClick,
             ctx: ctx,
@@ -2198,14 +2198,14 @@ function getOperationCallback(operations, onClick) {
 }
 
 function DefaultLoader() {
-  return React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "text-center p-2 pb-4 font-bold"
   }, "Loading in progress");
 }
 
 function DefaultEmptyData() {
-  return React__default['default'].createElement("div", {
-    className: 'text-center p-2 pb-4 font-bold'
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "text-center p-2 pb-4 font-bold"
   }, "No data found");
 }
 
@@ -2305,28 +2305,29 @@ function Table(props) {
     });
   }, [onChange, pageIndex, pageSize, sortBy, filters, filterId]); // Render the UI for your table
 
-  return React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
     className: classnames("table-group table-responsive", className)
-  }, React__default['default'].createElement("table", Object.assign({
+  }, /*#__PURE__*/React__default['default'].createElement("table", _extends({
     className: "table table-striped table-hover"
-  }, tableInstance.getTableProps()), React__default['default'].createElement("thead", null, tableInstance.headerGroups.map(function (headerGroup, i) {
-    return React__default['default'].createElement("tr", Object.assign({
+  }, tableInstance.getTableProps()), /*#__PURE__*/React__default['default'].createElement("thead", null, tableInstance.headerGroups.map(function (headerGroup, i) {
+    return /*#__PURE__*/React__default['default'].createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
       key: "tableInstance.headerGroups" + i
-    }, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) {
-      return React__default['default'].createElement("th", Object.assign({
+    }), headerGroup.headers.map(function (column) {
+      return /*#__PURE__*/React__default['default'].createElement("th", _extends({}, column.getHeaderProps(), {
         key: "tableInstance.headers.column." + column.id
-      }, column.getHeaderProps()), React__default['default'].createElement(CellHeader, {
+      }), /*#__PURE__*/React__default['default'].createElement(CellHeader, {
         column: column
       }));
     }));
-  })), !isLoading ? React__default['default'].createElement("tbody", Object.assign({}, tableInstance.getTableBodyProps()), tableInstance.page.map(function (row) {
+  })), !isLoading ? /*#__PURE__*/React__default['default'].createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map(function (row) {
     tableInstance.prepareRow(row);
-    return React__default['default'].createElement("tr", Object.assign({
-      key: "tableInstance.page." + row.id,
+    return /*#__PURE__*/React__default['default'].createElement("tr", _extends({
       onClick: function onClick() {
         return _onClick(row.original, "row");
       }
-    }, row.getRowProps()), row.cells.map(function (cell, i) {
+    }, row.getRowProps(), {
+      key: "tableInstance.page." + row.id
+    }), row.cells.map(function (cell, i) {
       var _cell$column = cell.column,
           hidden = _cell$column.hidden,
           colspan = _cell$column.colspan;
@@ -2335,14 +2336,15 @@ function Table(props) {
         return null;
       }
 
-      return React__default['default'].createElement("td", Object.assign({
-        key: "tableInstance.page.cells." + (cell.value || "value") + "." + i,
+      return /*#__PURE__*/React__default['default'].createElement("td", _extends({
         colSpan: colspan
-      }, cell.getCellProps()), cell.render("Cell"));
+      }, cell.getCellProps(), {
+        key: "tableInstance.page.cells." + (cell.value || "value") + "." + i
+      }), cell.render("Cell"));
     }));
-  })) : null), isLoading ? React__default['default'].createElement(Loader, null) : null, !data.length ? React__default['default'].createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? React__default['default'].createElement("div", {
+  })) : null), isLoading ? /*#__PURE__*/React__default['default'].createElement(Loader, null) : null, !data.length ? /*#__PURE__*/React__default['default'].createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? /*#__PURE__*/React__default['default'].createElement("div", {
     className: "overflow-hidden"
-  }, React__default['default'].createElement(Pagination$1, Object.assign({}, tableInstance, {
+  }, /*#__PURE__*/React__default['default'].createElement(Pagination$1, _extends({}, tableInstance, {
     className: "text-sm",
     pageIndex: pageIndex,
     pageSize: pageSize,
@@ -2379,13 +2381,13 @@ function ActionsTable(_ref) {
       id: "title"
     }];
   }, []);
-  return React__default['default'].createElement(Table, Object.assign({}, props, {
+  return /*#__PURE__*/React__default['default'].createElement(Table, _extends({}, props, {
     disableFilters: disableFilters,
     disablePagination: disablePagination,
     columns: columns
-  }), React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "pagination-group"
-  }, React__default['default'].createElement(Select, {
+  }, /*#__PURE__*/React__default['default'].createElement(Select, {
     name: "actions",
     value: currentAction,
     choices: [{
@@ -2395,9 +2397,9 @@ function ActionsTable(_ref) {
     onChange: function onChange(name, action) {
       return setAction(action);
     }
-  }), React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "pl-3"
-  }, React__default['default'].createElement("button", {
+  }, /*#__PURE__*/React__default['default'].createElement("button", {
     "data-testid": "submit",
     disabled: currentAction === "",
     className: "btn btn-success",
@@ -2405,7 +2407,7 @@ function ActionsTable(_ref) {
       return currentAction && onAddAction(currentAction);
     },
     type: "submit"
-  }, React__default['default'].createElement("i", {
+  }, /*#__PURE__*/React__default['default'].createElement("i", {
     className: classnames(iconClass(undefined, "plus"), "mr-1")
   }), " ", i18n("Add action")))));
 }
@@ -2422,9 +2424,9 @@ function formatError(error) {
   if (Object.prototype.hasOwnProperty.call(error, "errors")) {
     return Object.keys(error.errors).map(function (key, index) {
       var item = error.errors[key];
-      return React__default['default'].createElement("div", {
+      return /*#__PURE__*/React__default['default'].createElement("div", {
         key: index
-      }, React__default['default'].createElement("strong", null, item.name, " (", item.path, ")"), " ", "- ", item.message);
+      }, /*#__PURE__*/React__default['default'].createElement("strong", null, item.name, " (", item.path, ")"), " ", "- ", item.message);
     });
   } // If this is a standard error.
 
@@ -2436,7 +2438,7 @@ function formatError(error) {
 
   if (Object.prototype.hasOwnProperty.call(error, "name") && error.name === "ValidationError") {
     return error.details.map(function (item, index) {
-      return React__default['default'].createElement("div", {
+      return /*#__PURE__*/React__default['default'].createElement("div", {
         key: index
       }, item.message);
     });
@@ -2459,9 +2461,9 @@ function Alert(_ref) {
     return null;
   }
 
-  return React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "alert alert-" + type,
-    role: 'alert'
+    role: "alert"
   }, formatError(error));
 }
 
@@ -2469,19 +2471,83 @@ function Card(_ref) {
   var children = _ref.children,
       label = _ref.label,
       className = _ref.className;
-  return React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
     className: classnames("card", className)
-  }, React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "card-header "
-  }, React__default['default'].createElement("h4", {
+  }, /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "card-title"
-  }, label)), React__default['default'].createElement("div", {
+  }, label)), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "card-body",
     role: "article"
   }, children));
 }
 
+function _catch$a(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
+
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
+
+  return result;
+}
+
+function useDebounce(event, callback, events) {
+  React.useEffect(function () {
+    callback && events.set(event, callLast(callback, 100));
+  }, [callback, event, events]);
+}
+
+function useEvents(funcs) {
+  var events = React.useRef(new Map());
+
+  var hasEvent = function hasEvent(event) {
+    return funcs.hasOwnProperty(event) && typeof funcs[event] === "function";
+  };
+
+  var emit = function emit(event) {
+    if (hasEvent(event)) {
+      var fn = events.current.has(event) ? events.current.get(event) : funcs[event];
+      return fn.apply(void 0, [].slice.call(arguments, 1));
+    }
+  };
+
+  useDebounce("onChange", funcs.onChange, events.current);
+  return {
+    events: events,
+    emit: emit,
+    hasEvent: hasEvent
+  };
+}
+
 function useForm(props) {
+  var customValidation = function customValidation(submission, callback) {
+    try {
+      var _temp3 = function () {
+        if (hasEvent("onAsyncSubmit")) {
+          var _temp4 = _catch$a(function () {
+            return Promise.resolve(emit("onAsyncSubmit", submission, instance.current)).then(function () {});
+          }, function (err) {
+            callback((err == null ? void 0 : err.errors) || err);
+          });
+
+          if (_temp4 && _temp4.then) return _temp4.then(function () {});
+        } else {
+          callback(null);
+        }
+      }();
+
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
   var src = props.src,
       form = props.form,
       _props$options = props.options,
@@ -2493,14 +2559,22 @@ function useForm(props) {
   var element = React.useRef();
   var isLoaded = React.useRef();
   var instance = React.useRef();
-  var events = React.useRef(new Map());
+
+  var _useEvents = useEvents(funcs),
+      emit = _useEvents.emit,
+      hasEvent = _useEvents.hasEvent;
 
   var createWebForm = function createWebForm(srcOrForm, options) {
     options = Object.assign({}, options);
     srcOrForm = typeof srcOrForm === "string" ? srcOrForm : cloneDeep__default['default'](srcOrForm);
 
     if (!instance.current) {
+      var _options, _options$hooks;
+
       isLoaded.current = false;
+      options.hooks = _extends({}, options.hooks || {}, {
+        customValidation: ((_options = options) == null ? void 0 : (_options$hooks = _options.hooks) == null ? void 0 : _options$hooks.customValidation) || customValidation
+      });
       instance.current = new formiojs.Form(element.current, srcOrForm, options);
       instance.current.onAny(function (event) {
         var args = [].slice.call(arguments, 1);
@@ -2510,23 +2584,15 @@ function useForm(props) {
         }
 
         if (event.startsWith("formio.")) {
-          var funcName = "on" + event.charAt(7).toUpperCase() + event.slice(8);
+          var eventName = "on" + event.charAt(7).toUpperCase() + event.slice(8);
 
-          if (funcName === "onChange") {
+          if (eventName === "onChange") {
             if (isEqual__default['default'](noop$1.get(submission, "data"), args[0].data)) {
               return;
             }
           }
 
-          if ( // eslint-disable-next-line no-prototype-builtins
-          props.hasOwnProperty(funcName) && typeof funcs[funcName] === "function") {
-            if (!events.current.has(funcName)) {
-              var fn = callLast(funcs[funcName], 100);
-              events.current.set(funcName, fn);
-            }
-
-            events.current.get(funcName).apply(void 0, args);
-          }
+          emit.apply(void 0, [eventName].concat(args, [instance.current]));
         }
       });
       instance.current.ready.then(function (formio) {
@@ -2581,12 +2647,6 @@ function useForm(props) {
       instance.current && instance.current.destroy(true);
     };
   }, []);
-  React.useEffect(function () {
-    props.onSubmit && events.current.set("onSubmit", props.onSubmit);
-  }, [props.onSubmit, events]);
-  React.useEffect(function () {
-    props.onSubmitDone && events.current.set("onSubmitDone", props.onSubmitDone);
-  }, [props.onSubmitDone, events]);
   return {
     element: element
   };
@@ -2597,7 +2657,7 @@ function Form(props) {
   var _useForm = useForm(props),
       element = _useForm.element;
 
-  return React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
     "data-testid": "formioContainer" + (props.name || ""),
     ref: element,
     className: props.className
@@ -2635,7 +2695,8 @@ Form.propTypes = {
     noAlerts: PropTypes__default['default'].bool,
     i18n: PropTypes__default['default'].any,
     template: PropTypes__default['default'].string,
-    saveDraft: PropTypes__default['default'].bool
+    saveDraft: PropTypes__default['default'].bool,
+    hooks: PropTypes__default['default'].any
   }),
   onPrevPage: PropTypes__default['default'].func,
   onNextPage: PropTypes__default['default'].func,
@@ -2644,6 +2705,7 @@ Form.propTypes = {
   onCustomEvent: PropTypes__default['default'].func,
   onComponentChange: PropTypes__default['default'].func,
   onSubmit: PropTypes__default['default'].func,
+  onAsyncSubmit: PropTypes__default['default'].func,
   onSubmitDone: PropTypes__default['default'].func,
   onFormLoad: PropTypes__default['default'].func,
   onError: PropTypes__default['default'].func,
@@ -2786,8 +2848,8 @@ function getAccessPermissionForm(_ref3) {
 function rolesToChoices(roles) {
   return Object.values(roles).map(function (role) {
     return {
-      label: role.title,
-      value: role._id
+      label: role.title || "",
+      value: role._id || ""
     };
   });
 }
@@ -2801,7 +2863,7 @@ function accessToHash(keys, access) {
     o[role.type] = role.roles;
     return o;
   }, {});
-  return keys.reduce(function (data, key) {
+  return (keys || []).filter(Boolean).reduce(function (data, key) {
     var _extends2;
 
     return _extends({}, data, (_extends2 = {}, _extends2[key] = hash[key] || [], _extends2));
@@ -2917,7 +2979,7 @@ function useFormAccess(_ref) {
     submissions: submissions,
     onChange: onChange,
     onSubmit: function onSubmit() {
-      _onSubmit(submissionsToDataAccess(formDefinition, submissions));
+      _onSubmit && _onSubmit(submissionsToDataAccess(formDefinition, submissions));
     }
   };
 }
@@ -2935,7 +2997,7 @@ function NamedFormAccess(_ref2) {
       isValid = _useState2[0],
       setIsValid = _useState2[1];
 
-  return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(Form, {
+  return /*#__PURE__*/React__default['default'].createElement(Fragment, null, /*#__PURE__*/React__default['default'].createElement(Form, {
     name: name,
     form: form[name],
     submission: submissions[name],
@@ -2948,11 +3010,11 @@ function NamedFormAccess(_ref2) {
       setIsValid(isValid);
     },
     options: options
-  }), React__default['default'].createElement("button", {
+  }), /*#__PURE__*/React__default['default'].createElement("button", {
     disabled: !isValid,
     className: "mt-5 btn btn-primary",
     onClick: onSubmit
-  }, "Save access"), children, React__default['default'].createElement("div", {
+  }, "Save access"), children, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "alert alert-warning mt-5"
   }, "Elevated permissions allow users to access and modify other user's entities. Assign with caution."));
 }
@@ -2966,43 +3028,43 @@ function FormAccess(props) {
       onChange = _useFormAccess.onChange,
       onSubmit = _useFormAccess.onSubmit;
 
-  return React__default['default'].createElement("div", null, props.children, React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", null, props.children, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "flex mb-5"
-  }, React__default['default'].createElement(Card, {
+  }, /*#__PURE__*/React__default['default'].createElement(Card, {
     label: "Manage submission access",
     className: "flex-1"
-  }, React__default['default'].createElement(NamedFormAccess, {
+  }, /*#__PURE__*/React__default['default'].createElement(NamedFormAccess, {
     name: "submissionAccess",
     form: form,
     submissions: submissions,
     onChange: onChange,
     onSubmit: onSubmit,
     options: options
-  }, props.children)), React__default['default'].createElement("div", {
+  }, props.children)), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "w-1/4 pl-4"
-  }, React__default['default'].createElement(Card, {
+  }, /*#__PURE__*/React__default['default'].createElement(Card, {
     label: "About Submission Data Permissions"
-  }, React__default['default'].createElement("p", null, "Submission Data Permissions allow you to control who can create, view, and modify form submission data."), React__default['default'].createElement("ul", {
+  }, /*#__PURE__*/React__default['default'].createElement("p", null, "Submission Data Permissions allow you to control who can create, view, and modify form submission data."), /*#__PURE__*/React__default['default'].createElement("ul", {
     className: "mt-5 pl-7 list-disc"
-  }, React__default['default'].createElement("li", {
+  }, /*#__PURE__*/React__default['default'].createElement("li", {
     className: "pb-2"
-  }, React__default['default'].createElement("strong", null, "Own Permissions"), " - These permissions apply if the user is the original creator of the submission data and is listed as the owner of the submission in submission.owner. This allows users to create and edit their own submission data without seeing other user's data."), React__default['default'].createElement("li", null, React__default['default'].createElement("strong", null, "All Permissions"), " - These permissions apply to all submission data regardless of who owns it."))))), React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement("strong", null, "Own Permissions"), " - These permissions apply if the user is the original creator of the submission data and is listed as the owner of the submission in submission.owner. This allows users to create and edit their own submission data without seeing other user's data."), /*#__PURE__*/React__default['default'].createElement("li", null, /*#__PURE__*/React__default['default'].createElement("strong", null, "All Permissions"), " - These permissions apply to all submission data regardless of who owns it."))))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "flex mb-5"
-  }, React__default['default'].createElement(Card, {
+  }, /*#__PURE__*/React__default['default'].createElement(Card, {
     label: "Manage " + type + " definition access",
     className: "flex-1"
-  }, React__default['default'].createElement(NamedFormAccess, {
+  }, /*#__PURE__*/React__default['default'].createElement(NamedFormAccess, {
     name: "access",
     form: form,
     submissions: submissions,
     onChange: onChange,
     onSubmit: onSubmit,
     options: options
-  }, props.children)), React__default['default'].createElement("div", {
+  }, props.children)), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "w-1/4 pl-4"
-  }, React__default['default'].createElement(Card, {
+  }, /*#__PURE__*/React__default['default'].createElement(Card, {
     label: "About Form Definition Access"
-  }, React__default['default'].createElement("p", null, "These permissions allow you to give access to a single form's JSON definition so they can render the form."), React__default['default'].createElement("p", null, "Typically you will want to allow all of your roles to be able to Read the form definition."), React__default['default'].createElement("p", null, "Each form also has an owner at ", React__default['default'].createElement("strong", null, "form.owner"), " which is the user who created the form. In some applications users are allowed to create their own forms. In those cases it is helpful to have Owner based permissions as well.")))));
+  }, /*#__PURE__*/React__default['default'].createElement("p", null, "These permissions allow you to give access to a single form's JSON definition so they can render the form."), /*#__PURE__*/React__default['default'].createElement("p", null, "Typically you will want to allow all of your roles to be able to Read the form definition."), /*#__PURE__*/React__default['default'].createElement("p", null, "Each form also has an owner at ", /*#__PURE__*/React__default['default'].createElement("strong", null, "form.owner"), " which is the user who created the form. In some applications users are allowed to create their own forms. In those cases it is helpful to have Owner based permissions as well.")))));
 }
 FormAccess.propTypes = {
   type: PropTypes__default['default'].string.isRequired,
@@ -3058,7 +3120,7 @@ function FormAction(_ref2) {
       form = _useMemo.form,
       submission = _useMemo.submission;
 
-  return React__default['default'].createElement("div", null, children, React__default['default'].createElement(Form, {
+  return /*#__PURE__*/React__default['default'].createElement("div", null, children, /*#__PURE__*/React__default['default'].createElement(Form, {
     form: form,
     submission: submission,
     onSubmit: onSubmit,
@@ -3066,7 +3128,7 @@ function FormAction(_ref2) {
   }), children);
 }
 
-function _catch$a(body, recover) {
+function _catch$b(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -3094,7 +3156,7 @@ var createBuilder = function createBuilder(el, _ref2) {
       display: display,
       components: [].concat(components)
     };
-    return Promise.resolve(_catch$a(function () {
+    return Promise.resolve(_catch$b(function () {
       return Promise.resolve(new FormioFormBuilder__default['default'](el, form, _extends({}, options)).ready).then(function (builder) {
         var handleEvent = function handleEvent(event) {
           return function () {
@@ -3129,6 +3191,8 @@ var FormBuilder = /*#__PURE__*/function (_React$Component) {
     var _this;
 
     _this = _React$Component.call(this, props) || this;
+    _this.elRef = void 0;
+    _this.builderRef = void 0;
     _this.state = {
       display: props.display,
       components: cloneDeep__default['default'](props.components)
@@ -3236,21 +3300,21 @@ var FormBuilder = /*#__PURE__*/function (_React$Component) {
     }, function () {
       var _this8$props;
 
-      (_this8$props = _this8.props) == null ? void 0 : _this8$props.onChange(components);
+      ((_this8$props = _this8.props) == null ? void 0 : _this8$props.onChange) && _this8.props.onChange(components);
     });
   };
 
   _proto.render = function render() {
     var _this9 = this;
 
-    return React__default['default'].createElement("div", {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
       ref: function ref(_ref) {
         _this9.elRef = _ref;
       },
       onClick: function onClick(e) {
         return e.stopPropagation();
       }
-    }, React__default['default'].createElement("div", null));
+    }, /*#__PURE__*/React__default['default'].createElement("div", null));
   };
 
   return FormBuilder;
@@ -3323,47 +3387,47 @@ function FormEditCTAs(_ref) {
     placement: "top",
     title: t("Reset all changes")
   });
-  return React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "form-edit__actions"
-  }, React__default['default'].createElement("div", null, React__default['default'].createElement("button", {
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("button", {
     className: "btn btn-primary btn-save flex " + (disabled ? "disabled" : ""),
     disabled: disabled,
     onClick: function onClick() {
-      return !disabled && onSubmit();
+      return !disabled && onSubmit && onSubmit();
     }
-  }, React__default['default'].createElement("i", {
+  }, /*#__PURE__*/React__default['default'].createElement("i", {
     className: "mr-1 " + iconClass(options.iconset, "save")
-  }), saveText), React__default['default'].createElement("div", null, React__default['default'].createElement("button", {
+  }), saveText), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("button", {
     className: "btn btn-light btn-undo " + (hasUndo ? "" : "disabled"),
     onClick: function onClick() {
-      return onUndo();
+      return onUndo && onUndo();
     },
     ref: undoTooltipRef
-  }, React__default['default'].createElement("i", {
+  }, /*#__PURE__*/React__default['default'].createElement("i", {
     className: iconClass(options.iconset, "undo")
-  })), React__default['default'].createElement("button", {
+  })), /*#__PURE__*/React__default['default'].createElement("button", {
     className: "btn btn-light btn-redo " + (hasRedo ? "" : "disabled"),
     onClick: function onClick() {
-      return onRedo();
+      return onRedo && onRedo();
     },
     ref: redoTooltipRef
-  }, React__default['default'].createElement("i", {
+  }, /*#__PURE__*/React__default['default'].createElement("i", {
     className: iconClass(options.iconset, "redo")
-  }))), React__default['default'].createElement("div", null, onCopy && React__default['default'].createElement("button", {
-    className: 'btn btn-light',
+  }))), /*#__PURE__*/React__default['default'].createElement("div", null, onCopy && /*#__PURE__*/React__default['default'].createElement("button", {
+    className: "btn btn-light",
     onClick: function onClick() {
       return onCopy();
     },
     ref: copyTooltipRef
-  }, React__default['default'].createElement("i", {
+  }, /*#__PURE__*/React__default['default'].createElement("i", {
     className: iconClass(options.iconset, "copy")
-  })), React__default['default'].createElement("button", {
+  })), /*#__PURE__*/React__default['default'].createElement("button", {
     className: "btn btn-light btn-reset",
     onClick: function onClick() {
-      return onReset();
+      return onReset && onReset();
     },
     ref: resetTooltipRef
-  }, React__default['default'].createElement("i", {
+  }, /*#__PURE__*/React__default['default'].createElement("i", {
     className: iconClass(options.iconset, "reset")
   })))));
 }
@@ -3399,10 +3463,10 @@ function InputTags(_ref) {
     });
     instance.setValue([].concat(value, []));
     instance.passedElement.element.addEventListener("addItem", function (event) {
-      onChange(name, uniq__default['default'](value.concat(event.detail.value)));
+      onChange && onChange(name, uniq__default['default'](value.concat(event.detail.value)));
     });
     instance.passedElement.element.addEventListener("removeItem", function (event) {
-      onChange(name, value.filter(function (v) {
+      onChange && onChange(name, value.filter(function (v) {
         return v !== event.detail.value;
       }));
     });
@@ -3410,16 +3474,16 @@ function InputTags(_ref) {
       instance.destroy();
     };
   }, []);
-  return React__default['default'].createElement(FormControl, {
+  return /*#__PURE__*/React__default['default'].createElement(FormControl, {
     name: name,
     label: label,
     required: required,
     description: description,
     prefix: prefix,
     suffix: suffix
-  }, React__default['default'].createElement("input", Object.assign({
+  }, /*#__PURE__*/React__default['default'].createElement("input", _extends({
     ref: ref,
-    type: 'text'
+    type: "text"
   }, props, {
     id: name,
     required: required
@@ -3455,36 +3519,36 @@ function FormParameters(_ref) {
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className;
   var hasTypeChoices = typeChoices && typeChoices.length > 1;
-  return React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "form-edit__settings " + className
-  }, React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "w-1/3"
-  }, React__default['default'].createElement(InputText, {
+  }, /*#__PURE__*/React__default['default'].createElement(InputText, {
     label: "Title",
-    placeholder: 'Enter the form title',
+    placeholder: "Enter the form title",
     name: "title",
     required: true,
     value: form.title,
     onChange: onChange
-  })), React__default['default'].createElement("div", {
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "w-1/3"
-  }, React__default['default'].createElement(InputText, {
+  }, /*#__PURE__*/React__default['default'].createElement(InputText, {
     label: "Name",
-    placeholder: 'Enter the form machine name',
+    placeholder: "Enter the form machine name",
     name: "name",
     required: true,
     value: form.name,
     onChange: onChange
-  })), React__default['default'].createElement("div", {
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "w-1/3"
-  }, React__default['default'].createElement(InputText, {
+  }, /*#__PURE__*/React__default['default'].createElement(InputText, {
     label: "Path",
-    placeholder: 'example',
+    placeholder: "example",
     name: "path",
     className: "mb-0",
-    description: React__default['default'].createElement("span", {
+    description: /*#__PURE__*/React__default['default'].createElement("span", {
       className: "text-xxs flex items-center"
-    }, React__default['default'].createElement("i", {
+    }, /*#__PURE__*/React__default['default'].createElement("i", {
       className: "bx bx-link ml-1 mr-1"
     }), window.location.origin + "/" + form.path),
     required: true,
@@ -3494,25 +3558,25 @@ function FormParameters(_ref) {
       width: "120px"
     },
     onChange: onChange
-  })), React__default['default'].createElement("div", {
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "w-1/3"
-  }, React__default['default'].createElement(Select, {
+  }, /*#__PURE__*/React__default['default'].createElement(Select, {
     label: "Display as",
     name: "display",
     value: form.display,
     choices: displayChoices,
     onChange: onChange
-  })), hasTypeChoices && React__default['default'].createElement("div", {
+  })), hasTypeChoices && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "w-1/3"
-  }, React__default['default'].createElement(Select, {
+  }, /*#__PURE__*/React__default['default'].createElement(Select, {
     label: "Type",
     name: "type",
     value: form.type,
     choices: typeChoices,
     onChange: onChange
-  })), enableTags && React__default['default'].createElement("div", {
+  })), enableTags && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "w-1/3"
-  }, React__default['default'].createElement(InputTags, {
+  }, /*#__PURE__*/React__default['default'].createElement(InputTags, {
     label: "Tags",
     name: "tags",
     value: form.tags,
@@ -3705,14 +3769,14 @@ function FormEdit(props) {
   var _props$options = props.options,
       options = _props$options === void 0 ? {} : _props$options,
       builder = props.builder;
-  return React__default['default'].createElement("div", null, React__default['default'].createElement("div", {
-    className: 'form-edit'
-  }, React__default['default'].createElement(FormParameters, Object.assign({}, props, {
+  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "form-edit"
+  }, /*#__PURE__*/React__default['default'].createElement(FormParameters, _extends({}, props, {
     className: "",
     key: "form-settings-" + form._id,
     form: form,
     onChange: setChange
-  })), React__default['default'].createElement(FormEditCTAs, Object.assign({}, props, {
+  })), /*#__PURE__*/React__default['default'].createElement(FormEditCTAs, _extends({}, props, {
     className: "",
     key: "form-edit-ctas-" + form._id,
     options: options,
@@ -3724,7 +3788,7 @@ function FormEdit(props) {
     onReset: reset,
     onCopy: onCopy,
     onSubmit: onSubmit
-  }))), React__default['default'].createElement(FormBuilder, {
+  }))), /*#__PURE__*/React__default['default'].createElement(FormBuilder, {
     key: "form-builder-" + form._id,
     components: form.components,
     display: form.display,
@@ -3883,13 +3947,13 @@ function FormSettings(props) {
     return f;
   };
 
-  return React__default['default'].createElement("div", null, React__default['default'].createElement(Form, {
+  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Form, {
     form: form,
     submission: submission,
     onChange: onChange,
     options: options
-  }), React__default['default'].createElement("button", {
-    "data-testid": 'submit',
+  }), /*#__PURE__*/React__default['default'].createElement("button", {
+    "data-testid": "submit",
     disabled: !isValid,
     className: "mt-5 btn btn-primary",
     onClick: onSubmit,
@@ -3914,7 +3978,7 @@ function SelectColumnFilter(_ref) {
       value: value
     };
   });
-  return React__default['default'].createElement(Select, {
+  return /*#__PURE__*/React__default['default'].createElement(Select, {
     key: "filter-" + column.id,
     name: "filter-" + column.id,
     size: "sm",
@@ -9056,31 +9120,31 @@ function FormsCell(props) {
   var _props$icon = props.icon,
       icon = _props$icon === void 0 ? "server" : _props$icon,
       form = props.row.original;
-  return React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "p-1"
-  }, React__default['default'].createElement("h4", {
+  }, /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "text-primary text-lg flex items-center"
-  }, React__default['default'].createElement("i", {
+  }, /*#__PURE__*/React__default['default'].createElement("i", {
     className: classnames(iconClass(undefined, icon), "mr-1")
-  }), form.title), React__default['default'].createElement("ul", {
-    className: 'reset-list text-gray-500'
-  }, React__default['default'].createElement("li", {
+  }), form.title), /*#__PURE__*/React__default['default'].createElement("ul", {
+    className: "reset-list text-gray-500"
+  }, /*#__PURE__*/React__default['default'].createElement("li", {
     className: "text-sm"
-  }, "Name: ", form.name || form.machineName), React__default['default'].createElement("li", {
-    className: 'mt-5'
-  }, React__default['default'].createElement("span", {
-    className: 'badge bg-light mr-1'
-  }, React__default['default'].createElement("i", {
+  }, "Name: ", form.name || form.machineName), /*#__PURE__*/React__default['default'].createElement("li", {
+    className: "mt-5"
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "badge bg-light mr-1"
+  }, /*#__PURE__*/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("button", {
+  }), /*#__PURE__*/React__default['default'].createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map(function (tag, index) {
+    return /*#__PURE__*/React__default['default'].createElement("button", {
       key: index,
-      className: 'badge badge-hover bg-secondary mr-1',
+      className: "badge badge-hover bg-secondary mr-1",
       onClick: stopPropagationWrapper(function () {
         props.setFilter("tags", tag);
         props.gotoPage(0);
       })
-    }, React__default['default'].createElement("i", {
+    }, /*#__PURE__*/React__default['default'].createElement("i", {
       className: classnames(iconClass(undefined, "tags"), "mr-1")
     }), tag);
   }))));
@@ -9102,7 +9166,7 @@ function FormsTable(_ref) {
       accessor: "title",
       id: "title",
       Cell: function Cell(props) {
-        return React__default['default'].createElement(FormCell, Object.assign({}, props, {
+        return /*#__PURE__*/React__default['default'].createElement(FormCell, _extends({}, props, {
           icon: props.icon,
           i18n: i18n
         }));
@@ -9115,15 +9179,15 @@ function FormsTable(_ref) {
       id: "tags",
       hidden: true,
       Filter: function Filter(props) {
-        return tags && tags.length ? React__default['default'].createElement(SelectColumnFilter, Object.assign({}, props, {
+        return tags && tags.length ? /*#__PURE__*/React__default['default'].createElement(SelectColumnFilter, _extends({}, props, {
           column: _extends({}, props.columns, {
             choices: tags
           })
-        })) : React__default['default'].createElement(DefaultColumnFilter, Object.assign({}, props));
+        })) : /*#__PURE__*/React__default['default'].createElement(DefaultColumnFilter, props);
       }
     }];
   }, [Cell]);
-  return React__default['default'].createElement(Table, Object.assign({}, props, {
+  return /*#__PURE__*/React__default['default'].createElement(Table, _extends({}, props, {
     columns: columns
   }));
 }
@@ -9185,37 +9249,37 @@ function Modal(_ref) {
     return null;
   }
 
-  return React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
     role: "dialog",
     className: "formio-dialog formio-dialog-theme-default " + className
-  }, React__default['default'].createElement("div", {
-    className: 'formio-dialog-overlay',
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "formio-dialog-overlay",
     onClick: onClickClose
-  }), React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
     style: style,
     className: "formio-dialog-content"
-  }, React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "formio-dialog-wrapper"
-  }, title ? React__default['default'].createElement("div", {
+  }, title ? /*#__PURE__*/React__default['default'].createElement("div", {
     className: "formio-dialog-title",
     ref: titleRef,
     "data-testid": "modalTitle"
-  }, title) : null, React__default['default'].createElement("div", {
-    className: 'formio-dialog-body',
+  }, title) : null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "formio-dialog-body",
     style: {
       maxHeight: maxHeight
     },
     "data-testid": "modalBody"
-  }, show && children), ModalFooter ? React__default['default'].createElement("div", {
+  }, show && children), ModalFooter ? /*#__PURE__*/React__default['default'].createElement("div", {
     className: "formio-dialog-footer",
     ref: footerRef,
     "data-testid": "modalFooter"
-  }, React__default['default'].createElement(ModalFooter, Object.assign({}, props, {
+  }, /*#__PURE__*/React__default['default'].createElement(ModalFooter, _extends({}, props, {
     closeModal: closeModal,
     onClose: onClickClose
-  }))) : null), React__default['default'].createElement("button", {
-    className: 'formio-dialog-close float-right btn btn-secondary btn-sm',
-    "aria-label": 'close',
+  }))) : null), /*#__PURE__*/React__default['default'].createElement("button", {
+    className: "formio-dialog-close float-right btn btn-secondary btn-sm",
+    "aria-label": "close",
     "data-testid": "closeModal",
     onClick: onClickClose
   })));
@@ -9230,22 +9294,22 @@ function RemoveModalFooter(_ref) {
       i18n = _ref$i18n === void 0 ? function (f) {
     return f;
   } : _ref$i18n;
-  return React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "flex items-center justify-center bg-white p-2"
-  }, React__default['default'].createElement("button", {
-    "data-testid": 'customCloseModal',
+  }, /*#__PURE__*/React__default['default'].createElement("button", {
+    "data-testid": "customCloseModal",
     className: "btn btn-outline-dark mx-2",
     onClick: onClose
-  }, i18n("Cancel")), React__default['default'].createElement("button", {
+  }, i18n("Cancel")), /*#__PURE__*/React__default['default'].createElement("button", {
     disabled: valueToCompare !== value,
-    "data-testid": 'customSubmitModal',
+    "data-testid": "customSubmitModal",
     className: "btn btn-danger mx-2",
     onClick: function onClick(e) {
       if (valueToCompare === value) {
         onSubmit(e);
       }
     }
-  }, React__default['default'].createElement("i", {
+  }, /*#__PURE__*/React__default['default'].createElement("i", {
     className: classnames(iconClass(undefined, "trash"), "mr-2")
   }), i18n("Remove")));
 }
@@ -9265,7 +9329,7 @@ function RemoveModal(_ref2) {
       value = _useState[0],
       setValue = _useState[1];
 
-  return React__default['default'].createElement(Modal, Object.assign({}, props, {
+  return /*#__PURE__*/React__default['default'].createElement(Modal, _extends({}, props, {
     className: classnames(props.className, "formio-dialog-theme-remove"),
     style: {
       maxWidth: maxWidth
@@ -9273,12 +9337,12 @@ function RemoveModal(_ref2) {
     title: "Drop " + ((_props$itemType = props.itemType) == null ? void 0 : _props$itemType.toLowerCase()),
     value: value,
     footer: RemoveModalFooter
-  }), React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "px-4 pt-3 pb-5"
-  }, React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "pb-1"
-  }, 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',
+  }, children, i18n("To drop"), " ", /*#__PURE__*/React__default['default'].createElement("strong", null, props.valueToCompare), ",\xA0", i18n("type the"), "\xA0", /*#__PURE__*/React__default['default'].createElement("strong", null, "\"", (_props$itemType2 = props.itemType) == null ? void 0 : _props$itemType2.toLowerCase(), "\""), "\xA0", i18n("name"), " ", /*#__PURE__*/React__default['default'].createElement("strong", null, "\"", props.valueToCompare, "\""), "."), /*#__PURE__*/React__default['default'].createElement(InputText, {
+    name: "remove",
     value: value,
     onChange: function onChange(name, value) {
       return setValue(value);
@@ -9301,12 +9365,9 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
     var _this;
 
     _this = _Components$component.call(this, component, options, data) || this;
-    /**
-     * The user has changed the value in the component and the value needs to be updated on the main submission object and other components notified of a change event.
-     *
-     * @param value
-     * @param flags
-     */
+    _this.reactInstance = void 0;
+    _this.shouldSetValue = void 0;
+    _this.dataForSetting = void 0;
 
     _this.updateValue = function (value, flags) {
       flags = flags || {};
@@ -9372,9 +9433,11 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
       // It can load a single element or multiple elements with the same ref.
 
 
-      _this3.loadRefs(element, (_this3$loadRefs = {}, _this3$loadRefs["react-" + _this3.id] = "single", _this3$loadRefs));
+      _this3.loadRefs(element, (_this3$loadRefs = {}, _this3$loadRefs["react-" + _this3.id] = "single", _this3$loadRefs)); // @ts-ignore
+
 
       if (_this3.refs["react-" + _this3.id]) {
+        // @ts-ignore
         _this3.reactInstance = _this3.attachReact(_this3.refs["react-" + _this3.id]);
 
         if (_this3.shouldSetValue) {
@@ -9396,7 +9459,9 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
   ;
 
   _proto.detach = function detach() {
+    // @ts-ignore
     if (this.refs["react-" + this.id]) {
+      // @ts-ignore
       this.detachReact(this.refs["react-" + this.id]);
     }
 
@@ -9439,7 +9504,6 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
    * @param value
    * @param flags
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ;
 
   _proto.setValue = function setValue(value, flags) {
@@ -9453,15 +9517,21 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
       this.dataForSetting = value;
     }
 
-    return undefined;
+    return false;
   }
   /**
-   * Get the current value of the component. Should return the value set in the react component.
+   * The user has changed the value in the component and the value needs to be updated on the main submission object and other components notified of a change event.
    *
-   * @returns {*}
+   * @param value
+   * @param flags
    */
   ;
 
+  /**
+   * Get the current value of the component. Should return the value set in the react component.
+   *
+   * @returns {*}
+   */
   _proto.getValue = function getValue() {
     if (this.reactInstance) {
       return this.reactInstance.state.value;
@@ -9512,32 +9582,32 @@ function DefaultCell(_ref) {
   } : _ref$render;
 
   if (value === undefined) {
-    return React__default['default'].createElement(React__default['default'].Fragment, null);
+    return /*#__PURE__*/React__default['default'].createElement(Fragment, null);
   }
 
   var rendered = render(value);
 
   if (value !== rendered) {
-    return React__default['default'].createElement("div", {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
       dangerouslySetInnerHTML: {
         __html: rendered
       }
     });
   }
 
-  return React__default['default'].createElement("span", null, String(value));
+  return /*#__PURE__*/React__default['default'].createElement("span", null, String(value));
 }
 
 function mapFormToColumns(form) {
   var columns = [];
   FormioUtils__default['default'].eachComponent(form.components, function (component) {
     if (component.tableView && component.key) {
-      var cmp = formiojs.Components.create(component, null, null, true);
+      var cmp = formiojs.Components.create(component, {}, null, true);
       var column = {
         Header: component.label || component.title || component.key,
         accessor: "data." + component.key,
         Cell: function Cell(props) {
-          return React__default['default'].createElement(DefaultCell, Object.assign({}, props, {
+          return /*#__PURE__*/React__default['default'].createElement(DefaultCell, _extends({}, props, {
             render: function render(value) {
               return cmp.asString(value);
             }
@@ -9560,10 +9630,8 @@ function SubmissionsTable(_ref) {
   var form = _ref.form,
       props = _objectWithoutPropertiesLoose(_ref, ["form"]);
 
-  var columns = React__default['default'].useMemo(function () {
-    return form && mapFormToColumns(form);
-  }, [form]);
-  return React__default['default'].createElement(Table, Object.assign({}, props, {
+  var columns = form && mapFormToColumns(form);
+  return /*#__PURE__*/React__default['default'].createElement(Table, _extends({}, props, {
     columns: columns
   }));
 }
@@ -9587,15 +9655,15 @@ function SliderColumnFilter(_ref) {
       min = _React$useMemo[0],
       max = _React$useMemo[1];
 
-  return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement("input", {
-    type: 'range',
+  return /*#__PURE__*/React__default['default'].createElement(Fragment, null, /*#__PURE__*/React__default['default'].createElement("input", {
+    type: "range",
     min: min,
     max: max,
     value: filterValue || min,
     onChange: function onChange(e) {
       setFilter(parseInt(e.target.value, 10));
     }
-  }), React__default['default'].createElement("button", {
+  }), /*#__PURE__*/React__default['default'].createElement("button", {
     onClick: function onClick() {
       return setFilter(undefined);
     }
@@ -9611,18 +9679,18 @@ function ButtonTab(_ref) {
       children = _ref.children,
       className = _ref.className,
       after = _ref.after;
-  return React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
     title: 'button-wrapper',
     className: classnames("tw-tabs__button-wrapper", isActive ? "-active" : "", back ? "-back" : "", className)
-  }, React__default['default'].createElement("button", {
+  }, /*#__PURE__*/React__default['default'].createElement("button", {
     title: 'button-tab',
     className: classnames("tw-tabs__button", reverse ? "-reverse" : "", isActive ? "-active" : "", back ? "-back" : ""),
     onClick: onClick
-  }, icon && React__default['default'].createElement("i", {
+  }, icon && /*#__PURE__*/React__default['default'].createElement("i", {
     className: classnames(iconClass(undefined, icon), "tw-tabs__button-icon")
-  }), React__default['default'].createElement("span", {
+  }), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "tw-tabs__button-label"
-  }, children), after), React__default['default'].createElement("div", {
+  }, children), after), /*#__PURE__*/React__default['default'].createElement("div", {
     className: classnames("tw-tabs__button-border", isActive ? "-active" : "")
   }));
 }
@@ -9644,20 +9712,20 @@ function Tabs(_ref2) {
   } : _ref2$i18n,
       additionalProps = _objectWithoutPropertiesLoose(_ref2, ["style", "current", "items", "children", "HeaderChildren", "AddButton", "Button", "className", "onClick", "i18n"]);
 
-  return React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
     "data-testid": 'tabs-comp',
     className: "tw-tabs " + className,
     style: style
-  }, React__default['default'].createElement("div", null, React__default['default'].createElement("nav", {
-    className: 'tw-tabs__header'
-  }, React__default['default'].createElement("div", {
-    className: 'tw-tabs__header-wrapper'
-  }, React__default['default'].createElement("div", {
-    className: 'tw-tabs__header-border'
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("nav", {
+    className: "tw-tabs__header"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "tw-tabs__header-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "tw-tabs__header-border"
   }), items.filter(function (item) {
     return item.label || item.icon;
   }).map(function (item, index) {
-    return React__default['default'].createElement(Button, Object.assign({
+    return /*#__PURE__*/React__default['default'].createElement(Button, _extends({
       key: index,
       back: item.back,
       isActive: (current == null ? void 0 : current.action) === item.action,
@@ -9665,12 +9733,12 @@ function Tabs(_ref2) {
       onClick: function onClick() {
         _onClick && _onClick(item);
       }
-    }, additionalProps, item), i18n(item.label));
-  }), AddButton && React__default['default'].createElement(AddButton, Object.assign({}, additionalProps, {
+    }, additionalProps, item), i18n(item.label || ""));
+  }), AddButton && /*#__PURE__*/React__default['default'].createElement(AddButton, _extends({}, additionalProps, {
     current: current
-  })))), HeaderChildren && React__default['default'].createElement(HeaderChildren, Object.assign({}, additionalProps, {
+  })))), HeaderChildren && /*#__PURE__*/React__default['default'].createElement(HeaderChildren, _extends({}, additionalProps, {
     current: current
-  }))), React__default['default'].createElement("div", {
+  }))), /*#__PURE__*/React__default['default'].createElement("div", {
     title: "tab-body",
     className: "tw-tabs__body"
   }, children));
@@ -9686,9 +9754,9 @@ function Loader(_ref) {
       className = _ref$className === void 0 ? "" : _ref$className;
 
   if (isActive) {
-    return React__default['default'].createElement("div", {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
       className: classnames("opacity-85 z-20 flex items-center justify-center p-5 absolute top-0 right-0 left-0 bottom-0 bg-white", className)
-    }, React__default['default'].createElement("span", {
+    }, /*#__PURE__*/React__default['default'].createElement("span", {
       "data-testid": "icon_" + icon,
       color: color,
       className: "text-11xl " + iconClass(undefined, icon, true)