@tsed/react-formio 1.12.0 → 1.13.2

package/dist/index.modern.js

@@ -361,7 +361,7 @@ function checkRoleFormAccess(auth, form, roles) {
       return true;
     }
 
-    return !!(roles.includes("owner") && get(form, "owner") === get(auth, "user._id"));
+    return roles.includes("owner") && get(form, "owner") === get(auth, "user._id");
   }
 
   return true;
@@ -1191,24 +1191,24 @@ function FormControl({
   label,
   className
 }) {
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     id: `form-group-${name || ""}`,
     className: classnames("form-group", className)
-  }, label && React.createElement("label", {
+  }, label && /*#__PURE__*/React.createElement("label", {
     htmlFor: name,
     className: `col-form-label ${required ? " field-required" : ""}`
-  }, label), React.createElement("div", {
+  }, label), /*#__PURE__*/React.createElement("div", {
     className: "input-group"
-  }, prefix && React.createElement("div", {
-    className: 'input-group-prepend'
-  }, React.createElement("span", {
-    className: 'input-group-text'
-  }, prefix)), children, suffix && React.createElement("div", {
-    className: 'input-group-append'
-  }, React.createElement("span", {
-    className: 'input-group-text'
-  }, suffix))), description && React.createElement("div", {
-    className: 'form-text text-muted'
+  }, prefix && /*#__PURE__*/React.createElement("div", {
+    className: "input-group-prepend"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "input-group-text"
+  }, prefix)), children, suffix && /*#__PURE__*/React.createElement("div", {
+    className: "input-group-append"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "input-group-text"
+  }, suffix))), description && /*#__PURE__*/React.createElement("div", {
+    className: "form-text text-muted"
   }, description));
 }
 FormControl.propTypes = {
@@ -1256,7 +1256,7 @@ function Select(_ref) {
     label: placeholder,
     value: ""
   }, ...choices];
-  return React.createElement(FormControl, {
+  return /*#__PURE__*/React.createElement(FormControl, {
     name: name,
     label: label,
     required: required,
@@ -1264,7 +1264,7 @@ function Select(_ref) {
     prefix: prefix,
     suffix: suffix,
     shadow: false
-  }, React.createElement("select", Object.assign({
+  }, /*#__PURE__*/React.createElement("select", _extends({
     ref: ref
   }, props, {
     "data-testid": `select_${name}`,
@@ -1275,13 +1275,13 @@ function Select(_ref) {
     value: value || "",
     placeholder: placeholder,
     onChange: event => {
-      onChange(name, getEventValue(event));
+      onChange && onChange(name, getEventValue(event));
     }
   }), choices.map(({
     label,
     value
   }) => {
-    return React.createElement("option", {
+    return /*#__PURE__*/React.createElement("option", {
       key: String(value),
       label: label,
       value: value
@@ -1356,8 +1356,8 @@ function PaginationButton(props) {
   } = props,
         otherProps = _objectWithoutPropertiesLoose(props, ["component", "children", "disabled", "active"]);
 
-  return React.createElement(Component, Object.assign({}, otherProps, {
-    "data-testid": 'pagination-button',
+  return /*#__PURE__*/React.createElement(Component, _extends({}, otherProps, {
+    "data-testid": "pagination-button",
     disabled: disabled,
     className: classnames("page-link", disabled ? "disabled" : "", active ? "" : "", props.className)
   }), children);
@@ -1388,56 +1388,56 @@ function Pagination(props) {
     value,
     label: value
   }));
-  return React.createElement("nav", {
-    "aria-label": 'Page navigation',
+  return /*#__PURE__*/React.createElement("nav", {
+    "aria-label": "Page navigation",
     className: classnames("pagination-group -mb-3", className)
-  }, React.createElement("ul", {
-    className: 'pagination mb-3 mr-3'
-  }, React.createElement("li", {
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "pagination mb-3 mr-3"
+  }, /*#__PURE__*/React.createElement("li", {
     className: classnames("page-item", !canPreviousPage && "disabled")
-  }, React.createElement(PaginationButton, {
+  }, /*#__PURE__*/React.createElement(PaginationButton, {
     tabIndex: -1,
     disabled: !canPreviousPage,
     onClick: () => previousPage()
   }, i18n("Previous"))), pageNumbers.map(page => {
     if ([LEFT_PAGE, RIGHT_PAGE].includes(page)) {
-      return React.createElement("li", {
-        className: 'page-item',
+      return /*#__PURE__*/React.createElement("li", {
+        className: "page-item",
         key: page
-      }, React.createElement(PaginationButton, {
-        "aria-hidden": 'true'
+      }, /*#__PURE__*/React.createElement(PaginationButton, {
+        "aria-hidden": "true"
       }, "..."));
     }
 
     const active = page - 1 === pageIndex;
-    return React.createElement("li", {
+    return /*#__PURE__*/React.createElement("li", {
       className: classnames("page-item", active && "active"),
       key: page
-    }, React.createElement(PaginationButton, {
+    }, /*#__PURE__*/React.createElement(PaginationButton, {
       tabIndex: pageIndex,
       active: active,
       onClick: () => gotoPage(page - 1)
     }, page));
-  }), React.createElement("li", {
+  }), /*#__PURE__*/React.createElement("li", {
     className: classnames("page-item", !canNextPage && "disabled")
-  }, React.createElement(PaginationButton, {
+  }, /*#__PURE__*/React.createElement(PaginationButton, {
     tabIndex: pageNumbers.length,
     disabled: !canNextPage,
     onClick: () => nextPage()
-  }, i18n("Next")))), React.createElement("li", {
-    className: 'mb-3 mr-3 flex items-center'
-  }, React.createElement(Select, {
+  }, i18n("Next")))), /*#__PURE__*/React.createElement("li", {
+    className: "mb-3 mr-3 flex items-center"
+  }, /*#__PURE__*/React.createElement(Select, {
     name: "page",
     value: pageSize,
     choices: choices,
     onChange: (name, value) => {
       setPageSize(+value);
     }
-  }), React.createElement("span", {
+  }), /*#__PURE__*/React.createElement("span", {
     className: "ml-3"
-  }, i18n("items per page"))), pageOptions && React.createElement("li", {
+  }, i18n("items per page"))), pageOptions && /*#__PURE__*/React.createElement("li", {
     className: "mb-3 flex items-center"
-  }, React.createElement("span", null, i18n("Page"), "\u00A0"), React.createElement("strong", null, pageIndex + 1, " of ", pageOptions.length)));
+  }, /*#__PURE__*/React.createElement("span", null, i18n("Page"), "\xA0"), /*#__PURE__*/React.createElement("strong", null, pageIndex + 1, " of ", pageOptions.length)));
 }
 
 function DefaultArrowSort({
@@ -1447,9 +1447,9 @@ function DefaultArrowSort({
     isSorted,
     isSortedDesc
   } = column;
-  return React.createElement("span", {
+  return /*#__PURE__*/React.createElement("span", {
     className: "table-arrow-sort"
-  }, isSorted ? React.createElement("i", {
+  }, isSorted ? /*#__PURE__*/React.createElement("i", {
     className: iconClass(undefined, isSortedDesc ? "sort-up" : "sort-down")
   }) : "");
 }
@@ -1457,12 +1457,12 @@ function DefaultArrowSort({
 function DefaultCellHeader({
   column
 }) {
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "table-cell-header"
-  }, React.createElement("div", Object.assign({
-    className: 'table-cell-header__label'
-  }, column.getSortByToggleProps()), React.createElement("span", null, column.render("Header")), column.render("ArrowSort")), column.canFilter ? React.createElement("div", {
-    className: 'table-cell-header__filter'
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    className: "table-cell-header__label"
+  }, column.getSortByToggleProps()), /*#__PURE__*/React.createElement("span", null, column.render("Header")), column.render("ArrowSort")), column.canFilter ? /*#__PURE__*/React.createElement("div", {
+    className: "table-cell-header__filter"
   }, column.render("Filter")) : null);
 }
 
@@ -1496,11 +1496,11 @@ function InputText(_ref) {
       props = _objectWithoutPropertiesLoose(_ref, ["name", "value", "label", "onChange", "required", "size", "type", "prefix", "suffix", "description", "className", "placeholder"]);
 
   const [localValue, setValue] = useState(value);
-  const change = useMemo(() => callLast(onChange, 300), [onChange]);
+  const change = useMemo(() => onChange && callLast(onChange, 300), [onChange]);
   useEffect(() => {
     setValue(value);
   }, [value]);
-  return React.createElement(FormControl, {
+  return /*#__PURE__*/React.createElement(FormControl, {
     name: name,
     label: label,
     required: required,
@@ -1508,19 +1508,19 @@ function InputText(_ref) {
     prefix: prefix,
     suffix: suffix,
     className: className
-  }, React.createElement("input", Object.assign({
+  }, /*#__PURE__*/React.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: event => {
       const value = getEventValue(event);
       setValue(value);
-      return change(name, value);
+      return change && change(name, value);
     }
   })));
 }
@@ -1552,7 +1552,7 @@ function DefaultColumnFilter(props) {
     setFilterId(id);
     setFilter(value || undefined);
   }, [id, setValue, setFilterId, setFilter]);
-  return React.createElement(InputText, {
+  return /*#__PURE__*/React.createElement(InputText, {
     size: "sm",
     id: id,
     name: id,
@@ -1581,12 +1581,12 @@ function DefaultOperationButton(props) {
     title = "",
     i18n = f => f
   } = props;
-  return React.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", {
     className: classnames(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), `btn-${buttonSize}`),
     onClick: stopPropagationWrapper(() => onClick(action))
-  }, icon ? React.createElement(React.Fragment, null, React.createElement("i", {
+  }, icon ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("i", {
     className: iconClass(undefined, icon)
-  }), " ", title && " ") : null, title && React.createElement("span", {
+  }), " ", title && " ") : null, title && /*#__PURE__*/React.createElement("span", {
     className: icon && title ? "ml-1" : ""
   }, i18n(title)));
 }
@@ -1599,8 +1599,8 @@ function DefaultCellOperations({
   i18n
 }) {
   const data = row.original;
-  return React.createElement("div", {
-    className: 'btn-group'
+  return /*#__PURE__*/React.createElement("div", {
+    className: "btn-group"
   }, operations.filter(({
     permissionsResolver
   }) => !permissionsResolver || permissionsResolver(data, ctx)).map(_ref => {
@@ -1609,7 +1609,7 @@ function DefaultCellOperations({
     } = _ref,
         operation = _objectWithoutPropertiesLoose(_ref, ["OperationButton"]);
 
-    return React.createElement(OperationButton, Object.assign({
+    return /*#__PURE__*/React.createElement(OperationButton, _extends({
       key: operation.action
     }, operation, {
       onClick: action => onClick(data, action),
@@ -1636,10 +1636,10 @@ function useOperations({
       return [...columns, {
         id: "operations",
         groupByBoundary: true,
-        Header: () => React.createElement("div", {
+        Header: () => /*#__PURE__*/React.createElement("div", {
           className: "text-center"
         }, i18n("Operations")),
-        Cell: props => React.createElement(CellOperations, Object.assign({}, props, {
+        Cell: props => /*#__PURE__*/React.createElement(CellOperations, _extends({}, props, {
           operations: operations,
           onClick: onClick,
           ctx: ctx,
@@ -1661,14 +1661,14 @@ function getOperationCallback(operations, onClick) {
 }
 
 function DefaultLoader() {
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "text-center p-2 pb-4 font-bold"
   }, "Loading in progress");
 }
 
 function DefaultEmptyData() {
-  return React.createElement("div", {
-    className: 'text-center p-2 pb-4 font-bold'
+  return /*#__PURE__*/React.createElement("div", {
+    className: "text-center p-2 pb-4 font-bold"
   }, "No data found");
 }
 
@@ -1753,22 +1753,23 @@ function Table(props) {
     });
   }, [onChange, pageIndex, pageSize, sortBy, filters, filterId]); // Render the UI for your table
 
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: classnames("table-group table-responsive", className)
-  }, React.createElement("table", Object.assign({
+  }, /*#__PURE__*/React.createElement("table", _extends({
     className: "table table-striped table-hover"
-  }, tableInstance.getTableProps()), React.createElement("thead", null, tableInstance.headerGroups.map((headerGroup, i) => React.createElement("tr", Object.assign({
+  }, tableInstance.getTableProps()), /*#__PURE__*/React.createElement("thead", null, tableInstance.headerGroups.map((headerGroup, i) => /*#__PURE__*/React.createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
     key: `tableInstance.headerGroups${i}`
-  }, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(column => React.createElement("th", Object.assign({
+  }), headerGroup.headers.map(column => /*#__PURE__*/React.createElement("th", _extends({}, column.getHeaderProps(), {
     key: `tableInstance.headers.column.${column.id}`
-  }, column.getHeaderProps()), React.createElement(CellHeader, {
+  }), /*#__PURE__*/React.createElement(CellHeader, {
     column: column
-  })))))), !isLoading ? React.createElement("tbody", Object.assign({}, tableInstance.getTableBodyProps()), tableInstance.page.map(row => {
+  })))))), !isLoading ? /*#__PURE__*/React.createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map(row => {
     tableInstance.prepareRow(row);
-    return React.createElement("tr", Object.assign({
-      key: `tableInstance.page.${row.id}`,
+    return /*#__PURE__*/React.createElement("tr", _extends({
       onClick: () => _onClick(row.original, "row")
-    }, row.getRowProps()), row.cells.map((cell, i) => {
+    }, row.getRowProps(), {
+      key: `tableInstance.page.${row.id}`
+    }), row.cells.map((cell, i) => {
       const {
         hidden,
         colspan
@@ -1778,14 +1779,15 @@ function Table(props) {
         return null;
       }
 
-      return React.createElement("td", Object.assign({
-        key: `tableInstance.page.cells.${cell.value || "value"}.${i}`,
+      return /*#__PURE__*/React.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.createElement(Loader, null) : null, !data.length ? React.createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? React.createElement("div", {
+  })) : null), isLoading ? /*#__PURE__*/React.createElement(Loader, null) : null, !data.length ? /*#__PURE__*/React.createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? /*#__PURE__*/React.createElement("div", {
     className: "overflow-hidden"
-  }, React.createElement(Pagination$1, Object.assign({}, tableInstance, {
+  }, /*#__PURE__*/React.createElement(Pagination$1, _extends({}, tableInstance, {
     className: "text-sm",
     pageIndex: pageIndex,
     pageSize: pageSize,
@@ -1815,13 +1817,13 @@ function ActionsTable(_ref) {
       id: "title"
     }];
   }, []);
-  return React.createElement(Table, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
     disableFilters: disableFilters,
     disablePagination: disablePagination,
     columns: columns
-  }), React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "pagination-group"
-  }, React.createElement(Select, {
+  }, /*#__PURE__*/React.createElement(Select, {
     name: "actions",
     value: currentAction,
     choices: [{
@@ -1829,15 +1831,15 @@ function ActionsTable(_ref) {
       value: ""
     }].concat(availableActions),
     onChange: (name, action) => setAction(action)
-  }), React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "pl-3"
-  }, React.createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     "data-testid": "submit",
     disabled: currentAction === "",
     className: "btn btn-success",
     onClick: () => currentAction && onAddAction(currentAction),
     type: "submit"
-  }, React.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: classnames(iconClass(undefined, "plus"), "mr-1")
   }), " ", i18n("Add action")))));
 }
@@ -1854,9 +1856,9 @@ function formatError(error) {
   if (Object.prototype.hasOwnProperty.call(error, "errors")) {
     return Object.keys(error.errors).map((key, index) => {
       const item = error.errors[key];
-      return React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         key: index
-      }, React.createElement("strong", null, item.name, " (", item.path, ")"), " ", "- ", item.message);
+      }, /*#__PURE__*/React.createElement("strong", null, item.name, " (", item.path, ")"), " ", "- ", item.message);
     });
   } // If this is a standard error.
 
@@ -1868,7 +1870,7 @@ function formatError(error) {
 
   if (Object.prototype.hasOwnProperty.call(error, "name") && error.name === "ValidationError") {
     return error.details.map((item, index) => {
-      return React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         key: index
       }, item.message);
     });
@@ -1890,9 +1892,9 @@ function Alert({
     return null;
   }
 
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: `alert alert-${type}`,
-    role: 'alert'
+    role: "alert"
   }, formatError(error));
 }
 
@@ -1901,18 +1903,46 @@ function Card({
   label,
   className
 }) {
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: classnames("card", className)
-  }, React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "card-header "
-  }, React.createElement("h4", {
+  }, /*#__PURE__*/React.createElement("h4", {
     className: "card-title"
-  }, label)), React.createElement("div", {
+  }, label)), /*#__PURE__*/React.createElement("div", {
     className: "card-body",
     role: "article"
   }, children));
 }
 
+function useDebounce(event, callback, events) {
+  useEffect(() => {
+    callback && events.set(event, callLast(callback, 100));
+  }, [callback, event, events]);
+}
+
+function useEvents(funcs) {
+  const events = useRef(new Map());
+
+  const hasEvent = event => {
+    return funcs.hasOwnProperty(event) && typeof funcs[event] === "function";
+  };
+
+  const emit = (event, ...args) => {
+    if (hasEvent(event)) {
+      const fn = events.current.has(event) ? events.current.get(event) : funcs[event];
+      return fn(...args);
+    }
+  };
+
+  useDebounce("onChange", funcs.onChange, events.current);
+  return {
+    events,
+    emit,
+    hasEvent
+  };
+}
+
 function useForm(props) {
   const {
     src,
@@ -1926,14 +1956,34 @@ function useForm(props) {
   const element = useRef();
   const isLoaded = useRef();
   const instance = useRef();
-  const events = useRef(new Map());
+  const {
+    emit,
+    hasEvent
+  } = useEvents(funcs);
+
+  async function customValidation(submission, callback) {
+    if (hasEvent("onAsyncSubmit")) {
+      try {
+        await emit("onAsyncSubmit", submission, instance.current);
+      } catch (err) {
+        callback((err == null ? void 0 : err.errors) || err);
+      }
+    } else {
+      callback(null);
+    }
+  }
 
   const createWebForm = (srcOrForm, options) => {
     options = Object.assign({}, options);
     srcOrForm = typeof srcOrForm === "string" ? srcOrForm : cloneDeep(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 Form$1(element.current, srcOrForm, options);
       instance.current.onAny((event, ...args) => {
         if (!instance.current) {
@@ -1941,23 +1991,15 @@ function useForm(props) {
         }
 
         if (event.startsWith("formio.")) {
-          const funcName = `on${event.charAt(7).toUpperCase()}${event.slice(8)}`;
+          const eventName = `on${event.charAt(7).toUpperCase()}${event.slice(8)}`;
 
-          if (funcName === "onChange") {
+          if (eventName === "onChange") {
             if (isEqual(get$1(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)) {
-              const fn = callLast(funcs[funcName], 100);
-              events.current.set(funcName, fn);
-            }
-
-            events.current.get(funcName)(...args);
-          }
+          emit(eventName, ...args, instance.current);
         }
       });
       instance.current.ready.then(formio => {
@@ -2012,12 +2054,6 @@ function useForm(props) {
       instance.current && instance.current.destroy(true);
     };
   }, []);
-  useEffect(() => {
-    props.onSubmit && events.current.set("onSubmit", props.onSubmit);
-  }, [props.onSubmit, events]);
-  useEffect(() => {
-    props.onSubmitDone && events.current.set("onSubmitDone", props.onSubmitDone);
-  }, [props.onSubmitDone, events]);
   return {
     element
   };
@@ -2028,8 +2064,8 @@ function Form(props) {
   const {
     element
   } = useForm(props);
-  return React.createElement("div", {
-    "data-testid": "formioContainer" + (props.name || ""),
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": `formioContainer${props.name || ""}`,
     ref: element,
     className: props.className
   });
@@ -2066,7 +2102,8 @@ Form.propTypes = {
     noAlerts: PropTypes.bool,
     i18n: PropTypes.any,
     template: PropTypes.string,
-    saveDraft: PropTypes.bool
+    saveDraft: PropTypes.bool,
+    hooks: PropTypes.any
   }),
   onPrevPage: PropTypes.func,
   onNextPage: PropTypes.func,
@@ -2075,6 +2112,7 @@ Form.propTypes = {
   onCustomEvent: PropTypes.func,
   onComponentChange: PropTypes.func,
   onSubmit: PropTypes.func,
+  onAsyncSubmit: PropTypes.func,
   onSubmitDone: PropTypes.func,
   onFormLoad: PropTypes.func,
   onError: PropTypes.func,
@@ -2216,8 +2254,8 @@ function getAccessPermissionForm({
 function rolesToChoices(roles) {
   return Object.values(roles).map(role => {
     return {
-      label: role.title,
-      value: role._id
+      label: role.title || "",
+      value: role._id || ""
     };
   });
 }
@@ -2227,7 +2265,7 @@ function accessToHash(keys, access = []) {
     o[role.type] = role.roles;
     return o;
   }, {});
-  return keys.reduce((data, key) => {
+  return (keys || []).filter(Boolean).reduce((data, key) => {
     return _extends({}, data, {
       [key]: hash[key] || []
     });
@@ -2326,7 +2364,7 @@ function useFormAccess({
     submissions,
     onChange,
     onSubmit: () => {
-      onSubmit(submissionsToDataAccess(formDefinition, submissions));
+      onSubmit && onSubmit(submissionsToDataAccess(formDefinition, submissions));
     }
   };
 }
@@ -2341,7 +2379,7 @@ function NamedFormAccess({
   children
 }) {
   const [isValid, setIsValid] = useState(true);
-  return React.createElement(React.Fragment, null, React.createElement(Form, {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Form, {
     name: name,
     form: form[name],
     submission: submissions[name],
@@ -2355,11 +2393,11 @@ function NamedFormAccess({
       setIsValid(isValid);
     },
     options: options
-  }), React.createElement("button", {
+  }), /*#__PURE__*/React.createElement("button", {
     disabled: !isValid,
     className: "mt-5 btn btn-primary",
     onClick: onSubmit
-  }, "Save access"), children, React.createElement("div", {
+  }, "Save access"), children, /*#__PURE__*/React.createElement("div", {
     className: "alert alert-warning mt-5"
   }, "Elevated permissions allow users to access and modify other user's entities. Assign with caution."));
 }
@@ -2373,43 +2411,43 @@ function FormAccess(props) {
     onChange,
     onSubmit
   } = useFormAccess(props);
-  return React.createElement("div", null, props.children, React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", null, props.children, /*#__PURE__*/React.createElement("div", {
     className: "flex mb-5"
-  }, React.createElement(Card, {
+  }, /*#__PURE__*/React.createElement(Card, {
     label: "Manage submission access",
     className: "flex-1"
-  }, React.createElement(NamedFormAccess, {
+  }, /*#__PURE__*/React.createElement(NamedFormAccess, {
     name: "submissionAccess",
     form: form,
     submissions: submissions,
     onChange: onChange,
     onSubmit: onSubmit,
     options: options
-  }, props.children)), React.createElement("div", {
+  }, props.children)), /*#__PURE__*/React.createElement("div", {
     className: "w-1/4 pl-4"
-  }, React.createElement(Card, {
+  }, /*#__PURE__*/React.createElement(Card, {
     label: "About Submission Data Permissions"
-  }, React.createElement("p", null, "Submission Data Permissions allow you to control who can create, view, and modify form submission data."), React.createElement("ul", {
+  }, /*#__PURE__*/React.createElement("p", null, "Submission Data Permissions allow you to control who can create, view, and modify form submission data."), /*#__PURE__*/React.createElement("ul", {
     className: "mt-5 pl-7 list-disc"
-  }, React.createElement("li", {
+  }, /*#__PURE__*/React.createElement("li", {
     className: "pb-2"
-  }, React.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.createElement("li", null, React.createElement("strong", null, "All Permissions"), " - These permissions apply to all submission data regardless of who owns it."))))), React.createElement("div", {
+  }, /*#__PURE__*/React.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.createElement("li", null, /*#__PURE__*/React.createElement("strong", null, "All Permissions"), " - These permissions apply to all submission data regardless of who owns it."))))), /*#__PURE__*/React.createElement("div", {
     className: "flex mb-5"
-  }, React.createElement(Card, {
+  }, /*#__PURE__*/React.createElement(Card, {
     label: `Manage ${type} definition access`,
     className: "flex-1"
-  }, React.createElement(NamedFormAccess, {
+  }, /*#__PURE__*/React.createElement(NamedFormAccess, {
     name: "access",
     form: form,
     submissions: submissions,
     onChange: onChange,
     onSubmit: onSubmit,
     options: options
-  }, props.children)), React.createElement("div", {
+  }, props.children)), /*#__PURE__*/React.createElement("div", {
     className: "w-1/4 pl-4"
-  }, React.createElement(Card, {
+  }, /*#__PURE__*/React.createElement(Card, {
     label: "About Form Definition Access"
-  }, React.createElement("p", null, "These permissions allow you to give access to a single form's JSON definition so they can render the form."), React.createElement("p", null, "Typically you will want to allow all of your roles to be able to Read the form definition."), React.createElement("p", null, "Each form also has an owner at ", React.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.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.createElement("p", null, "Typically you will want to allow all of your roles to be able to Read the form definition."), /*#__PURE__*/React.createElement("p", null, "Each form also has an owner at ", /*#__PURE__*/React.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.string.isRequired,
@@ -2467,7 +2505,7 @@ function FormAction(_ref2) {
       }
     };
   }, [props.submission, actionInfo.settingsForm]);
-  return React.createElement("div", null, children, React.createElement(Form, {
+  return /*#__PURE__*/React.createElement("div", null, children, /*#__PURE__*/React.createElement(Form, {
     form: form,
     submission: submission,
     onSubmit: onSubmit,
@@ -2514,6 +2552,8 @@ async function createBuilder(el, {
 class FormBuilder extends React.Component {
   constructor(props) {
     super(props);
+    this.elRef = void 0;
+    this.builderRef = void 0;
     this.state = {
       display: props.display,
       components: cloneDeep(props.components)
@@ -2590,17 +2630,17 @@ class FormBuilder extends React.Component {
     }, () => {
       var _this$props;
 
-      (_this$props = this.props) == null ? void 0 : _this$props.onChange(components);
+      ((_this$props = this.props) == null ? void 0 : _this$props.onChange) && this.props.onChange(components);
     });
   }
 
   render() {
-    return React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       ref: ref => {
         this.elRef = ref;
       },
       onClick: e => e.stopPropagation()
-    }, React.createElement("div", null));
+    }, /*#__PURE__*/React.createElement("div", null));
   }
 
 }
@@ -2670,37 +2710,37 @@ function FormEditCTAs({
     placement: "top",
     title: t("Reset all changes")
   });
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "form-edit__actions"
-  }, React.createElement("div", null, React.createElement("button", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
     className: `btn btn-primary btn-save flex ${disabled ? "disabled" : ""}`,
     disabled: disabled,
-    onClick: () => !disabled && onSubmit()
-  }, React.createElement("i", {
+    onClick: () => !disabled && onSubmit && onSubmit()
+  }, /*#__PURE__*/React.createElement("i", {
     className: `mr-1 ${iconClass(options.iconset, "save")}`
-  }), saveText), React.createElement("div", null, React.createElement("button", {
+  }), saveText), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
     className: `btn btn-light btn-undo ${hasUndo ? "" : "disabled"}`,
-    onClick: () => onUndo(),
+    onClick: () => onUndo && onUndo(),
     ref: undoTooltipRef
-  }, React.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: iconClass(options.iconset, "undo")
-  })), React.createElement("button", {
+  })), /*#__PURE__*/React.createElement("button", {
     className: `btn btn-light btn-redo ${hasRedo ? "" : "disabled"}`,
-    onClick: () => onRedo(),
+    onClick: () => onRedo && onRedo(),
     ref: redoTooltipRef
-  }, React.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: iconClass(options.iconset, "redo")
-  }))), React.createElement("div", null, onCopy && React.createElement("button", {
-    className: 'btn btn-light',
+  }))), /*#__PURE__*/React.createElement("div", null, onCopy && /*#__PURE__*/React.createElement("button", {
+    className: "btn btn-light",
     onClick: () => onCopy(),
     ref: copyTooltipRef
-  }, React.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: iconClass(options.iconset, "copy")
-  })), React.createElement("button", {
+  })), /*#__PURE__*/React.createElement("button", {
     className: `btn btn-light btn-reset`,
-    onClick: () => onReset(),
+    onClick: () => onReset && onReset(),
     ref: resetTooltipRef
-  }, React.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: iconClass(options.iconset, "reset")
   })))));
 }
@@ -2737,25 +2777,25 @@ function InputTags(_ref) {
     });
     instance.setValue([].concat(value, []));
     instance.passedElement.element.addEventListener("addItem", event => {
-      onChange(name, uniq(value.concat(event.detail.value)));
+      onChange && onChange(name, uniq(value.concat(event.detail.value)));
     });
     instance.passedElement.element.addEventListener("removeItem", event => {
-      onChange(name, value.filter(v => v !== event.detail.value));
+      onChange && onChange(name, value.filter(v => v !== event.detail.value));
     });
     return () => {
       instance.destroy();
     };
   }, []);
-  return React.createElement(FormControl, {
+  return /*#__PURE__*/React.createElement(FormControl, {
     name: name,
     label: label,
     required: required,
     description: description,
     prefix: prefix,
     suffix: suffix
-  }, React.createElement("input", Object.assign({
+  }, /*#__PURE__*/React.createElement("input", _extends({
     ref: ref,
-    type: 'text'
+    type: "text"
   }, props, {
     id: name,
     required: required
@@ -2788,36 +2828,36 @@ function FormParameters({
   className = ""
 }) {
   const hasTypeChoices = typeChoices && typeChoices.length > 1;
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: `form-edit__settings ${className}`
-  }, React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "w-1/3"
-  }, React.createElement(InputText, {
+  }, /*#__PURE__*/React.createElement(InputText, {
     label: "Title",
-    placeholder: 'Enter the form title',
+    placeholder: "Enter the form title",
     name: "title",
     required: true,
     value: form.title,
     onChange: onChange
-  })), React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "w-1/3"
-  }, React.createElement(InputText, {
+  }, /*#__PURE__*/React.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.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "w-1/3"
-  }, React.createElement(InputText, {
+  }, /*#__PURE__*/React.createElement(InputText, {
     label: "Path",
-    placeholder: 'example',
+    placeholder: "example",
     name: "path",
     className: "mb-0",
-    description: React.createElement("span", {
+    description: /*#__PURE__*/React.createElement("span", {
       className: "text-xxs flex items-center"
-    }, React.createElement("i", {
+    }, /*#__PURE__*/React.createElement("i", {
       className: "bx bx-link ml-1 mr-1"
     }), window.location.origin + "/" + form.path),
     required: true,
@@ -2827,25 +2867,25 @@ function FormParameters({
       width: "120px"
     },
     onChange: onChange
-  })), React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "w-1/3"
-  }, React.createElement(Select, {
+  }, /*#__PURE__*/React.createElement(Select, {
     label: "Display as",
     name: "display",
     value: form.display,
     choices: displayChoices,
     onChange: onChange
-  })), hasTypeChoices && React.createElement("div", {
+  })), hasTypeChoices && /*#__PURE__*/React.createElement("div", {
     className: "w-1/3"
-  }, React.createElement(Select, {
+  }, /*#__PURE__*/React.createElement(Select, {
     label: "Type",
     name: "type",
     value: form.type,
     choices: typeChoices,
     onChange: onChange
-  })), enableTags && React.createElement("div", {
+  })), enableTags && /*#__PURE__*/React.createElement("div", {
     className: "w-1/3"
-  }, React.createElement(InputTags, {
+  }, /*#__PURE__*/React.createElement(InputTags, {
     label: "Tags",
     name: "tags",
     value: form.tags,
@@ -3033,14 +3073,14 @@ function FormEdit(props) {
     options = {},
     builder
   } = props;
-  return React.createElement("div", null, React.createElement("div", {
-    className: 'form-edit'
-  }, React.createElement(FormParameters, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "form-edit"
+  }, /*#__PURE__*/React.createElement(FormParameters, _extends({}, props, {
     className: "",
     key: `form-settings-${form._id}`,
     form: form,
     onChange: setChange
-  })), React.createElement(FormEditCTAs, Object.assign({}, props, {
+  })), /*#__PURE__*/React.createElement(FormEditCTAs, _extends({}, props, {
     className: "",
     key: `form-edit-ctas-${form._id}`,
     options: options,
@@ -3052,7 +3092,7 @@ function FormEdit(props) {
     onReset: reset,
     onCopy: onCopy,
     onSubmit: onSubmit
-  }))), React.createElement(FormBuilder, {
+  }))), /*#__PURE__*/React.createElement(FormBuilder, {
     key: `form-builder-${form._id}`,
     components: form.components,
     display: form.display,
@@ -3199,13 +3239,13 @@ function FormSettings(props) {
 
   const i18n = options.i18n || (f => f);
 
-  return React.createElement("div", null, React.createElement(Form, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form, {
     form: form,
     submission: submission,
     onChange: onChange,
     options: options
-  }), React.createElement("button", {
-    "data-testid": 'submit',
+  }), /*#__PURE__*/React.createElement("button", {
+    "data-testid": "submit",
     disabled: !isValid,
     className: "mt-5 btn btn-primary",
     onClick: onSubmit,
@@ -3229,7 +3269,7 @@ function SelectColumnFilter({
     label: value,
     value
   }));
-  return React.createElement(Select, {
+  return /*#__PURE__*/React.createElement(Select, {
     key: `filter-${column.id}`,
     name: `filter-${column.id}`,
     size: "sm",
@@ -8374,30 +8414,30 @@ function FormsCell(props) {
       original: form
     }
   } = props;
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "p-1"
-  }, React.createElement("h4", {
+  }, /*#__PURE__*/React.createElement("h4", {
     className: "text-primary text-lg flex items-center"
-  }, React.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: classnames(iconClass(undefined, icon), "mr-1")
-  }), form.title), React.createElement("ul", {
-    className: 'reset-list text-gray-500'
-  }, React.createElement("li", {
+  }), form.title), /*#__PURE__*/React.createElement("ul", {
+    className: "reset-list text-gray-500"
+  }, /*#__PURE__*/React.createElement("li", {
     className: "text-sm"
-  }, "Name: ", form.name || form.machineName), React.createElement("li", {
-    className: 'mt-5'
-  }, React.createElement("span", {
-    className: 'badge bg-light mr-1'
-  }, React.createElement("i", {
+  }, "Name: ", form.name || form.machineName), /*#__PURE__*/React.createElement("li", {
+    className: "mt-5"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "badge bg-light mr-1"
+  }, /*#__PURE__*/React.createElement("i", {
     className: classnames(iconClass(undefined, "history"), "mr-1")
-  }), React.createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map((tag, index) => React.createElement("button", {
+  }), /*#__PURE__*/React.createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map((tag, index) => /*#__PURE__*/React.createElement("button", {
     key: index,
-    className: 'badge badge-hover bg-secondary mr-1',
+    className: "badge badge-hover bg-secondary mr-1",
     onClick: stopPropagationWrapper(() => {
       props.setFilter("tags", tag);
       props.gotoPage(0);
     })
-  }, React.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: classnames(iconClass(undefined, "tags"), "mr-1")
   }), tag)))));
 }
@@ -8417,7 +8457,7 @@ function FormsTable(_ref) {
     Header: i18n("Title"),
     accessor: "title",
     id: "title",
-    Cell: props => React.createElement(FormCell, Object.assign({}, props, {
+    Cell: props => /*#__PURE__*/React.createElement(FormCell, _extends({}, props, {
       icon: props.icon,
       i18n: i18n
     })),
@@ -8428,13 +8468,13 @@ function FormsTable(_ref) {
     accessor: "tags",
     id: "tags",
     hidden: true,
-    Filter: props => tags && tags.length ? React.createElement(SelectColumnFilter, Object.assign({}, props, {
+    Filter: props => tags && tags.length ? /*#__PURE__*/React.createElement(SelectColumnFilter, _extends({}, props, {
       column: _extends({}, props.columns, {
         choices: tags
       })
-    })) : React.createElement(DefaultColumnFilter, Object.assign({}, props))
+    })) : /*#__PURE__*/React.createElement(DefaultColumnFilter, props)
   }], [Cell]);
-  return React.createElement(Table, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
     columns: columns
   }));
 }
@@ -8492,37 +8532,37 @@ function Modal(_ref) {
     return null;
   }
 
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     role: "dialog",
     className: `formio-dialog formio-dialog-theme-default ${className}`
-  }, React.createElement("div", {
-    className: 'formio-dialog-overlay',
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "formio-dialog-overlay",
     onClick: onClickClose
-  }), React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     style: style,
     className: "formio-dialog-content"
-  }, React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "formio-dialog-wrapper"
-  }, title ? React.createElement("div", {
+  }, title ? /*#__PURE__*/React.createElement("div", {
     className: "formio-dialog-title",
     ref: titleRef,
     "data-testid": "modalTitle"
-  }, title) : null, React.createElement("div", {
-    className: 'formio-dialog-body',
+  }, title) : null, /*#__PURE__*/React.createElement("div", {
+    className: "formio-dialog-body",
     style: {
       maxHeight
     },
     "data-testid": "modalBody"
-  }, show && children), ModalFooter ? React.createElement("div", {
+  }, show && children), ModalFooter ? /*#__PURE__*/React.createElement("div", {
     className: "formio-dialog-footer",
     ref: footerRef,
     "data-testid": "modalFooter"
-  }, React.createElement(ModalFooter, Object.assign({}, props, {
+  }, /*#__PURE__*/React.createElement(ModalFooter, _extends({}, props, {
     closeModal: closeModal,
     onClose: onClickClose
-  }))) : null), React.createElement("button", {
-    className: 'formio-dialog-close float-right btn btn-secondary btn-sm',
-    "aria-label": 'close',
+  }))) : null), /*#__PURE__*/React.createElement("button", {
+    className: "formio-dialog-close float-right btn btn-secondary btn-sm",
+    "aria-label": "close",
     "data-testid": "closeModal",
     onClick: onClickClose
   })));
@@ -8535,22 +8575,22 @@ function RemoveModalFooter({
   onClose,
   i18n = f => f
 }) {
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "flex items-center justify-center bg-white p-2"
-  }, React.createElement("button", {
-    "data-testid": 'customCloseModal',
+  }, /*#__PURE__*/React.createElement("button", {
+    "data-testid": "customCloseModal",
     className: "btn btn-outline-dark mx-2",
     onClick: onClose
-  }, i18n("Cancel")), React.createElement("button", {
+  }, i18n("Cancel")), /*#__PURE__*/React.createElement("button", {
     disabled: valueToCompare !== value,
-    "data-testid": 'customSubmitModal',
+    "data-testid": "customSubmitModal",
     className: "btn btn-danger mx-2",
     onClick: e => {
       if (valueToCompare === value) {
         onSubmit(e);
       }
     }
-  }, React.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: classnames(iconClass(undefined, "trash"), "mr-2")
   }), i18n("Remove")));
 }
@@ -8568,7 +8608,7 @@ function RemoveModal(_ref) {
     i18n = noop
   } = props;
   const [value, setValue] = useState();
-  return React.createElement(Modal, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
     className: classnames(props.className, "formio-dialog-theme-remove"),
     style: {
       maxWidth
@@ -8576,12 +8616,12 @@ function RemoveModal(_ref) {
     title: `Drop ${(_props$itemType = props.itemType) == null ? void 0 : _props$itemType.toLowerCase()}`,
     value: value,
     footer: RemoveModalFooter
-  }), React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "px-4 pt-3 pb-5"
-  }, React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "pb-1"
-  }, children, i18n("To drop"), " ", React.createElement("strong", null, props.valueToCompare), ",\u00A0", i18n("type the"), "\u00A0", React.createElement("strong", null, "\"", (_props$itemType2 = props.itemType) == null ? void 0 : _props$itemType2.toLowerCase(), "\""), "\u00A0", i18n("name"), " ", React.createElement("strong", null, "\"", props.valueToCompare, "\""), "."), React.createElement(InputText, {
-    name: 'remove',
+  }, children, i18n("To drop"), " ", /*#__PURE__*/React.createElement("strong", null, props.valueToCompare), ",\xA0", i18n("type the"), "\xA0", /*#__PURE__*/React.createElement("strong", null, "\"", (_props$itemType2 = props.itemType) == null ? void 0 : _props$itemType2.toLowerCase(), "\""), "\xA0", i18n("name"), " ", /*#__PURE__*/React.createElement("strong", null, "\"", props.valueToCompare, "\""), "."), /*#__PURE__*/React.createElement(InputText, {
+    name: "remove",
     value: value,
     onChange: (name, value) => setValue(value)
   })));
@@ -8598,12 +8638,9 @@ class ReactComponent extends Components.components.field {
   // eslint-disable-next-line no-useless-constructor
   constructor(component, options, data) {
     super(component, options, data);
-    /**
-     * 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 = (value, flags) => {
       flags = flags || {};
@@ -8664,9 +8701,10 @@ class ReactComponent extends Components.components.field {
 
     this.loadRefs(element, {
       [`react-${this.id}`]: "single"
-    });
+    }); // @ts-ignore
 
     if (this.refs[`react-${this.id}`]) {
+      // @ts-ignore
       this.reactInstance = this.attachReact(this.refs[`react-${this.id}`]);
 
       if (this.shouldSetValue) {
@@ -8682,7 +8720,9 @@ class ReactComponent extends Components.components.field {
 
 
   detach() {
+    // @ts-ignore
     if (this.refs[`react-${this.id}`]) {
+      // @ts-ignore
       this.detachReact(this.refs[`react-${this.id}`]);
     }
 
@@ -8725,7 +8765,6 @@ class ReactComponent extends Components.components.field {
    * @param value
    * @param flags
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
 
 
   setValue(value, flags) {
@@ -8739,15 +8778,21 @@ class ReactComponent extends Components.components.field {
       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 {*}
+   */
   getValue() {
     if (this.reactInstance) {
       return this.reactInstance.state.value;
@@ -8787,31 +8832,31 @@ function DefaultCell({
   render = f => f
 }) {
   if (value === undefined) {
-    return React.createElement(React.Fragment, null);
+    return /*#__PURE__*/React.createElement(Fragment, null);
   }
 
   const rendered = render(value);
 
   if (value !== rendered) {
-    return React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       dangerouslySetInnerHTML: {
         __html: rendered
       }
     });
   }
 
-  return React.createElement("span", null, String(value));
+  return /*#__PURE__*/React.createElement("span", null, String(value));
 }
 
 function mapFormToColumns(form) {
   const columns = [];
   FormioUtils.eachComponent(form.components, component => {
     if (component.tableView && component.key) {
-      const cmp = Components.create(component, null, null, true);
+      const cmp = Components.create(component, {}, null, true);
       const column = {
         Header: component.label || component.title || component.key,
         accessor: `data.${component.key}`,
-        Cell: props => React.createElement(DefaultCell, Object.assign({}, props, {
+        Cell: props => /*#__PURE__*/React.createElement(DefaultCell, _extends({}, props, {
           render: value => cmp.asString(value)
         }))
       };
@@ -8833,8 +8878,8 @@ function SubmissionsTable(_ref) {
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, ["form"]);
 
-  const columns = React.useMemo(() => form && mapFormToColumns(form), [form]);
-  return React.createElement(Table, Object.assign({}, props, {
+  const columns = form && mapFormToColumns(form);
+  return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
     columns: columns
   }));
 }
@@ -8856,15 +8901,15 @@ function SliderColumnFilter({
     });
     return [min, max];
   }, [id, preFilteredRows]);
-  return React.createElement(React.Fragment, null, React.createElement("input", {
-    type: 'range',
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("input", {
+    type: "range",
     min: min,
     max: max,
     value: filterValue || min,
     onChange: e => {
       setFilter(parseInt(e.target.value, 10));
     }
-  }), React.createElement("button", {
+  }), /*#__PURE__*/React.createElement("button", {
     onClick: () => setFilter(undefined)
   }, "Off"));
 }
@@ -8879,18 +8924,18 @@ function ButtonTab({
   className,
   after
 }) {
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     title: 'button-wrapper',
     className: classnames("tw-tabs__button-wrapper", isActive ? "-active" : "", back ? "-back" : "", className)
-  }, React.createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     title: 'button-tab',
     className: classnames("tw-tabs__button", reverse ? "-reverse" : "", isActive ? "-active" : "", back ? "-back" : ""),
     onClick: onClick
-  }, icon && React.createElement("i", {
+  }, icon && /*#__PURE__*/React.createElement("i", {
     className: classnames(iconClass(undefined, icon), "tw-tabs__button-icon")
-  }), React.createElement("span", {
+  }), /*#__PURE__*/React.createElement("span", {
     className: "tw-tabs__button-label"
-  }, children), after), React.createElement("div", {
+  }, children), after), /*#__PURE__*/React.createElement("div", {
     className: classnames("tw-tabs__button-border", isActive ? "-active" : "")
   }));
 }
@@ -8909,18 +8954,18 @@ function Tabs(_ref) {
   } = _ref,
       additionalProps = _objectWithoutPropertiesLoose(_ref, ["style", "current", "items", "children", "HeaderChildren", "AddButton", "Button", "className", "onClick", "i18n"]);
 
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     "data-testid": 'tabs-comp',
     className: `tw-tabs ${className}`,
     style: style
-  }, React.createElement("div", null, React.createElement("nav", {
-    className: 'tw-tabs__header'
-  }, React.createElement("div", {
-    className: 'tw-tabs__header-wrapper'
-  }, React.createElement("div", {
-    className: 'tw-tabs__header-border'
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("nav", {
+    className: "tw-tabs__header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tw-tabs__header-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tw-tabs__header-border"
   }), items.filter(item => item.label || item.icon).map((item, index) => {
-    return React.createElement(Button, Object.assign({
+    return /*#__PURE__*/React.createElement(Button, _extends({
       key: index,
       back: item.back,
       isActive: (current == null ? void 0 : current.action) === item.action,
@@ -8928,12 +8973,12 @@ function Tabs(_ref) {
       onClick: () => {
         onClick && onClick(item);
       }
-    }, additionalProps, item), i18n(item.label));
-  }), AddButton && React.createElement(AddButton, Object.assign({}, additionalProps, {
+    }, additionalProps, item), i18n(item.label || ""));
+  }), AddButton && /*#__PURE__*/React.createElement(AddButton, _extends({}, additionalProps, {
     current: current
-  })))), HeaderChildren && React.createElement(HeaderChildren, Object.assign({}, additionalProps, {
+  })))), HeaderChildren && /*#__PURE__*/React.createElement(HeaderChildren, _extends({}, additionalProps, {
     current: current
-  }))), React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     title: "tab-body",
     className: "tw-tabs__body"
   }, children));
@@ -8946,9 +8991,9 @@ function Loader({
   className = ""
 }) {
   if (isActive) {
-    return React.createElement("div", {
+    return /*#__PURE__*/React.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.createElement("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       "data-testid": `icon_${icon}`,
       color: color,
       className: `text-11xl ${iconClass(undefined, icon, true)}`