@tsed/react-formio 2.3.0 → 2.3.2

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,7 @@ function DefaultColumnFilter(props) {
     setFilterId(id);
     setFilter(value || undefined);
   }, [id, setValue, setFilterId, setFilter]);
-  return /*#__PURE__*/React.createElement(InputText, {
+  return /*#__PURE__*/React$1.createElement(InputText, {
     size: "sm",
     id: id,
     name: id,
@@ -617,22 +602,25 @@ 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
+    } = 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 +636,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 +672,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 +696,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 +739,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 +789,7 @@ function useCustomTable(props) {
       filters
     }
   } = tableInstance;
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     onChange({
       pageIndex,
       pageSize,
@@ -859,26 +848,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 +876,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 +907,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 +922,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 +945,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 +957,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 +975,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 +986,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 +1148,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
@@ -1458,7 +1448,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 +1462,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,52 +1479,44 @@ 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"];
@@ -1580,7 +1562,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 +1600,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 +1678,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 +1752,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 +1828,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 +1872,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 +1884,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 +1894,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 +1914,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,
@@ -2118,14 +2100,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 +2119,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 +2261,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 +2320,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 +6868,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 +6911,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 +6922,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 +6940,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 +7002,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 +7046,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 +7061,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 +7076,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 +7084,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)
@@ -7285,17 +7267,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 +7289,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 +7310,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 +7323,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 +7332,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 +7340,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 +7356,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 +7385,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 +7405,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));