@tsed/react-formio 2.3.1 → 2.3.3

package/dist/index.modern.js

@@ -4,14 +4,14 @@ export { default as Wizard } from 'formiojs/Wizard';
 export { default as WizardBuilder } from 'formiojs/WizardBuilder';
 import classnames from 'classnames';
 import noop from 'lodash/noop';
-import React, { useRef, useEffect, useState, useMemo, useCallback, useReducer } from 'react';
+import React$1, { useRef, useEffect, useState, useMemo, useCallback, useReducer } from 'react';
 import { Templates, Form as Form$1, Components } from 'formiojs';
 export { Components, Formio, Templates, Utils } from 'formiojs';
 import Choices from '@formio/choices.js';
-import PropTypes from 'prop-types';
 import { DndProvider, useDrop, useDrag } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useTable, useFilters, useGroupBy, useSortBy, usePagination } from 'react-table';
+import PropTypes from 'prop-types';
 import AllComponents from 'formiojs/components';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
@@ -75,40 +75,33 @@ function FormControl({
   label,
   className
 }) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     "data-testid": name && `form-group-${name}`,
     id: `form-group-${name || ""}`,
     className: classnames("form-group", className)
-  }, label && /*#__PURE__*/React.createElement("label", {
+  }, label && /*#__PURE__*/React$1.createElement("label", {
     htmlFor: name,
     "data-testid": "form-control-label",
     className: `col-form-label ${required ? " field-required" : ""}`
-  }, label), /*#__PURE__*/React.createElement("div", {
+  }, label), /*#__PURE__*/React$1.createElement("div", {
     className: "input-group"
-  }, prefix && /*#__PURE__*/React.createElement("div", {
+  }, prefix && /*#__PURE__*/React$1.createElement("div", {
     className: "input-group-prepend"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React$1.createElement("span", {
     className: "input-group-text",
     "data-testid": "form-control-prefix"
-  }, prefix)), children, suffix && /*#__PURE__*/React.createElement("div", {
+  }, prefix)), children, suffix && /*#__PURE__*/React$1.createElement("div", {
     className: "input-group-append"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React$1.createElement("span", {
     className: "input-group-text",
     "data-testid": "form-control-suffix"
-  }, suffix))), description && /*#__PURE__*/React.createElement("div", {
+  }, suffix))), description && /*#__PURE__*/React$1.createElement("div", {
     "data-testid": "form-control-description",
     className: "form-text text-muted"
   }, description));
 }
-FormControl.propTypes = {
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  children: PropTypes.any,
-  required: PropTypes.bool,
-  description: PropTypes.any
-};
 
-const _excluded$f = ["name", "label", "size", "onChange", "required", "value", "choices", "description", "placeholder", "prefix", "suffix", "multiple", "layout"];
+const _excluded$g = ["name", "label", "size", "onChange", "required", "value", "choices", "description", "placeholder", "prefix", "suffix", "multiple", "layout"];
 function Select(_ref) {
   let {
       name,
@@ -125,8 +118,8 @@ function Select(_ref) {
       multiple,
       layout
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
-  const ref = useRef();
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+  const ref = useRef(null);
   useEffect(() => {
     let instance;
     if (layout === "choicesjs") {
@@ -143,7 +136,7 @@ function Select(_ref) {
     label: placeholder,
     value: ""
   }, ...choices];
-  return /*#__PURE__*/React.createElement(FormControl, {
+  return /*#__PURE__*/React$1.createElement(FormControl, {
     name: name,
     label: label,
     required: required,
@@ -151,10 +144,10 @@ function Select(_ref) {
     prefix: prefix,
     suffix: suffix,
     shadow: false
-  }, /*#__PURE__*/React.createElement("select", _extends({
-    ref: ref
+  }, /*#__PURE__*/React$1.createElement("select", _extends({
+    ref: ref,
+    "data-testid": `select_${name}`
   }, props, {
-    "data-testid": `select_${name}`,
     className: classnames("form-control", size && `form-control-${size}`),
     name: name,
     id: name,
@@ -168,29 +161,21 @@ function Select(_ref) {
     label,
     value
   }) => {
-    return /*#__PURE__*/React.createElement("option", {
+    return /*#__PURE__*/React$1.createElement("option", {
       key: String(value),
       label: label,
       value: value
     }, label);
   })));
 }
-Select.propTypes = {
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.any,
-  required: PropTypes.bool,
-  onChange: PropTypes.func,
-  choices: PropTypes.array.isRequired
-};
 
 function DrapNDropContainer({
   enableDragNDrop,
   children
 }) {
-  return enableDragNDrop ? /*#__PURE__*/React.createElement(DndProvider, {
+  return enableDragNDrop ? /*#__PURE__*/React$1.createElement(DndProvider, {
     backend: HTML5Backend
-  }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }, children) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, children);
 }
 
 const LEFT_PAGE = "LEFT";
@@ -235,7 +220,7 @@ function getPageNumbers({
   return range(1, totalPages);
 }
 
-const _excluded$e = ["component", "children", "disabled", "active"];
+const _excluded$f = ["component", "children", "disabled", "active"];
 function PaginationButton(props) {
   const {
       component: Component = "button",
@@ -243,8 +228,8 @@ function PaginationButton(props) {
       disabled,
       active
     } = props,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded$e);
-  return /*#__PURE__*/React.createElement(Component, _extends({}, otherProps, {
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded$f);
+  return /*#__PURE__*/React$1.createElement(Component, _extends({}, otherProps, {
     "data-testid": "pagination-button",
     disabled: disabled,
     className: classnames("page-link", disabled ? "disabled" : "", active ? "" : "", props.className)
@@ -276,58 +261,58 @@ function Pagination(props) {
     value,
     label: value
   }));
-  return /*#__PURE__*/React.createElement("nav", {
+  return /*#__PURE__*/React$1.createElement("nav", {
     "aria-label": "Page navigation",
     className: classnames("pagination-group -mb-3", className)
-  }, /*#__PURE__*/React.createElement("ul", {
+  }, /*#__PURE__*/React$1.createElement("ul", {
     className: "pagination mb-3 mr-3"
-  }, /*#__PURE__*/React.createElement("li", {
+  }, /*#__PURE__*/React$1.createElement("li", {
     className: classnames("page-item", !canPreviousPage && "disabled")
-  }, /*#__PURE__*/React.createElement(PaginationButton, {
+  }, /*#__PURE__*/React$1.createElement(PaginationButton, {
     tabIndex: -1,
     disabled: !canPreviousPage,
     onClick: () => previousPage()
   }, i18n("Previous"))), pageNumbers.map(page => {
     if ([LEFT_PAGE, RIGHT_PAGE].includes(page)) {
-      return /*#__PURE__*/React.createElement("li", {
+      return /*#__PURE__*/React$1.createElement("li", {
         className: "page-item",
         key: page
-      }, /*#__PURE__*/React.createElement(PaginationButton, {
+      }, /*#__PURE__*/React$1.createElement(PaginationButton, {
         "aria-hidden": "true"
       }, "..."));
     }
     const active = page - 1 === pageIndex;
-    return /*#__PURE__*/React.createElement("li", {
+    return /*#__PURE__*/React$1.createElement("li", {
       className: classnames("page-item", active && "active"),
       key: page
-    }, /*#__PURE__*/React.createElement(PaginationButton, {
+    }, /*#__PURE__*/React$1.createElement(PaginationButton, {
       tabIndex: pageIndex,
       active: active,
       onClick: () => gotoPage(page - 1)
     }, page));
-  }), /*#__PURE__*/React.createElement("li", {
+  }), /*#__PURE__*/React$1.createElement("li", {
     className: classnames("page-item", !canNextPage && "disabled")
-  }, /*#__PURE__*/React.createElement(PaginationButton, {
+  }, /*#__PURE__*/React$1.createElement(PaginationButton, {
     tabIndex: pageNumbers.length,
     disabled: !canNextPage,
     onClick: () => nextPage()
-  }, i18n("Next")))), /*#__PURE__*/React.createElement("li", {
+  }, i18n("Next")))), /*#__PURE__*/React$1.createElement("li", {
     className: "mb-3 mr-3 flex items-center"
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React$1.createElement(Select, {
     name: "page",
     value: pageSize,
     choices: choices,
     onChange: (name, value) => {
       setPageSize(+value);
     }
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React$1.createElement("span", {
     className: "ml-3"
-  }, i18n("items per page"))), pageOptions && /*#__PURE__*/React.createElement("li", {
+  }, i18n("items per page"))), pageOptions && /*#__PURE__*/React$1.createElement("li", {
     className: "mb-3 mr-3 flex items-center"
-  }, /*#__PURE__*/React.createElement("span", null, i18n("Page"), "\xA0"), /*#__PURE__*/React.createElement("strong", null, pageIndex + 1, " of ", pageOptions.length)), totalLength !== undefined && /*#__PURE__*/React.createElement("li", {
+  }, /*#__PURE__*/React$1.createElement("span", null, i18n("Page"), "\xA0"), /*#__PURE__*/React$1.createElement("strong", null, pageIndex + 1, " of ", pageOptions.length)), totalLength !== undefined && /*#__PURE__*/React$1.createElement("li", {
     className: "mb-3 flex items-center",
     "data-testid": "pagination-total-items"
-  }, i18n("Total"), ": ", /*#__PURE__*/React.createElement("strong", {
+  }, i18n("Total"), ": ", /*#__PURE__*/React$1.createElement("strong", {
     className: "mx-1"
   }, new Intl.NumberFormat(undefined).format(totalLength)), " ", i18n("items")));
 }
@@ -339,9 +324,9 @@ function DefaultArrowSort({
     isSorted,
     isSortedDesc
   } = column;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React$1.createElement("span", {
     className: "table-arrow-sort"
-  }, isSorted ? /*#__PURE__*/React.createElement("i", {
+  }, isSorted ? /*#__PURE__*/React$1.createElement("i", {
     className: iconClass(undefined, isSortedDesc ? "sort-up" : "sort-down")
   }) : "");
 }
@@ -349,16 +334,16 @@ function DefaultArrowSort({
 function DefaultCellHeader({
   column
 }) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "table-cell-header"
-  }, /*#__PURE__*/React.createElement("div", _extends({
+  }, /*#__PURE__*/React$1.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", {
+  }, column.getSortByToggleProps()), /*#__PURE__*/React$1.createElement("span", null, column.render("Header")), column.render("ArrowSort")), column.canFilter ? /*#__PURE__*/React$1.createElement("div", {
     className: "table-cell-header__filter"
   }, column.render("Filter")) : null);
 }
 
-const _excluded$d = ["onDrag", "onDrop", "index"];
+const _excluded$e = ["onDrag", "onDrop", "index"];
 const DND_ITEM_TYPE = "row";
 function useDndRow(_ref) {
   let {
@@ -366,7 +351,7 @@ function useDndRow(_ref) {
       onDrop,
       index
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   const dropRef = useRef(null);
   const dragRef = useRef(null);
   const [, drop] = useDrop({
@@ -440,7 +425,7 @@ function useDndRow(_ref) {
 function DefaultCells({
   row
 }) {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, row.cells.map((cell, i) => {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, row.cells.map((cell, i) => {
     const {
       hidden,
       colspan
@@ -448,7 +433,7 @@ function DefaultCells({
     if (hidden) {
       return null;
     }
-    return /*#__PURE__*/React.createElement("td", _extends({
+    return /*#__PURE__*/React$1.createElement("td", _extends({
       colSpan: colspan
     }, cell.getCellProps({
       className: cell.column.className,
@@ -459,7 +444,7 @@ function DefaultCells({
   }));
 }
 
-const _excluded$c = ["onClick", "row", "enableDragNDrop", "onDrop", "onDrag"];
+const _excluded$d = ["onClick", "row", "enableDragNDrop", "onDrop", "onDrag"];
 function DefaultDndRow(props) {
   const {
     isDragging,
@@ -467,23 +452,23 @@ function DefaultDndRow(props) {
     dropRef,
     opacity
   } = useDndRow(props);
-  return /*#__PURE__*/React.createElement("tr", {
+  return /*#__PURE__*/React$1.createElement("tr", {
     ref: dropRef,
     style: {
       opacity
     }
-  }, /*#__PURE__*/React.createElement("td", {
+  }, /*#__PURE__*/React$1.createElement("td", {
     ref: dragRef,
     role: "cell",
     style: {
       cursor: isDragging ? "grabbing" : "grab"
     },
     className: "align-middle"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "flex items-center justify-center"
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: classnames(iconClass(undefined, "dots-vertical-rounded"))
-  }))), /*#__PURE__*/React.createElement(DefaultCells, props));
+  }))), /*#__PURE__*/React$1.createElement(DefaultCells, props));
 }
 function DefaultRow(_ref) {
   let {
@@ -493,18 +478,18 @@ function DefaultRow(_ref) {
       onDrop,
       onDrag
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   const opts = _extends({}, props, {
     onClick: () => onClick(row.original, "row")
   }, row.getRowProps());
   if (enableDragNDrop) {
-    return /*#__PURE__*/React.createElement(DefaultDndRow, _extends({}, opts, {
+    return /*#__PURE__*/React$1.createElement(DefaultDndRow, _extends({}, opts, {
       row: row,
       onDrag: onDrag,
       onDrop: onDrop
     }));
   }
-  return /*#__PURE__*/React.createElement("tr", opts, /*#__PURE__*/React.createElement(DefaultCells, {
+  return /*#__PURE__*/React$1.createElement("tr", opts, /*#__PURE__*/React$1.createElement(DefaultCells, {
     row: row
   }));
 }
@@ -520,7 +505,7 @@ function callLast(fn, time) {
   };
 }
 
-const _excluded$b = ["name", "value", "label", "onChange", "required", "size", "type", "prefix", "suffix", "description", "className", "placeholder"];
+const _excluded$c = ["name", "value", "label", "onChange", "required", "size", "type", "prefix", "suffix", "description", "className", "placeholder"];
 function InputText(_ref) {
   let {
       name,
@@ -536,13 +521,13 @@ function InputText(_ref) {
       className,
       placeholder
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   const [localValue, setValue] = useState(value);
   const change = useMemo(() => onChange && callLast(onChange, 300), [onChange]);
   useEffect(() => {
     setValue(value);
   }, [value]);
-  return /*#__PURE__*/React.createElement(FormControl, {
+  return /*#__PURE__*/React$1.createElement(FormControl, {
     name: name,
     label: label,
     required: required,
@@ -550,7 +535,7 @@ function InputText(_ref) {
     prefix: prefix,
     suffix: suffix,
     className: className
-  }, /*#__PURE__*/React.createElement("input", _extends({
+  }, /*#__PURE__*/React$1.createElement("input", _extends({
     type: type || "text"
   }, props, {
     "data-testid": `input_${name}`,
@@ -594,7 +579,8 @@ function DefaultColumnFilter(props) {
     setFilterId(id);
     setFilter(value || undefined);
   }, [id, setValue, setFilterId, setFilter]);
-  return /*#__PURE__*/React.createElement(InputText, {
+  /* eslint-disable jsx-a11y/no-autofocus */
+  return /*#__PURE__*/React$1.createElement(InputText, {
     size: "sm",
     id: id,
     name: id,
@@ -617,22 +603,28 @@ const stopPropagationWrapper = fn => event => {
   fn();
 };
 
+const _excluded$b = ["className", "buttonSize", "buttonType", "buttonOutline", "onClick", "action", "icon", "title", "i18n", "data", "ctx"];
 function DefaultOperationButton(props) {
   const {
-    className = "btn",
-    buttonSize = "xs",
-    buttonType = "primary",
-    buttonOutline,
-    onClick,
-    action,
-    icon = "",
-    title = "",
-    i18n = f => f
-  } = props;
-  return /*#__PURE__*/React.createElement("button", {
+      className = "btn",
+      buttonSize = "xs",
+      buttonType = "primary",
+      buttonOutline,
+      onClick,
+      action,
+      icon = "",
+      title = "",
+      i18n = f => f
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } = props,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded$b);
+  return /*#__PURE__*/React.createElement("button", _extends({}, otherProps, {
+    "aria-label": "Operation button: " + (title || action),
     className: classnames(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), `btn-${buttonSize}`),
     onClick: stopPropagationWrapper(() => onClick(action))
-  }, icon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
+  }), icon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
     className: iconClass(undefined, icon)
   }), " ", title && " ") : null, title && /*#__PURE__*/React.createElement("span", {
     className: icon && title ? "ml-1" : ""
@@ -648,18 +640,19 @@ function DefaultCellOperations({
   i18n
 }) {
   const data = row.original;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "btn-group"
   }, operations.filter(({
     permissionsResolver
-  }) => !permissionsResolver || permissionsResolver(data, ctx)).map(_ref => {
+  }) => !permissionsResolver || permissionsResolver(data, ctx)).map((_ref, index) => {
     let {
         OperationButton = DefaultOperationButton
       } = _ref,
       operation = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-    return /*#__PURE__*/React.createElement(OperationButton, _extends({
+    return /*#__PURE__*/React$1.createElement(OperationButton, _extends({
       key: operation.action
     }, operation, {
+      "data-testid": `operation-${index}-${operation.action}`,
       onClick: action => onClick(data, action),
       data: data,
       i18n: i18n,
@@ -683,10 +676,10 @@ function useOperations({
       return [...columns, {
         id: "operations",
         groupByBoundary: true,
-        Header: () => /*#__PURE__*/React.createElement("div", {
+        Header: () => /*#__PURE__*/React$1.createElement("div", {
           className: "text-center"
         }, i18n("Operations")),
-        Cell: props => /*#__PURE__*/React.createElement(CellOperations, _extends({}, props, {
+        Cell: props => /*#__PURE__*/React$1.createElement(CellOperations, _extends({}, props, {
           operations: operations,
           onClick: onClick,
           ctx: ctx,
@@ -707,12 +700,12 @@ function getOperationCallback(operations, onClick) {
   };
 }
 function DefaultLoader() {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "text-center p-2 pb-4 font-bold"
   }, "Loading in progress");
 }
 function DefaultEmptyData() {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "text-center p-2 pb-4 font-bold"
   }, "No data found");
 }
@@ -750,12 +743,12 @@ function useCustomTable(props) {
     } = props,
     ctx = _objectWithoutPropertiesLoose(props, _excluded$9);
   const _onClick = getOperationCallback(operations, onClick);
-  const defaultColumn = React.useMemo(() => ({
+  const defaultColumn = React$1.useMemo(() => ({
     // Let's set up our default Filter UI
     Filter: ColumnFilter,
     ArrowSort
   }), [ColumnFilter, ArrowSort]);
-  const [filterId, setFilterId] = React.useState(controlledFilterId);
+  const [filterId, setFilterId] = React$1.useState(controlledFilterId);
   // DND
   const [records, setRecords] = useState(data);
   useEffect(() => {
@@ -800,7 +793,7 @@ function useCustomTable(props) {
       filters
     }
   } = tableInstance;
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     onChange({
       pageIndex,
       pageSize,
@@ -859,26 +852,26 @@ function Table(props) {
     onDrop
   } = useCustomTable(props);
   // Render the UI for your table
-  return /*#__PURE__*/React.createElement(DrapNDropContainer, {
+  return /*#__PURE__*/React$1.createElement(DrapNDropContainer, {
     enableDragNDrop: enableDragNDrop
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: classnames("table-group table-responsive", className)
-  }, /*#__PURE__*/React.createElement("table", _extends({
+  }, /*#__PURE__*/React$1.createElement("table", _extends({
     className: "table table-striped table-hover"
-  }, tableInstance.getTableProps()), /*#__PURE__*/React.createElement("thead", null, tableInstance.headerGroups.map((headerGroup, i) => /*#__PURE__*/React.createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
+  }, tableInstance.getTableProps()), /*#__PURE__*/React$1.createElement("thead", null, tableInstance.headerGroups.map((headerGroup, i) => /*#__PURE__*/React$1.createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
     key: `tableInstance.headerGroups${i}`
-  }), enableDragNDrop ? /*#__PURE__*/React.createElement("th", {
+  }), enableDragNDrop ? /*#__PURE__*/React$1.createElement("th", {
     role: "columnheader",
     className: "text-center"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "table-cell-header"
-  })) : null, headerGroup.headers.map(column => /*#__PURE__*/React.createElement("th", _extends({}, column.getHeaderProps(), {
+  })) : null, headerGroup.headers.map(column => /*#__PURE__*/React$1.createElement("th", _extends({}, column.getHeaderProps(), {
     key: `tableInstance.headers.column.${column.id}`
-  }), /*#__PURE__*/React.createElement(CellHeader, {
+  }), /*#__PURE__*/React$1.createElement(CellHeader, {
     column: column
-  })))))), !isLoading ? /*#__PURE__*/React.createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map((row, index) => {
+  })))))), !isLoading ? /*#__PURE__*/React$1.createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map((row, index) => {
     tableInstance.prepareRow(row);
-    return /*#__PURE__*/React.createElement(Row, {
+    return /*#__PURE__*/React$1.createElement(Row, {
       index: index,
       enableDragNDrop: enableDragNDrop,
       onClick: onClick,
@@ -887,9 +880,9 @@ function Table(props) {
       onDrag: onDrag,
       onDrop: onDrop
     });
-  })) : null), isLoading ? /*#__PURE__*/React.createElement(Loader, null) : null, !data.length ? /*#__PURE__*/React.createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? /*#__PURE__*/React.createElement("div", {
+  })) : null), isLoading ? /*#__PURE__*/React$1.createElement(Loader, null) : null, !data.length ? /*#__PURE__*/React$1.createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? /*#__PURE__*/React$1.createElement("div", {
     className: "overflow-hidden"
-  }, /*#__PURE__*/React.createElement(Pagination, _extends({}, tableInstance, {
+  }, /*#__PURE__*/React$1.createElement(Pagination, _extends({}, tableInstance, {
     totalLength: totalLength,
     className: "text-sm",
     pageIndex: pageIndex,
@@ -918,13 +911,14 @@ function ActionsTable(_ref) {
     accessor: "title",
     id: "title"
   }];
-  return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
+  return /*#__PURE__*/React$1.createElement(Table, _extends({}, props, {
     disableFilters: disableFilters,
     disablePagination: disablePagination,
     columns: columns
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React$1.createElement("div", {
     className: "pagination-group"
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React$1.createElement(Select, {
+    "data-testid": "action-table-select",
     name: "actions",
     value: currentAction,
     choices: [{
@@ -932,15 +926,15 @@ function ActionsTable(_ref) {
       value: ""
     }].concat(availableActions),
     onChange: (name, action) => setAction(action)
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React$1.createElement("div", {
     className: "pl-3"
-  }, /*#__PURE__*/React.createElement("button", {
-    "data-testid": "submit",
+  }, /*#__PURE__*/React$1.createElement("button", {
+    "data-testid": "action-table-add",
     disabled: currentAction === "",
     className: "btn btn-success",
     onClick: () => currentAction && onAddAction(currentAction),
     type: "submit"
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: classnames(iconClass(undefined, "plus"), "mr-1")
   }), " ", i18n("Add action")))));
 }
@@ -955,9 +949,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 /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React$1.createElement("div", {
         key: index
-      }, /*#__PURE__*/React.createElement("strong", null, item.name, " (", item.path, ")"), " ", "- ", item.message);
+      }, /*#__PURE__*/React$1.createElement("strong", null, item.name, " (", item.path, ")"), " ", "- ", item.message);
     });
   }
   // If this is a standard error.
@@ -967,7 +961,7 @@ function formatError(error) {
   // If this is a joy validation error.
   if (Object.prototype.hasOwnProperty.call(error, "name") && error.name === "ValidationError") {
     return error.details.map((item, index) => {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React$1.createElement("div", {
         key: index
       }, item.message);
     });
@@ -985,7 +979,7 @@ function Alert({
   if (!error || Array.isArray(error) && !error.length) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: `alert alert-${type}`,
     role: "alert"
   }, formatError(error));
@@ -996,13 +990,13 @@ function Card({
   label,
   className
 }) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: classnames("card", className)
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "card-header "
-  }, /*#__PURE__*/React.createElement("h4", {
+  }, /*#__PURE__*/React$1.createElement("h4", {
     className: "card-title"
-  }, label)), /*#__PURE__*/React.createElement("div", {
+  }, label)), /*#__PURE__*/React$1.createElement("div", {
     className: "card-body",
     role: "article"
   }, children));
@@ -1158,7 +1152,7 @@ function Form(props) {
   const {
     element
   } = useForm(props);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     "data-testid": `formioContainer${props.name || ""}`,
     ref: element,
     className: props.className
@@ -1167,24 +1161,24 @@ function Form(props) {
 Form.propTypes = {
   name: PropTypes.string,
   className: PropTypes.string,
-  /**
-   *
+  /**
+   *
    */
   src: PropTypes.string,
-  /**
-   * url to fetch form
+  /**
+   * url to fetch form
    */
   url: PropTypes.string,
-  /**
-   * Raw form object
+  /**
+   * Raw form object
    */
   form: PropTypes.object,
-  /**
-   * Data submission
+  /**
+   * Data submission
    */
   submission: PropTypes.object,
-  /**
-   * Configuration option
+  /**
+   * Configuration option
    */
   options: PropTypes.shape({
     readOnly: PropTypes.bool,
@@ -1423,7 +1417,6 @@ function useFormAccess({
   onSubmit,
   options
 }) {
-  // eslint-disable-next-line no-undef
   const form = useMemo(() => getFormAccess(roles), [roles]);
   const [submissions, setSubmissions] = useState(() => dataAccessToSubmissions(formDefinition, form));
   const onChange = useCallback((type, submission) => {
@@ -1458,7 +1451,7 @@ function NamedFormAccess({
   children
 }) {
   const [isValid, setIsValid] = useState(true);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Form, {
     name: name,
     form: form[name],
     submission: submissions[name],
@@ -1472,11 +1465,11 @@ function NamedFormAccess({
       setIsValid(isValid);
     },
     options: options
-  }), /*#__PURE__*/React.createElement("button", {
+  }), /*#__PURE__*/React$1.createElement("button", {
     disabled: !isValid,
     className: "mt-5 btn btn-primary",
     onClick: onSubmit
-  }, "Save access"), children, /*#__PURE__*/React.createElement("div", {
+  }, "Save access"), children, /*#__PURE__*/React$1.createElement("div", {
     className: "alert alert-warning mt-5"
   }, "Elevated permissions allow users to access and modify other user's entities. Assign with caution."));
 }
@@ -1489,58 +1482,51 @@ function FormAccess(props) {
     onChange,
     onSubmit
   } = useFormAccess(props);
-  return /*#__PURE__*/React.createElement("div", null, props.children, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", null, props.children, /*#__PURE__*/React$1.createElement("div", {
     className: "flex mb-5"
-  }, /*#__PURE__*/React.createElement(Card, {
+  }, /*#__PURE__*/React$1.createElement(Card, {
     label: "Manage submission access",
     className: "flex-1"
-  }, /*#__PURE__*/React.createElement(NamedFormAccess, {
+  }, /*#__PURE__*/React$1.createElement(NamedFormAccess, {
     name: "submissionAccess",
     form: form,
     submissions: submissions,
     onChange: onChange,
     onSubmit: onSubmit,
     options: options
-  }, props.children)), /*#__PURE__*/React.createElement("div", {
+  }, props.children)), /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/4 pl-4"
-  }, /*#__PURE__*/React.createElement(Card, {
+  }, /*#__PURE__*/React$1.createElement(Card, {
     label: "About Submission Data Permissions"
-  }, /*#__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", {
+  }, /*#__PURE__*/React$1.createElement("p", null, "Submission Data Permissions allow you to control who can create, view, and modify form submission data."), /*#__PURE__*/React$1.createElement("ul", {
     className: "mt-5 pl-7 list-disc"
-  }, /*#__PURE__*/React.createElement("li", {
+  }, /*#__PURE__*/React$1.createElement("li", {
     className: "pb-2"
-  }, /*#__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", {
+  }, /*#__PURE__*/React$1.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$1.createElement("li", null, /*#__PURE__*/React$1.createElement("strong", null, "All Permissions"), " - These permissions apply to all submission data regardless of who owns it."))))), /*#__PURE__*/React$1.createElement("div", {
     className: "flex mb-5"
-  }, /*#__PURE__*/React.createElement(Card, {
+  }, /*#__PURE__*/React$1.createElement(Card, {
     label: `Manage ${type} definition access`,
     className: "flex-1"
-  }, /*#__PURE__*/React.createElement(NamedFormAccess, {
+  }, /*#__PURE__*/React$1.createElement(NamedFormAccess, {
     name: "access",
     form: form,
     submissions: submissions,
     onChange: onChange,
     onSubmit: onSubmit,
     options: options
-  }, props.children)), /*#__PURE__*/React.createElement("div", {
+  }, props.children)), /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/4 pl-4"
-  }, /*#__PURE__*/React.createElement(Card, {
+  }, /*#__PURE__*/React$1.createElement(Card, {
     label: "About Form Definition Access"
-  }, /*#__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.")))));
+  }, /*#__PURE__*/React$1.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$1.createElement("p", null, "Typically you will want to allow all of your roles to be able to Read the form definition."), /*#__PURE__*/React$1.createElement("p", null, "Each form also has an owner at ", /*#__PURE__*/React$1.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,
-  form: PropTypes.object,
-  roles: PropTypes.any,
-  children: PropTypes.any,
-  options: PropTypes.any,
-  onSubmit: PropTypes.func
-};
 
 const _excluded$6 = ["action"],
   _excluded2 = ["actionInfo", "children", "onSubmit", "options"];
 function mapData(options, defaults) {
   return _extends({}, defaults, options);
 }
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function mapSettingsForm(_ref) {
   let settingsForm = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   FormioUtils.eachComponent(settingsForm.components, component => {
@@ -1580,7 +1566,7 @@ function FormAction(_ref2) {
       }
     };
   })();
-  return /*#__PURE__*/React.createElement("div", null, children, /*#__PURE__*/React.createElement(Form, {
+  return /*#__PURE__*/React$1.createElement("div", null, children, /*#__PURE__*/React$1.createElement(Form, {
     form: form,
     submission: submission,
     onSubmit: onSubmit,
@@ -1618,7 +1604,7 @@ async function createBuilder(el, {
     console.error(er);
   }
 }
-class FormBuilder extends React.Component {
+class FormBuilder extends React$1.Component {
   constructor(props) {
     super(props);
     this.elRef = void 0;
@@ -1696,12 +1682,12 @@ class FormBuilder extends React.Component {
     });
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React$1.createElement("div", {
       ref: ref => {
         this.elRef = ref;
       },
       onClick: e => e.stopPropagation()
-    }, /*#__PURE__*/React.createElement("div", null));
+    }, /*#__PURE__*/React$1.createElement("div", null));
   }
 }
 FormBuilder.defaultProps = {
@@ -1770,37 +1756,37 @@ function FormEditCTAs({
     placement: "top",
     title: t("Reset all changes")
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "form-edit__actions"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("button", {
     className: `btn btn-primary btn-save flex ${disabled ? "disabled" : ""}`,
     disabled: disabled,
     onClick: () => !disabled && onSubmit && onSubmit()
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: `mr-1 ${iconClass(options.iconset, "save")}`
-  }), saveText), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+  }), saveText), /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("button", {
     className: `btn btn-light btn-undo ${hasUndo ? "" : "disabled"}`,
     onClick: () => onUndo && onUndo(),
     ref: undoTooltipRef
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: iconClass(options.iconset, "undo")
-  })), /*#__PURE__*/React.createElement("button", {
+  })), /*#__PURE__*/React$1.createElement("button", {
     className: `btn btn-light btn-redo ${hasRedo ? "" : "disabled"}`,
     onClick: () => onRedo && onRedo(),
     ref: redoTooltipRef
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: iconClass(options.iconset, "redo")
-  }))), /*#__PURE__*/React.createElement("div", null, onCopy && /*#__PURE__*/React.createElement("button", {
+  }))), /*#__PURE__*/React$1.createElement("div", null, onCopy && /*#__PURE__*/React$1.createElement("button", {
     className: "btn btn-light",
     onClick: () => onCopy(),
     ref: copyTooltipRef
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: iconClass(options.iconset, "copy")
-  })), /*#__PURE__*/React.createElement("button", {
+  })), /*#__PURE__*/React$1.createElement("button", {
     className: `btn btn-light btn-reset`,
     onClick: () => onReset && onReset(),
     ref: resetTooltipRef
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: iconClass(options.iconset, "reset")
   })))));
 }
@@ -1846,14 +1832,14 @@ function InputTags(_ref) {
       instance.destroy();
     };
   }, []);
-  return /*#__PURE__*/React.createElement(FormControl, {
+  return /*#__PURE__*/React$1.createElement(FormControl, {
     name: name,
     label: label,
     required: required,
     description: description,
     prefix: prefix,
     suffix: suffix
-  }, /*#__PURE__*/React.createElement("input", _extends({
+  }, /*#__PURE__*/React$1.createElement("input", _extends({
     ref: ref,
     type: "text"
   }, props, {
@@ -1890,11 +1876,11 @@ function FormParameters({
   baseUrl = window.location.origin
 }) {
   const hasTypeChoices = typeChoices && typeChoices.length > 1;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: `form-edit__settings ${className}`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React.createElement(InputText, {
+  }, /*#__PURE__*/React$1.createElement(InputText, {
     label: "Title",
     placeholder: "Enter the form title",
     name: "title",
@@ -1902,9 +1888,9 @@ function FormParameters({
     value: form.title,
     disabled: !!readonly["title"],
     onChange: onChange
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React.createElement(InputText, {
+  }, /*#__PURE__*/React$1.createElement(InputText, {
     label: "Name",
     placeholder: "Enter the form machine name",
     name: "name",
@@ -1912,16 +1898,16 @@ function FormParameters({
     disabled: !!readonly["name"],
     value: form.name,
     onChange: onChange
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React.createElement(InputText, {
+  }, /*#__PURE__*/React$1.createElement(InputText, {
     label: "Path",
     placeholder: "example",
     name: "path",
     className: "mb-0",
-    description: /*#__PURE__*/React.createElement("span", {
+    description: /*#__PURE__*/React$1.createElement("span", {
       className: "text-xxs flex items-center"
-    }, /*#__PURE__*/React.createElement("i", {
+    }, /*#__PURE__*/React$1.createElement("i", {
       className: "bx bx-link ml-1 mr-1"
     }), `${baseUrl}/${form.path}`),
     required: true,
@@ -1932,26 +1918,26 @@ function FormParameters({
       width: "120px"
     },
     onChange: onChange
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React$1.createElement(Select, {
     label: "Display as",
     name: "display",
     disabled: !!readonly["display"],
     value: form.display,
     choices: displayChoices,
     onChange: onChange
-  })), hasTypeChoices && /*#__PURE__*/React.createElement("div", {
+  })), hasTypeChoices && /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React$1.createElement(Select, {
     label: "Type",
     name: "type",
     value: form.type,
     choices: typeChoices,
     onChange: onChange
-  })), enableTags && /*#__PURE__*/React.createElement("div", {
+  })), enableTags && /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React.createElement(InputTags, {
+  }, /*#__PURE__*/React$1.createElement(InputTags, {
     label: "Tags",
     name: "tags",
     value: form.tags,
@@ -2021,7 +2007,6 @@ const reducer = (state, {
     case "reset":
       return update(cloneDeep(state.original));
     case "formChange":
-      // eslint-disable-next-line no-case-declarations
       const newValue = _extends({}, state.current, value);
       if (hasChanged(state.current, newValue)) {
         return update(newValue);
@@ -2118,14 +2103,14 @@ function FormEdit(props) {
     options = {},
     builder
   } = props;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("div", {
     className: "form-edit"
-  }, /*#__PURE__*/React.createElement(FormParameters, _extends({}, props, {
+  }, /*#__PURE__*/React$1.createElement(FormParameters, _extends({}, props, {
     className: "",
     key: `form-settings-${form._id}`,
     form: form,
     onChange: setChange
-  })), /*#__PURE__*/React.createElement(FormEditCTAs, _extends({}, props, {
+  })), /*#__PURE__*/React$1.createElement(FormEditCTAs, _extends({}, props, {
     className: "",
     key: `form-edit-ctas-${form._id}`,
     options: options,
@@ -2137,7 +2122,7 @@ function FormEdit(props) {
     onReset: reset,
     onCopy: onCopy,
     onSubmit: onSubmit
-  }))), /*#__PURE__*/React.createElement(FormBuilder, {
+  }))), /*#__PURE__*/React$1.createElement(FormBuilder, {
     key: `form-builder-${form._id}`,
     components: form.components,
     display: form.display,
@@ -2279,12 +2264,12 @@ function FormSettings(props) {
     isValid
   } = useFormSettings(props);
   const i18n = options.i18n || (f => f);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form, {
+  return /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Form, {
     form: form,
     submission: submission,
     onChange: onChange,
     options: options
-  }), /*#__PURE__*/React.createElement("button", {
+  }), /*#__PURE__*/React$1.createElement("button", {
     "data-testid": "submit",
     disabled: !isValid,
     className: "mt-5 btn btn-primary",
@@ -2338,7 +2323,7 @@ function SelectColumnFilter(props) {
     choices,
     onChange
   } = useSelectColumnFilter(props);
-  return /*#__PURE__*/React.createElement(Select, {
+  return /*#__PURE__*/React$1.createElement(Select, {
     key: `filter-${props.column.id}`,
     name: `filter-${props.column.id}`,
     size: "sm",
@@ -6886,30 +6871,30 @@ function FormsCell(props) {
       original: form
     }
   } = props;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "p-1"
-  }, /*#__PURE__*/React.createElement("h4", {
+  }, /*#__PURE__*/React$1.createElement("h4", {
     className: "text-primary text-lg flex items-center"
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: classnames(iconClass(undefined, icon), "mr-1")
-  }), form.title), /*#__PURE__*/React.createElement("ul", {
+  }), form.title), /*#__PURE__*/React$1.createElement("ul", {
     className: "reset-list text-gray-500"
-  }, /*#__PURE__*/React.createElement("li", {
+  }, /*#__PURE__*/React$1.createElement("li", {
     className: "text-sm"
-  }, "Name: ", form.name || form.machineName), /*#__PURE__*/React.createElement("li", {
+  }, "Name: ", form.name || form.machineName), /*#__PURE__*/React$1.createElement("li", {
     className: "mt-5"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React$1.createElement("span", {
     className: "badge bg-light mr-1"
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: classnames(iconClass(undefined, "history"), "mr-1")
-  }), /*#__PURE__*/React.createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map((tag, index) => /*#__PURE__*/React.createElement("button", {
+  }), /*#__PURE__*/React$1.createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map((tag, index) => /*#__PURE__*/React$1.createElement("button", {
     key: index,
     className: "badge badge-hover bg-secondary mr-1",
     onClick: stopPropagationWrapper(() => {
       props.setFilter("tags", tag);
       props.gotoPage(0);
     })
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: classnames(iconClass(undefined, "tags"), "mr-1")
   }), tag)))));
 }
@@ -6929,7 +6914,7 @@ function FormsTable(_ref) {
     Header: i18n("Title"),
     accessor: "title",
     id: "title",
-    Cell: props => /*#__PURE__*/React.createElement(FormCell, _extends({}, props, {
+    Cell: props => /*#__PURE__*/React$1.createElement(FormCell, _extends({}, props, {
       icon: props.icon,
       i18n: i18n
     })),
@@ -6940,13 +6925,13 @@ function FormsTable(_ref) {
     accessor: "tags",
     id: "tags",
     hidden: true,
-    Filter: props => tags && tags.length ? /*#__PURE__*/React.createElement(SelectColumnFilter, _extends({}, props, {
+    Filter: props => tags && tags.length ? /*#__PURE__*/React$1.createElement(SelectColumnFilter, _extends({}, props, {
       column: _extends({}, props.columns, {
         choices: tags
       })
-    })) : /*#__PURE__*/React.createElement(DefaultColumnFilter, props)
+    })) : /*#__PURE__*/React$1.createElement(DefaultColumnFilter, props)
   }];
-  return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
+  return /*#__PURE__*/React$1.createElement(Table, _extends({}, props, {
     columns: columns
   }));
 }
@@ -6958,9 +6943,9 @@ function Loader({
   className = ""
 }) {
   if (isActive) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React$1.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)
-    }, /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React$1.createElement("span", {
       "data-testid": `icon_${icon}`,
       color: color,
       className: `text-11xl ${iconClass(undefined, icon, true)}`
@@ -7020,35 +7005,35 @@ function Modal(_ref) {
   if (!show) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     role: "dialog",
     className: `formio-dialog formio-dialog-theme-default ${className}`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "formio-dialog-overlay",
     onClick: onClickClose
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React$1.createElement("div", {
     style: style,
     className: "formio-dialog-content"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "formio-dialog-wrapper"
-  }, title ? /*#__PURE__*/React.createElement("div", {
+  }, title ? /*#__PURE__*/React$1.createElement("div", {
     className: "formio-dialog-title",
     ref: titleRef,
     "data-testid": "modalTitle"
-  }, title) : null, /*#__PURE__*/React.createElement("div", {
+  }, title) : null, /*#__PURE__*/React$1.createElement("div", {
     className: "formio-dialog-body",
     style: {
       maxHeight
     },
     "data-testid": "modalBody"
-  }, show && children), ModalFooter ? /*#__PURE__*/React.createElement("div", {
+  }, show && children), ModalFooter ? /*#__PURE__*/React$1.createElement("div", {
     className: "formio-dialog-footer",
     ref: footerRef,
     "data-testid": "modalFooter"
-  }, /*#__PURE__*/React.createElement(ModalFooter, _extends({}, props, {
+  }, /*#__PURE__*/React$1.createElement(ModalFooter, _extends({}, props, {
     closeModal: closeModal,
     onClose: onClickClose
-  }))) : null), /*#__PURE__*/React.createElement("button", {
+  }))) : null), /*#__PURE__*/React$1.createElement("button", {
     className: "formio-dialog-close float-right btn btn-secondary btn-sm",
     "aria-label": "close",
     "data-testid": "closeModal",
@@ -7064,13 +7049,13 @@ function RemoveModalFooter({
   onClose,
   i18n = f => f
 }) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "flex items-center justify-center bg-white p-2"
-  }, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React$1.createElement("button", {
     "data-testid": "customCloseModal",
     className: "btn btn-outline-dark mx-2",
     onClick: onClose
-  }, i18n("Cancel")), /*#__PURE__*/React.createElement("button", {
+  }, i18n("Cancel")), /*#__PURE__*/React$1.createElement("button", {
     disabled: valueToCompare !== value,
     "data-testid": "customSubmitModal",
     className: "btn btn-danger mx-2",
@@ -7079,7 +7064,7 @@ function RemoveModalFooter({
         onSubmit(e);
       }
     }
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: classnames(iconClass(undefined, "trash"), "mr-2")
   }), i18n("Remove")));
 }
@@ -7094,7 +7079,7 @@ function RemoveModal(_ref) {
     i18n = f => f
   } = props;
   const [value, setValue] = useState();
-  return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
+  return /*#__PURE__*/React$1.createElement(Modal, _extends({}, props, {
     className: classnames(props.className, "formio-dialog-theme-remove"),
     style: {
       maxWidth
@@ -7102,11 +7087,11 @@ function RemoveModal(_ref) {
     title: `Drop ${(_props$itemType = props.itemType) == null ? void 0 : _props$itemType.toLowerCase()}`,
     value: value,
     footer: RemoveModalFooter
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React$1.createElement("div", {
     className: "px-4 pt-3 pb-5"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "pb-1"
-  }, 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, {
+  }, children, i18n("To drop"), " ", /*#__PURE__*/React$1.createElement("strong", null, props.valueToCompare), ",\xA0", i18n("type the"), "\xA0", /*#__PURE__*/React$1.createElement("strong", null, "\"", (_props$itemType2 = props.itemType) == null ? void 0 : _props$itemType2.toLowerCase(), "\""), "\xA0", i18n("name"), " ", /*#__PURE__*/React$1.createElement("strong", null, "\"", props.valueToCompare, "\""), "."), /*#__PURE__*/React$1.createElement(InputText, {
     name: "remove",
     value: value,
     onChange: (name, value) => setValue(value)
@@ -7114,23 +7099,23 @@ function RemoveModal(_ref) {
 }
 
 class ReactComponent extends Components.components.field {
-  /**
-   * This is the first phase of component building where the component is instantiated.
-   *
-   * @param component - The component definition created from the settings form.
-   * @param options - Any options passed into the renderer.
-   * @param data - The submission data where this component's data exists.
-   */ // eslint-disable-next-line no-useless-constructor,import/no-anonymous-default-export
+  /**
+   * This is the first phase of component building where the component is instantiated.
+   *
+   * @param component - The component definition created from the settings form.
+   * @param options - Any options passed into the renderer.
+   * @param data - The submission data where this component's data exists.
+   */
   constructor(component, options, data) {
     super(component, options, data);
     this.reactInstance = void 0;
     this.shouldSetValue = void 0;
     this.dataForSetting = void 0;
-    /**
-     * 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
+    /**
+     * 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.updateValue = (value, flags) => {
       flags = flags || {};
@@ -7144,37 +7129,37 @@ class ReactComponent extends Components.components.field {
   get $reactNode() {
     return this.refs[`react-${this.id}`];
   }
-  /**
-   * This method is called any time the component needs to be rebuilt. It is most frequently used to listen to other
-   * components using the this.on() function.
+  /**
+   * This method is called any time the component needs to be rebuilt. It is most frequently used to listen to other
+   * components using the this.on() function.
    */
   init() {
     return super.init();
   }
-  /**
-   * This method is called before the component is going to be destroyed, which is when the component instance is
-   * destroyed. This is different from detach which is when the component instance still exists but the dom instance is
-   * removed.
+  /**
+   * This method is called before the component is going to be destroyed, which is when the component instance is
+   * destroyed. This is different from detach which is when the component instance still exists but the dom instance is
+   * removed.
    */
   destroy() {
     return super.destroy();
   }
-  /**
-   * The second phase of component building where the component is rendered as an HTML string.
-   *
-   * @returns {string} - The return is the full string of the component
+  /**
+   * The second phase of component building where the component is rendered as an HTML string.
+   *
+   * @returns {string} - The return is the full string of the component
    */
   render() {
     // For react components, we simply render as a div which will become the react instance.
     // By calling super.render(string) it will wrap the component with the needed wrappers to make it a full component.
     return super.render(`<div ref="react-${this.id}"></div>`);
   }
-  /**
-   * The third phase of component building where the component has been attached to the DOM as 'element' and is ready
-   * to have its javascript events attached.
-   *
-   * @param element
-   * @returns {Promise<void>} - Return a promise that resolves when the attach is complete.
+  /**
+   * The third phase of component building where the component has been attached to the DOM as 'element' and is ready
+   * to have its javascript events attached.
+   *
+   * @param element
+   * @returns {Promise<void>} - Return a promise that resolves when the attach is complete.
    */
   async attach(element) {
     super.attach(element);
@@ -7193,9 +7178,9 @@ class ReactComponent extends Components.components.field {
       }
     }
   }
-  /**
-   * The fourth phase of component building where the component is being removed from the page. This could be a redraw
-   * or it is being removed from the form.
+  /**
+   * The fourth phase of component building where the component is being removed from the page. This could be a redraw
+   * or it is being removed from the form.
    */
   detach() {
     // @ts-ignore
@@ -7205,38 +7190,37 @@ class ReactComponent extends Components.components.field {
     }
     super.detach();
   }
-  /**
-   * Override this function to render a react component.
+  /**
+   * Override this function to render a react component.
    */
   renderReact() {
     return null;
   }
-  /**
-   * Override this function to insert your custom component.
-   *
-   * @param element
+  /**
+   * Override this function to insert your custom component.
+   *
+   * @param element
    */
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   attachReact(element) {
-    // eslint-disable-next-line react/no-render-return-value
+    // eslint-disable-next-line react/no-render-return-value,react/no-deprecated
     return ReactDOM.render(this.renderReact(), element);
   }
-  /**
-   * Override this function.
+  /**
+   * Override this function.
    */
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   detachReact(element) {
     if (element) {
+      // eslint-disable-next-line react/no-deprecated
       ReactDOM.unmountComponentAtNode(element);
     }
   }
-  /**
-   * Something external has set a value and our component needs to be updated to reflect that. For example, loading a submission.
-   *
-   * @param value
-   * @param flags
+  /**
+   * Something external has set a value and our component needs to be updated to reflect that. For example, loading a submission.
+   *
+   * @param value
+   * @param flags
    */
-  setValue(value, flags) {
+  setValue(value) {
     if (this.reactInstance) {
       this.reactInstance.setState({
         value: value
@@ -7248,10 +7232,10 @@ class ReactComponent extends Components.components.field {
     }
     return false;
   }
-  /**
-   * Get the current value of the component. Should return the value set in the react component.
-   *
-   * @returns {*}
+  /**
+   * Get the current value of the component. Should return the value set in the react component.
+   *
+   * @returns {*}
    */
   getValue() {
     if (this.reactInstance) {
@@ -7259,13 +7243,13 @@ class ReactComponent extends Components.components.field {
     }
     return this.defaultValue;
   }
-  /**
-   * Override normal validation check to insert custom validation in react component.
-   *
-   * @param data
-   * @param dirty
-   * @param rowData
-   * @returns {boolean}
+  /**
+   * Override normal validation check to insert custom validation in react component.
+   *
+   * @param data
+   * @param dirty
+   * @param rowData
+   * @returns {boolean}
    */
   checkValidity(data, dirty, rowData) {
     const valid = super.checkValidity(data, dirty, rowData);
@@ -7285,17 +7269,17 @@ function DefaultCell({
   render = f => f
 }) {
   if (value === undefined) {
-    return /*#__PURE__*/React.createElement("span", null);
+    return /*#__PURE__*/React$1.createElement("span", null);
   }
   const rendered = render(value);
   if (value !== rendered) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React$1.createElement("div", {
       dangerouslySetInnerHTML: {
         __html: rendered
       }
     });
   }
-  return /*#__PURE__*/React.createElement("span", null, String(value));
+  return /*#__PURE__*/React$1.createElement("span", null, String(value));
 }
 
 function mapFormToColumns(form) {
@@ -7307,7 +7291,7 @@ function mapFormToColumns(form) {
         Header: component.label || component.title || component.key,
         accessor: `data.${component.key}`,
         className: "text-center",
-        Cell: props => /*#__PURE__*/React.createElement(DefaultCell, _extends({}, props, {
+        Cell: props => /*#__PURE__*/React$1.createElement(DefaultCell, _extends({}, props, {
           render: value => cmp.asString(value)
         }))
       };
@@ -7328,7 +7312,7 @@ function SubmissionsTable(_ref) {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   const columns = form && mapFormToColumns(form);
-  return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
+  return /*#__PURE__*/React$1.createElement(Table, _extends({}, props, {
     columns: columns
   }));
 }
@@ -7341,7 +7325,7 @@ function SliderColumnFilter({
     id
   }
 }) {
-  const [min, max] = React.useMemo(() => {
+  const [min, max] = React$1.useMemo(() => {
     let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
     let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
     preFilteredRows.forEach(row => {
@@ -7350,7 +7334,7 @@ function SliderColumnFilter({
     });
     return [min, max];
   }, [id, preFilteredRows]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("input", {
     type: "range",
     min: min,
     max: max,
@@ -7358,7 +7342,7 @@ function SliderColumnFilter({
     onChange: e => {
       setFilter(parseInt(e.target.value, 10));
     }
-  }), /*#__PURE__*/React.createElement("button", {
+  }), /*#__PURE__*/React$1.createElement("button", {
     onClick: () => setFilter(undefined)
   }, "Off"));
 }
@@ -7374,18 +7358,18 @@ function ButtonTab({
   className,
   after
 }) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     title: "button-wrapper",
     className: classnames("tw-tabs__button-wrapper", isActive ? "-active" : "", back ? "-back" : "", className)
-  }, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React$1.createElement("button", {
     title: "button-tab",
     className: classnames("tw-tabs__button", reverse ? "-reverse" : "", isActive ? "-active" : "", back ? "-back" : ""),
     onClick: onClick
-  }, icon && /*#__PURE__*/React.createElement("i", {
+  }, icon && /*#__PURE__*/React$1.createElement("i", {
     className: classnames(iconClass(undefined, icon), "tw-tabs__button-icon")
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React$1.createElement("span", {
     className: "tw-tabs__button-label"
-  }, children), after), /*#__PURE__*/React.createElement("div", {
+  }, children), after), /*#__PURE__*/React$1.createElement("div", {
     className: classnames("tw-tabs__button-border", isActive ? "-active" : "")
   }));
 }
@@ -7403,18 +7387,18 @@ function Tabs(_ref) {
       i18n = f => f
     } = _ref,
     additionalProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     "data-testid": "tabs-comp",
     className: `tw-tabs ${className}`,
     style: style
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("nav", {
+  }, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("nav", {
     className: "tw-tabs__header"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "tw-tabs__header-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "tw-tabs__header-border"
   }), items.filter(item => item.label || item.icon).map((item, index) => {
-    return /*#__PURE__*/React.createElement(Button, _extends({
+    return /*#__PURE__*/React$1.createElement(Button, _extends({
       key: index,
       back: item.back,
       isActive: (current == null ? void 0 : current.action) === item.action,
@@ -7423,11 +7407,11 @@ function Tabs(_ref) {
         onClick && onClick(item);
       }
     }, additionalProps, item), i18n(item.label || ""));
-  }), AddButton && /*#__PURE__*/React.createElement(AddButton, _extends({}, additionalProps, {
+  }), AddButton && /*#__PURE__*/React$1.createElement(AddButton, _extends({}, additionalProps, {
     current: current
-  })))), HeaderChildren && /*#__PURE__*/React.createElement(HeaderChildren, _extends({}, additionalProps, {
+  })))), HeaderChildren && /*#__PURE__*/React$1.createElement(HeaderChildren, _extends({}, additionalProps, {
     current: current
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React$1.createElement("div", {
     title: "tab-body",
     className: "tw-tabs__body"
   }, children));