@tsed/react-formio 2.3.1 → 2.3.3

package/dist/index.js

@@ -4,13 +4,13 @@ var Wizard = require('formiojs/Wizard');
 var WizardBuilder = require('formiojs/WizardBuilder');
 var classnames = require('classnames');
 var noop = require('lodash/noop');
-var React = require('react');
+var React$1 = require('react');
 var formiojs = require('formiojs');
 var Choices = require('@formio/choices.js');
-var PropTypes = require('prop-types');
 var reactDnd = require('react-dnd');
 var reactDndHtml5Backend = require('react-dnd-html5-backend');
 var reactTable = require('react-table');
+var PropTypes = require('prop-types');
 var AllComponents = require('formiojs/components');
 var cloneDeep = require('lodash/cloneDeep');
 var isEqual = require('lodash/isEqual');
@@ -31,7 +31,7 @@ var Wizard__default = /*#__PURE__*/_interopDefaultLegacy(Wizard);
 var WizardBuilder__default = /*#__PURE__*/_interopDefaultLegacy(WizardBuilder);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
 var Choices__default = /*#__PURE__*/_interopDefaultLegacy(Choices);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var AllComponents__default = /*#__PURE__*/_interopDefaultLegacy(AllComponents);
@@ -46,23 +46,6 @@ var camelCase__default = /*#__PURE__*/_interopDefaultLegacy(camelCase);
 var noop__default$1 = /*#__PURE__*/_interopDefaultLegacy(noop$1);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
-  }
-}
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  Object.defineProperty(Constructor, "prototype", {
-    writable: false
-  });
-  return Constructor;
-}
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -77,18 +60,6 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
-}
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -101,44 +72,32 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   }
   return target;
 }
-function _toPrimitive(input, hint) {
-  if (typeof input !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
 
 function iconClass(iconset, name, spinning) {
   return formiojs.Templates.current.iconClass(iconset || formiojs.Templates.current.defaultIconset, name, spinning);
 }
 
 function getEventValue(event) {
-  var target = event.target;
+  const {
+    target
+  } = event;
   if (event.target.multiple && event.target.selectedOptions) {
-    return Array.from(event.target.selectedOptions, function (option) {
-      return option.value;
-    });
+    return Array.from(event.target.selectedOptions, option => option.value);
   }
   return target.type === "checkbox" ? target.checked : target.value;
 }
 
 function FormControl(_ref) {
-  var children = _ref.children,
-    name = _ref.name,
-    required = _ref.required,
-    prefix = _ref.prefix,
-    suffix = _ref.suffix,
-    description = _ref.description,
-    label = _ref.label,
-    className = _ref.className;
+  let {
+    children,
+    name,
+    required,
+    prefix,
+    suffix,
+    description,
+    label,
+    className
+  } = _ref;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     "data-testid": name && "form-group-" + name,
     id: "form-group-" + (name || ""),
@@ -164,47 +123,42 @@ function FormControl(_ref) {
     className: "form-text text-muted"
   }, description));
 }
-FormControl.propTypes = {
-  label: PropTypes__default["default"].string,
-  name: PropTypes__default["default"].string.isRequired,
-  children: PropTypes__default["default"].any,
-  required: PropTypes__default["default"].bool,
-  description: PropTypes__default["default"].any
-};
 
-var _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) {
-  var name = _ref.name,
-    label = _ref.label,
-    size = _ref.size,
-    _onChange = _ref.onChange,
-    required = _ref.required,
-    value = _ref.value,
-    choices = _ref.choices,
-    description = _ref.description,
-    placeholder = _ref.placeholder,
-    prefix = _ref.prefix,
-    suffix = _ref.suffix,
-    multiple = _ref.multiple,
-    layout = _ref.layout,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
-  var ref = React.useRef();
-  React.useEffect(function () {
-    var instance;
+  let {
+      name,
+      label,
+      size,
+      onChange,
+      required,
+      value,
+      choices,
+      description,
+      placeholder,
+      prefix,
+      suffix,
+      multiple,
+      layout
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+  const ref = React$1.useRef(null);
+  React$1.useEffect(() => {
+    let instance;
     if (layout === "choicesjs") {
       instance = new Choices__default["default"](ref.current, {
         removeItemButton: true,
         placeholderValue: placeholder
       });
     }
-    return function () {
+    return () => {
       instance && instance.destroy();
     };
   }, []);
   choices = layout === "choicesjs" || multiple || !placeholder ? choices : [{
     label: placeholder,
     value: ""
-  }].concat(choices);
+  }, ...choices];
   return /*#__PURE__*/React__default["default"].createElement(FormControl, {
     name: name,
     label: label,
@@ -214,21 +168,23 @@ function Select(_ref) {
     suffix: suffix,
     shadow: false
   }, /*#__PURE__*/React__default["default"].createElement("select", _extends({
-    ref: ref
+    ref: ref,
+    "data-testid": "select_" + name
   }, props, {
-    "data-testid": "select_" + name,
     className: classnames__default["default"]("form-control", size && "form-control-" + size),
     name: name,
     id: name,
     multiple: multiple,
     value: value || "",
     placeholder: placeholder,
-    onChange: function onChange(event) {
-      _onChange && _onChange(name, getEventValue(event));
-    }
-  }), choices.map(function (_ref2) {
-    var label = _ref2.label,
-      value = _ref2.value;
+    onChange: event => {
+      onChange && onChange(name, getEventValue(event));
+    }
+  }), choices.map(_ref2 => {
+    let {
+      label,
+      value
+    } = _ref2;
     return /*#__PURE__*/React__default["default"].createElement("option", {
       key: String(value),
       label: label,
@@ -236,31 +192,25 @@ function Select(_ref) {
     }, label);
   })));
 }
-Select.propTypes = {
-  label: PropTypes__default["default"].string,
-  name: PropTypes__default["default"].string.isRequired,
-  value: PropTypes__default["default"].any,
-  required: PropTypes__default["default"].bool,
-  onChange: PropTypes__default["default"].func,
-  choices: PropTypes__default["default"].array.isRequired
-};
 
 function DrapNDropContainer(_ref) {
-  var enableDragNDrop = _ref.enableDragNDrop,
-    children = _ref.children;
+  let {
+    enableDragNDrop,
+    children
+  } = _ref;
   return enableDragNDrop ? /*#__PURE__*/React__default["default"].createElement(reactDnd.DndProvider, {
     backend: reactDndHtml5Backend.HTML5Backend
   }, children) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children);
 }
 
-var LEFT_PAGE = "LEFT";
-var RIGHT_PAGE = "RIGHT";
+const LEFT_PAGE = "LEFT";
+const RIGHT_PAGE = "RIGHT";
 function range(from, to, step) {
   if (step === void 0) {
     step = 1;
   }
-  var i = from;
-  var range = [];
+  let i = from;
+  const range = [];
   while (i <= to) {
     range.push(i);
     i += step;
@@ -268,44 +218,46 @@ function range(from, to, step) {
   return range;
 }
 function getPageNumbers(_ref) {
-  var currentPage = _ref.currentPage,
-    _ref$pageNeighbours = _ref.pageNeighbours,
-    pageNeighbours = _ref$pageNeighbours === void 0 ? 1 : _ref$pageNeighbours,
-    totalPages = _ref.totalPages;
-  var totalNumbers = pageNeighbours * 2 + 3;
-  var totalBlocks = totalNumbers + 2;
+  let {
+    currentPage,
+    pageNeighbours = 1,
+    totalPages
+  } = _ref;
+  const totalNumbers = pageNeighbours * 2 + 3;
+  const totalBlocks = totalNumbers + 2;
   if (totalPages > totalBlocks) {
-    var calculatedStartPage = Math.max(2, currentPage - pageNeighbours);
-    var calculatedEndPage = Math.min(totalPages - 1, currentPage + pageNeighbours);
-    var startPage = calculatedStartPage === 3 ? 2 : calculatedStartPage;
-    var endPage = calculatedEndPage === totalPages - 2 ? totalPages - 1 : calculatedEndPage;
-    var pages = range(startPage, endPage);
-    var hasLeftSpill = startPage > 2;
-    var hasRightSpill = totalPages - endPage > 1;
-    var spillOffset = totalNumbers - (pages.length + 1);
-    var extraPages;
+    const calculatedStartPage = Math.max(2, currentPage - pageNeighbours);
+    const calculatedEndPage = Math.min(totalPages - 1, currentPage + pageNeighbours);
+    const startPage = calculatedStartPage === 3 ? 2 : calculatedStartPage;
+    const endPage = calculatedEndPage === totalPages - 2 ? totalPages - 1 : calculatedEndPage;
+    let pages = range(startPage, endPage);
+    const hasLeftSpill = startPage > 2;
+    const hasRightSpill = totalPages - endPage > 1;
+    const spillOffset = totalNumbers - (pages.length + 1);
+    let extraPages;
     if (hasLeftSpill && !hasRightSpill) {
       extraPages = range(startPage - spillOffset, startPage - 1);
-      pages = [LEFT_PAGE].concat(extraPages, pages);
+      pages = [LEFT_PAGE, ...extraPages, ...pages];
     } else if (!hasLeftSpill && hasRightSpill) {
       extraPages = range(endPage + 1, endPage + spillOffset);
-      pages = [].concat(pages, extraPages, [RIGHT_PAGE]);
+      pages = [...pages, ...extraPages, RIGHT_PAGE];
     } else {
-      pages = [LEFT_PAGE].concat(pages, [RIGHT_PAGE]);
+      pages = [LEFT_PAGE, ...pages, RIGHT_PAGE];
     }
-    return [1].concat(pages, [totalPages]);
+    return [1, ...pages, totalPages];
   }
   return range(1, totalPages);
 }
 
-var _excluded$e = ["component", "children", "disabled", "active"];
+const _excluded$f = ["component", "children", "disabled", "active"];
 function PaginationButton(props) {
-  var _props$component = props.component,
-    Component = _props$component === void 0 ? "button" : _props$component,
-    children = props.children,
-    disabled = props.disabled,
-    active = props.active,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded$e);
+  const {
+      component: Component = "button",
+      children,
+      disabled,
+      active
+    } = props,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded$f);
   return /*#__PURE__*/React__default["default"].createElement(Component, _extends({}, otherProps, {
     "data-testid": "pagination-button",
     disabled: disabled,
@@ -313,36 +265,31 @@ function PaginationButton(props) {
   }), children);
 }
 function Pagination(props) {
-  var className = props.className,
-    _props$pageSizes = props.pageSizes,
-    pageSizes = _props$pageSizes === void 0 ? [10, 25, 50, 100] : _props$pageSizes,
-    gotoPage = props.gotoPage,
-    canPreviousPage = props.canPreviousPage,
-    previousPage = props.previousPage,
-    nextPage = props.nextPage,
-    canNextPage = props.canNextPage,
-    pageCount = props.pageCount,
-    _props$pageIndex = props.pageIndex,
-    pageIndex = _props$pageIndex === void 0 ? 1 : _props$pageIndex,
-    pageOptions = props.pageOptions,
-    pageSize = props.pageSize,
-    setPageSize = props.setPageSize,
-    totalLength = props.totalLength,
-    _props$i18n = props.i18n,
-    i18n = _props$i18n === void 0 ? function (f) {
-      return f;
-    } : _props$i18n;
-  var pageNumbers = getPageNumbers({
+  const {
+    className,
+    pageSizes = [10, 25, 50, 100],
+    gotoPage,
+    canPreviousPage,
+    previousPage,
+    nextPage,
+    canNextPage,
+    pageCount,
+    pageIndex = 1,
+    pageOptions,
+    pageSize,
+    setPageSize,
+    totalLength,
+    i18n = f => f
+  } = props;
+  const pageNumbers = getPageNumbers({
     currentPage: pageIndex,
     // pageNeighbours,
     totalPages: pageCount
   });
-  var choices = pageSizes.map(function (value) {
-    return {
-      value: value,
-      label: value
-    };
-  });
+  const choices = pageSizes.map(value => ({
+    value,
+    label: value
+  }));
   return /*#__PURE__*/React__default["default"].createElement("nav", {
     "aria-label": "Page navigation",
     className: classnames__default["default"]("pagination-group -mb-3", className)
@@ -353,10 +300,8 @@ function Pagination(props) {
   }, /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
     tabIndex: -1,
     disabled: !canPreviousPage,
-    onClick: function onClick() {
-      return previousPage();
-    }
-  }, i18n("Previous"))), pageNumbers.map(function (page) {
+    onClick: () => previousPage()
+  }, i18n("Previous"))), pageNumbers.map(page => {
     if ([LEFT_PAGE, RIGHT_PAGE].includes(page)) {
       return /*#__PURE__*/React__default["default"].createElement("li", {
         className: "page-item",
@@ -365,32 +310,28 @@ function Pagination(props) {
         "aria-hidden": "true"
       }, "..."));
     }
-    var active = page - 1 === pageIndex;
+    const active = page - 1 === pageIndex;
     return /*#__PURE__*/React__default["default"].createElement("li", {
       className: classnames__default["default"]("page-item", active && "active"),
       key: page
     }, /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
       tabIndex: pageIndex,
       active: active,
-      onClick: function onClick() {
-        return gotoPage(page - 1);
-      }
+      onClick: () => gotoPage(page - 1)
     }, page));
   }), /*#__PURE__*/React__default["default"].createElement("li", {
     className: classnames__default["default"]("page-item", !canNextPage && "disabled")
   }, /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
     tabIndex: pageNumbers.length,
     disabled: !canNextPage,
-    onClick: function onClick() {
-      return nextPage();
-    }
+    onClick: () => nextPage()
   }, i18n("Next")))), /*#__PURE__*/React__default["default"].createElement("li", {
     className: "mb-3 mr-3 flex items-center"
   }, /*#__PURE__*/React__default["default"].createElement(Select, {
     name: "page",
     value: pageSize,
     choices: choices,
-    onChange: function onChange(name, value) {
+    onChange: (name, value) => {
       setPageSize(+value);
     }
   }), /*#__PURE__*/React__default["default"].createElement("span", {
@@ -406,9 +347,13 @@ function Pagination(props) {
 }
 
 function DefaultArrowSort(_ref) {
-  var column = _ref.column;
-  var isSorted = column.isSorted,
-    isSortedDesc = column.isSortedDesc;
+  let {
+    column
+  } = _ref;
+  const {
+    isSorted,
+    isSortedDesc
+  } = column;
   return /*#__PURE__*/React__default["default"].createElement("span", {
     className: "table-arrow-sort"
   }, isSorted ? /*#__PURE__*/React__default["default"].createElement("i", {
@@ -417,7 +362,9 @@ function DefaultArrowSort(_ref) {
 }
 
 function DefaultCellHeader(_ref) {
-  var column = _ref.column;
+  let {
+    column
+  } = _ref;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "table-cell-header"
   }, /*#__PURE__*/React__default["default"].createElement("div", _extends({
@@ -427,95 +374,94 @@ function DefaultCellHeader(_ref) {
   }, column.render("Filter")) : null);
 }
 
-var _excluded$d = ["onDrag", "onDrop", "index"];
-var DND_ITEM_TYPE = "row";
+const _excluded$e = ["onDrag", "onDrop", "index"];
+const DND_ITEM_TYPE = "row";
 function useDndRow(_ref) {
-  var onDrag = _ref.onDrag,
-    onDrop = _ref.onDrop,
-    index = _ref.index,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-  var dropRef = React.useRef(null);
-  var dragRef = React.useRef(null);
-  var _useDrop = reactDnd.useDrop({
-      accept: DND_ITEM_TYPE,
-      drop: function drop(item) {
-        onDrop(item);
-      },
-      hover: function hover(item, monitor) {
-        if (!dropRef.current) {
-          return;
-        }
-        var dragIndex = item.index;
-        var hoverIndex = index;
-        // Don't replace items with themselves
-        if (dragIndex === hoverIndex) {
-          return;
-        }
-        // Determine rectangle on screen
-        var hoverBoundingRect = dropRef.current.getBoundingClientRect();
-        // Get vertical middle
-        var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-        // Determine mouse position
-        var clientOffset = monitor.getClientOffset();
-        if (!clientOffset) {
-          return;
-        }
-        // Get pixels to the top
-        var hoverClientY = clientOffset.y - hoverBoundingRect.top;
-        // Only perform the move when the mouse has crossed half of the items height
-        // When dragging downwards, only move when the cursor is below 50%
-        // When dragging upwards, only move when the cursor is above 50%
-        // Dragging downwards
-        if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-          return;
-        }
-        // Dragging upwards
-        if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-          return;
-        }
-        // Time to actually perform the action
-        onDrag(dragIndex, hoverIndex);
-        // Note: we're mutating the monitor item here!
-        // Generally it's better to avoid mutations,
-        // but it's good here for the sake of performance
-        // to avoid expensive index searches.
-        item.index = hoverIndex;
+  let {
+      onDrag,
+      onDrop,
+      index
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+  const dropRef = React$1.useRef(null);
+  const dragRef = React$1.useRef(null);
+  const [, drop] = reactDnd.useDrop({
+    accept: DND_ITEM_TYPE,
+    drop(item) {
+      onDrop(item);
+    },
+    hover(item, monitor) {
+      if (!dropRef.current) {
+        return;
       }
-    }),
-    drop = _useDrop[1];
-  var _useDrag = reactDnd.useDrag(function () {
-      return {
-        type: DND_ITEM_TYPE,
-        item: {
-          index: index
-        },
-        collect: function collect(monitor) {
-          return {
-            isDragging: monitor.isDragging()
-          };
-        }
-      };
-    }),
-    isDragging = _useDrag[0].isDragging,
-    drag = _useDrag[1],
-    preview = _useDrag[2];
-  var opacity = isDragging ? 0 : 1;
+      const dragIndex = item.index;
+      const hoverIndex = index;
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+      // Determine rectangle on screen
+      const hoverBoundingRect = dropRef.current.getBoundingClientRect();
+      // Get vertical middle
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      // Determine mouse position
+      const clientOffset = monitor.getClientOffset();
+      if (!clientOffset) {
+        return;
+      }
+      // Get pixels to the top
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+      // Only perform the move when the mouse has crossed half of the items height
+      // When dragging downwards, only move when the cursor is below 50%
+      // When dragging upwards, only move when the cursor is above 50%
+      // Dragging downwards
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return;
+      }
+      // Dragging upwards
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return;
+      }
+      // Time to actually perform the action
+      onDrag(dragIndex, hoverIndex);
+      // Note: we're mutating the monitor item here!
+      // Generally it's better to avoid mutations,
+      // but it's good here for the sake of performance
+      // to avoid expensive index searches.
+      item.index = hoverIndex;
+    }
+  });
+  const [{
+    isDragging
+  }, drag, preview] = reactDnd.useDrag(() => ({
+    type: DND_ITEM_TYPE,
+    item: {
+      index
+    },
+    collect: monitor => ({
+      isDragging: monitor.isDragging()
+    })
+  }));
+  const opacity = isDragging ? 0 : 1;
   preview(drop(dropRef));
   drag(dragRef);
   return _extends({}, props, {
-    opacity: opacity,
-    isDragging: isDragging,
-    dropRef: dropRef,
-    dragRef: dragRef
+    opacity,
+    isDragging,
+    dropRef,
+    dragRef
   });
 }
 
 function DefaultCells(_ref) {
-  var row = _ref.row;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, row.cells.map(function (cell, i) {
-    var _cell$column = cell.column,
-      hidden = _cell$column.hidden,
-      colspan = _cell$column.colspan;
+  let {
+    row
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, row.cells.map((cell, i) => {
+    const {
+      hidden,
+      colspan
+    } = cell.column;
     if (hidden) {
       return null;
     }
@@ -530,17 +476,18 @@ function DefaultCells(_ref) {
   }));
 }
 
-var _excluded$c = ["onClick", "row", "enableDragNDrop", "onDrop", "onDrag"];
+const _excluded$d = ["onClick", "row", "enableDragNDrop", "onDrop", "onDrag"];
 function DefaultDndRow(props) {
-  var _useDndRow = useDndRow(props),
-    isDragging = _useDndRow.isDragging,
-    dragRef = _useDndRow.dragRef,
-    dropRef = _useDndRow.dropRef,
-    opacity = _useDndRow.opacity;
+  const {
+    isDragging,
+    dragRef,
+    dropRef,
+    opacity
+  } = useDndRow(props);
   return /*#__PURE__*/React__default["default"].createElement("tr", {
     ref: dropRef,
     style: {
-      opacity: opacity
+      opacity
     }
   }, /*#__PURE__*/React__default["default"].createElement("td", {
     ref: dragRef,
@@ -556,16 +503,16 @@ function DefaultDndRow(props) {
   }))), /*#__PURE__*/React__default["default"].createElement(DefaultCells, props));
 }
 function DefaultRow(_ref) {
-  var _onClick = _ref.onClick,
-    row = _ref.row,
-    enableDragNDrop = _ref.enableDragNDrop,
-    onDrop = _ref.onDrop,
-    onDrag = _ref.onDrag,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
-  var opts = _extends({}, props, {
-    onClick: function onClick() {
-      return _onClick(row.original, "row");
-    }
+  let {
+      onClick,
+      row,
+      enableDragNDrop,
+      onDrop,
+      onDrag
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  const opts = _extends({}, props, {
+    onClick: () => onClick(row.original, "row")
   }, row.getRowProps());
   if (enableDragNDrop) {
     return /*#__PURE__*/React__default["default"].createElement(DefaultDndRow, _extends({}, opts, {
@@ -580,41 +527,36 @@ function DefaultRow(_ref) {
 }
 
 function callLast(fn, time) {
-  var last = null;
+  let last = null;
   return function () {
-    var _arguments = arguments;
     if (last) {
       clearTimeout(last);
       last = null;
     }
-    last = setTimeout(function () {
-      return fn.apply(void 0, [].slice.call(_arguments));
-    }, time);
+    last = setTimeout(() => fn(...[].slice.call(arguments)), time);
   };
 }
 
-var _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) {
-  var name = _ref.name,
-    value = _ref.value,
-    label = _ref.label,
-    onChange = _ref.onChange,
-    required = _ref.required,
-    size = _ref.size,
-    type = _ref.type,
-    prefix = _ref.prefix,
-    suffix = _ref.suffix,
-    description = _ref.description,
-    className = _ref.className,
-    placeholder = _ref.placeholder,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
-  var _useState = React.useState(value),
-    localValue = _useState[0],
-    setValue = _useState[1];
-  var change = React.useMemo(function () {
-    return onChange && callLast(onChange, 300);
-  }, [onChange]);
-  React.useEffect(function () {
+  let {
+      name,
+      value,
+      label,
+      onChange,
+      required,
+      size,
+      type,
+      prefix,
+      suffix,
+      description,
+      className,
+      placeholder
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+  const [localValue, setValue] = React$1.useState(value);
+  const change = React$1.useMemo(() => onChange && callLast(onChange, 300), [onChange]);
+  React$1.useEffect(() => {
     setValue(value);
   }, [value]);
   return /*#__PURE__*/React__default["default"].createElement(FormControl, {
@@ -634,8 +576,8 @@ function InputText(_ref) {
     required: required,
     value: localValue || "",
     placeholder: placeholder,
-    onChange: function onChange(event) {
-      var value = getEventValue(event);
+    onChange: event => {
+      const value = getEventValue(event);
       setValue(value);
       return change && change(name, value);
     }
@@ -654,20 +596,22 @@ InputText.propTypes = {
 };
 
 function DefaultColumnFilter(props) {
-  var filterId = props.filterId,
-    setFilterId = props.setFilterId,
-    _props$column = props.column,
-    id = _props$column.id,
-    filterValue = _props$column.filterValue,
-    setFilter = _props$column.setFilter;
-  var _useState = React.useState(filterValue || ""),
-    value = _useState[0],
-    setValue = _useState[1];
-  var onChange = React.useCallback(function (name, value) {
+  const {
+    filterId,
+    setFilterId,
+    column: {
+      id,
+      filterValue,
+      setFilter
+    }
+  } = props;
+  const [value, setValue] = React$1.useState(filterValue || "");
+  const onChange = React$1.useCallback((name, value) => {
     setValue(value);
     setFilterId(id);
     setFilter(value || undefined);
   }, [id, setValue, setFilterId, setFilter]);
+  /* eslint-disable jsx-a11y/no-autofocus */
   return /*#__PURE__*/React__default["default"].createElement(InputText, {
     size: "sm",
     id: id,
@@ -680,74 +624,72 @@ function DefaultColumnFilter(props) {
   });
 }
 
-var swapElements = function swapElements(myArray, index1, index2) {
-  myArray = [].concat(myArray);
-  var _ref = [myArray[index2], myArray[index1]];
-  myArray[index1] = _ref[0];
-  myArray[index2] = _ref[1];
+const swapElements = (myArray, index1, index2) => {
+  myArray = [...myArray];
+  [myArray[index1], myArray[index2]] = [myArray[index2], myArray[index1]];
   return myArray;
 };
 
-var stopPropagationWrapper = function stopPropagationWrapper(fn) {
-  return function (event) {
-    event.stopPropagation();
-    fn();
-  };
+const stopPropagationWrapper = fn => event => {
+  event.stopPropagation();
+  fn();
 };
 
+const _excluded$b = ["className", "buttonSize", "buttonType", "buttonOutline", "onClick", "action", "icon", "title", "i18n", "data", "ctx"];
 function DefaultOperationButton(props) {
-  var _props$className = props.className,
-    className = _props$className === void 0 ? "btn" : _props$className,
-    _props$buttonSize = props.buttonSize,
-    buttonSize = _props$buttonSize === void 0 ? "xs" : _props$buttonSize,
-    _props$buttonType = props.buttonType,
-    buttonType = _props$buttonType === void 0 ? "primary" : _props$buttonType,
-    buttonOutline = props.buttonOutline,
-    onClick = props.onClick,
-    action = props.action,
-    _props$icon = props.icon,
-    icon = _props$icon === void 0 ? "" : _props$icon,
-    _props$title = props.title,
-    title = _props$title === void 0 ? "" : _props$title,
-    _props$i18n = props.i18n,
-    i18n = _props$i18n === void 0 ? function (f) {
-      return f;
-    } : _props$i18n;
-  return /*#__PURE__*/React__default["default"].createElement("button", {
+  const {
+      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__default["default"](className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), "btn-" + buttonSize),
-    onClick: stopPropagationWrapper(function () {
-      return onClick(action);
-    })
-  }, icon ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("i", {
+    onClick: stopPropagationWrapper(() => onClick(action))
+  }), icon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
     className: iconClass(undefined, icon)
-  }), " ", title && " ") : null, title && /*#__PURE__*/React__default["default"].createElement("span", {
+  }), " ", title && " ") : null, title && /*#__PURE__*/React.createElement("span", {
     className: icon && title ? "ml-1" : ""
   }, i18n(title)));
 }
 
-var _excluded$a = ["OperationButton"];
+const _excluded$a = ["OperationButton"];
 function DefaultCellOperations(_ref) {
-  var operations = _ref.operations,
-    row = _ref.row,
-    _onClick = _ref.onClick,
-    ctx = _ref.ctx,
-    i18n = _ref.i18n;
-  var data = row.original;
+  let {
+    operations,
+    row,
+    onClick,
+    ctx,
+    i18n
+  } = _ref;
+  const data = row.original;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "btn-group"
-  }, operations.filter(function (_ref2) {
-    var permissionsResolver = _ref2.permissionsResolver;
+  }, operations.filter(_ref2 => {
+    let {
+      permissionsResolver
+    } = _ref2;
     return !permissionsResolver || permissionsResolver(data, ctx);
-  }).map(function (_ref3) {
-    var _ref3$OperationButton = _ref3.OperationButton,
-      OperationButton = _ref3$OperationButton === void 0 ? DefaultOperationButton : _ref3$OperationButton,
+  }).map((_ref3, index) => {
+    let {
+        OperationButton = DefaultOperationButton
+      } = _ref3,
       operation = _objectWithoutPropertiesLoose(_ref3, _excluded$a);
     return /*#__PURE__*/React__default["default"].createElement(OperationButton, _extends({
       key: operation.action
     }, operation, {
-      onClick: function onClick(action) {
-        return _onClick(data, action);
-      },
+      "data-testid": "operation-" + index + "-" + operation.action,
+      onClick: action => onClick(data, action),
       data: data,
       i18n: i18n,
       ctx: ctx
@@ -756,47 +698,39 @@ function DefaultCellOperations(_ref) {
 }
 
 function useOperations(_ref) {
-  var operations = _ref.operations,
-    _ref$CellOperations = _ref.CellOperations,
-    CellOperations = _ref$CellOperations === void 0 ? DefaultCellOperations : _ref$CellOperations,
-    onClick = _ref.onClick,
-    _ref$i18n = _ref.i18n,
-    i18n = _ref$i18n === void 0 ? function (f) {
-      return f;
-    } : _ref$i18n,
-    ctx = _ref.ctx;
-  return function (hooks) {
-    hooks.visibleColumns.push(function (columns) {
+  let {
+    operations,
+    CellOperations = DefaultCellOperations,
+    onClick,
+    i18n = f => f,
+    ctx
+  } = _ref;
+  return hooks => {
+    hooks.visibleColumns.push(columns => {
       if (!operations.length) {
         return columns;
       }
-      return [].concat(columns, [{
+      return [...columns, {
         id: "operations",
         groupByBoundary: true,
-        Header: function Header() {
-          return /*#__PURE__*/React__default["default"].createElement("div", {
-            className: "text-center"
-          }, i18n("Operations"));
-        },
-        Cell: function Cell(props) {
-          return /*#__PURE__*/React__default["default"].createElement(CellOperations, _extends({}, props, {
-            operations: operations,
-            onClick: onClick,
-            ctx: ctx,
-            i18n: i18n
-          }));
-        }
-      }]);
+        Header: () => /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "text-center"
+        }, i18n("Operations")),
+        Cell: props => /*#__PURE__*/React__default["default"].createElement(CellOperations, _extends({}, props, {
+          operations: operations,
+          onClick: onClick,
+          ctx: ctx,
+          i18n: i18n
+        }))
+      }];
     });
   };
 }
 
-var _excluded$9 = ["children", "className", "columns", "data", "onChange", "onClick", "onDrag", "onDrop", "operations", "pageSizes", "filters", "filterId", "pageSize", "pageIndex", "totalLength", "sortBy", "isLoading", "disableFilters", "disablePagination", "ArrowSort", "ColumnFilter", "EmptyData", "Loader", "Pagination", "Row", "CellHeader", "CellOperations", "i18n"];
+const _excluded$9 = ["children", "className", "columns", "data", "onChange", "onClick", "onDrag", "onDrop", "operations", "pageSizes", "filters", "filterId", "pageSize", "pageIndex", "totalLength", "sortBy", "isLoading", "disableFilters", "disablePagination", "ArrowSort", "ColumnFilter", "EmptyData", "Loader", "Pagination", "Row", "CellHeader", "CellOperations", "i18n"];
 function getOperationCallback(operations, onClick) {
-  return function (data, action) {
-    var operation = operations.find(function (operation) {
-      return operation.action === action || operation.alias === action;
-    });
+  return (data, action) => {
+    const operation = operations.find(operation => operation.action === action || operation.alias === action);
     if (operation) {
       onClick(data, operation);
     }
@@ -812,82 +746,61 @@ function DefaultEmptyData() {
     className: "text-center p-2 pb-4 font-bold"
   }, "No data found");
 }
-var hooks = [reactTable.useFilters, reactTable.useGroupBy, reactTable.useSortBy, reactTable.usePagination];
+const hooks = [reactTable.useFilters, reactTable.useGroupBy, reactTable.useSortBy, reactTable.usePagination];
 function useCustomTable(props) {
-  var children = props.children,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className,
-    columns = props.columns,
-    data = props.data,
-    _props$onChange = props.onChange,
-    onChange = _props$onChange === void 0 ? noop__default["default"] : _props$onChange,
-    _props$onClick = props.onClick,
-    onClick = _props$onClick === void 0 ? noop__default["default"] : _props$onClick,
-    _props$onDrag = props.onDrag,
-    onDrag = _props$onDrag === void 0 ? noop__default["default"] : _props$onDrag,
-    _props$onDrop = props.onDrop,
-    onDrop = _props$onDrop === void 0 ? noop__default["default"] : _props$onDrop,
-    _props$operations = props.operations,
-    operations = _props$operations === void 0 ? [] : _props$operations,
-    _props$pageSizes = props.pageSizes,
-    pageSizes = _props$pageSizes === void 0 ? [10, 25, 50, 100] : _props$pageSizes,
-    controlledFilters = props.filters,
-    controlledFilterId = props.filterId,
-    controlledPageSize = props.pageSize,
-    controlledPageIndex = props.pageIndex,
-    totalLength = props.totalLength,
-    controlledSortBy = props.sortBy,
-    isLoading = props.isLoading,
-    disableFilters = props.disableFilters,
-    disablePagination = props.disablePagination,
-    _props$ArrowSort = props.ArrowSort,
-    ArrowSort = _props$ArrowSort === void 0 ? DefaultArrowSort : _props$ArrowSort,
-    _props$ColumnFilter = props.ColumnFilter,
-    ColumnFilter = _props$ColumnFilter === void 0 ? DefaultColumnFilter : _props$ColumnFilter,
-    _props$EmptyData = props.EmptyData,
-    EmptyData = _props$EmptyData === void 0 ? DefaultEmptyData : _props$EmptyData,
-    _props$Loader = props.Loader,
-    Loader = _props$Loader === void 0 ? DefaultLoader : _props$Loader,
-    _props$Pagination = props.Pagination,
-    Pagination$1 = _props$Pagination === void 0 ? Pagination : _props$Pagination,
-    _props$Row = props.Row,
-    Row = _props$Row === void 0 ? DefaultRow : _props$Row,
-    _props$CellHeader = props.CellHeader,
-    CellHeader = _props$CellHeader === void 0 ? DefaultCellHeader : _props$CellHeader,
-    CellOperations = props.CellOperations,
-    _props$i18n = props.i18n,
-    i18n = _props$i18n === void 0 ? function (f) {
-      return f;
-    } : _props$i18n,
+  const {
+      children,
+      className = "",
+      columns,
+      data,
+      onChange = noop__default["default"],
+      onClick = noop__default["default"],
+      onDrag = noop__default["default"],
+      onDrop = noop__default["default"],
+      operations = [],
+      pageSizes = [10, 25, 50, 100],
+      filters: controlledFilters,
+      filterId: controlledFilterId,
+      pageSize: controlledPageSize,
+      pageIndex: controlledPageIndex,
+      totalLength,
+      sortBy: controlledSortBy,
+      isLoading,
+      disableFilters,
+      disablePagination,
+      ArrowSort = DefaultArrowSort,
+      ColumnFilter = DefaultColumnFilter,
+      EmptyData = DefaultEmptyData,
+      Loader = DefaultLoader,
+      Pagination: Pagination$1 = Pagination,
+      Row = DefaultRow,
+      CellHeader = DefaultCellHeader,
+      CellOperations,
+      i18n = f => f
+    } = props,
     ctx = _objectWithoutPropertiesLoose(props, _excluded$9);
-  var _onClick = getOperationCallback(operations, onClick);
-  var defaultColumn = React__default["default"].useMemo(function () {
-    return {
-      // Let's set up our default Filter UI
-      Filter: ColumnFilter,
-      ArrowSort: ArrowSort
-    };
-  }, [ColumnFilter, ArrowSort]);
-  var _React$useState = React__default["default"].useState(controlledFilterId),
-    filterId = _React$useState[0],
-    setFilterId = _React$useState[1];
+  const _onClick = getOperationCallback(operations, onClick);
+  const defaultColumn = React__default["default"].useMemo(() => ({
+    // Let's set up our default Filter UI
+    Filter: ColumnFilter,
+    ArrowSort
+  }), [ColumnFilter, ArrowSort]);
+  const [filterId, setFilterId] = React__default["default"].useState(controlledFilterId);
   // DND
-  var _useState = React.useState(data),
-    records = _useState[0],
-    setRecords = _useState[1];
-  React.useEffect(function () {
+  const [records, setRecords] = React$1.useState(data);
+  React$1.useEffect(() => {
     setRecords(data);
   }, [data]);
-  var _onDrag = function _onDrag(dragIndex, hoverIndex) {
-    var newRecords = swapElements([].concat(records), dragIndex, hoverIndex);
+  const _onDrag = (dragIndex, hoverIndex) => {
+    const newRecords = swapElements([...records], dragIndex, hoverIndex);
     setRecords(newRecords);
     onDrag(newRecords);
   };
-  var tableInstance = reactTable.useTable.apply(void 0, [_extends({}, props, {
-    columns: columns,
-    data: data,
-    ctx: ctx,
-    defaultColumn: defaultColumn,
+  const tableInstance = reactTable.useTable(_extends({}, props, {
+    columns,
+    data,
+    ctx,
+    defaultColumn,
     // getRowId,
     initialState: _extends({}, props.initialState || {}, {
       filters: controlledFilters || [],
@@ -898,49 +811,52 @@ function useCustomTable(props) {
     manualPagination: props.manualPagination === undefined ? true : props.manualPagination,
     manualSortBy: props.manualSortBy === undefined ? true : props.manualPagination,
     manualFilters: props.manualFilters === undefined ? true : props.manualFilters,
-    disableFilters: disableFilters,
-    filterId: filterId,
-    setFilterId: setFilterId
-  })].concat(hooks, [useOperations({
-    operations: operations,
-    CellOperations: CellOperations,
+    disableFilters,
+    filterId,
+    setFilterId
+  }), ...hooks, useOperations({
+    operations,
+    CellOperations,
     onClick: _onClick,
-    ctx: ctx,
-    i18n: i18n
-  })]));
-  var setPageSize = tableInstance.setPageSize,
-    _tableInstance$state = tableInstance.state,
-    pageIndex = _tableInstance$state.pageIndex,
-    pageSize = _tableInstance$state.pageSize,
-    sortBy = _tableInstance$state.sortBy,
-    filters = _tableInstance$state.filters;
-  React__default["default"].useEffect(function () {
+    ctx,
+    i18n
+  }));
+  const {
+    setPageSize,
+    state: {
+      pageIndex,
+      pageSize,
+      sortBy,
+      filters
+    }
+  } = tableInstance;
+  React__default["default"].useEffect(() => {
     onChange({
-      pageIndex: pageIndex,
-      pageSize: pageSize,
-      sortBy: sortBy,
-      filters: filters,
-      filterId: filterId
+      pageIndex,
+      pageSize,
+      sortBy,
+      filters,
+      filterId
     });
   }, [onChange, pageIndex, pageSize, sortBy, filters, filterId]);
   return {
-    className: className,
-    tableInstance: tableInstance,
-    CellHeader: CellHeader,
-    isLoading: isLoading,
-    Loader: Loader,
-    EmptyData: EmptyData,
-    Row: Row,
-    data: data,
-    disablePagination: disablePagination,
+    className,
+    tableInstance,
+    CellHeader,
+    isLoading,
+    Loader,
+    EmptyData,
+    Row,
+    data,
+    disablePagination,
     Pagination: Pagination$1,
-    pageIndex: pageIndex,
-    pageSize: pageSize,
-    pageSizes: pageSizes,
-    totalLength: totalLength,
-    setPageSize: setPageSize,
-    i18n: i18n,
-    children: children,
+    pageIndex,
+    pageSize,
+    pageSizes,
+    totalLength,
+    setPageSize,
+    i18n,
+    children,
     onClick: _onClick,
     onDrag: _onDrag,
     onDrop: onDrop,
@@ -949,28 +865,29 @@ function useCustomTable(props) {
 }
 
 function Table(props) {
-  var _useCustomTable = useCustomTable(props),
-    className = _useCustomTable.className,
-    tableInstance = _useCustomTable.tableInstance,
-    CellHeader = _useCustomTable.CellHeader,
-    isLoading = _useCustomTable.isLoading,
-    onClick = _useCustomTable.onClick,
-    Loader = _useCustomTable.Loader,
-    EmptyData = _useCustomTable.EmptyData,
-    Row = _useCustomTable.Row,
-    data = _useCustomTable.data,
-    disablePagination = _useCustomTable.disablePagination,
-    Pagination = _useCustomTable.Pagination,
-    pageIndex = _useCustomTable.pageIndex,
-    pageSize = _useCustomTable.pageSize,
-    pageSizes = _useCustomTable.pageSizes,
-    setPageSize = _useCustomTable.setPageSize,
-    totalLength = _useCustomTable.totalLength,
-    i18n = _useCustomTable.i18n,
-    enableDragNDrop = _useCustomTable.enableDragNDrop,
-    children = _useCustomTable.children,
-    onDrag = _useCustomTable.onDrag,
-    onDrop = _useCustomTable.onDrop;
+  const {
+    className,
+    tableInstance,
+    CellHeader,
+    isLoading,
+    onClick,
+    Loader,
+    EmptyData,
+    Row,
+    data,
+    disablePagination,
+    Pagination,
+    pageIndex,
+    pageSize,
+    pageSizes,
+    setPageSize,
+    totalLength,
+    i18n,
+    enableDragNDrop,
+    children,
+    onDrag,
+    onDrop
+  } = useCustomTable(props);
   // Render the UI for your table
   return /*#__PURE__*/React__default["default"].createElement(DrapNDropContainer, {
     enableDragNDrop: enableDragNDrop
@@ -978,22 +895,18 @@ function Table(props) {
     className: classnames__default["default"]("table-group table-responsive", className)
   }, /*#__PURE__*/React__default["default"].createElement("table", _extends({
     className: "table table-striped table-hover"
-  }, tableInstance.getTableProps()), /*#__PURE__*/React__default["default"].createElement("thead", null, tableInstance.headerGroups.map(function (headerGroup, i) {
-    return /*#__PURE__*/React__default["default"].createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
-      key: "tableInstance.headerGroups" + i
-    }), enableDragNDrop ? /*#__PURE__*/React__default["default"].createElement("th", {
-      role: "columnheader",
-      className: "text-center"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "table-cell-header"
-    })) : null, headerGroup.headers.map(function (column) {
-      return /*#__PURE__*/React__default["default"].createElement("th", _extends({}, column.getHeaderProps(), {
-        key: "tableInstance.headers.column." + column.id
-      }), /*#__PURE__*/React__default["default"].createElement(CellHeader, {
-        column: column
-      }));
-    }));
-  })), !isLoading ? /*#__PURE__*/React__default["default"].createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map(function (row, index) {
+  }, tableInstance.getTableProps()), /*#__PURE__*/React__default["default"].createElement("thead", null, tableInstance.headerGroups.map((headerGroup, i) => /*#__PURE__*/React__default["default"].createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
+    key: "tableInstance.headerGroups" + i
+  }), enableDragNDrop ? /*#__PURE__*/React__default["default"].createElement("th", {
+    role: "columnheader",
+    className: "text-center"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "table-cell-header"
+  })) : null, headerGroup.headers.map(column => /*#__PURE__*/React__default["default"].createElement("th", _extends({}, column.getHeaderProps(), {
+    key: "tableInstance.headers.column." + column.id
+  }), /*#__PURE__*/React__default["default"].createElement(CellHeader, {
+    column: column
+  })))))), !isLoading ? /*#__PURE__*/React__default["default"].createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map((row, index) => {
     tableInstance.prepareRow(row);
     return /*#__PURE__*/React__default["default"].createElement(Row, {
       index: index,
@@ -1017,25 +930,20 @@ function Table(props) {
   }))) : null, children));
 }
 
-var _excluded$8 = ["disableFilters", "disablePagination", "availableActions", "onAddAction"];
+const _excluded$8 = ["disableFilters", "disablePagination", "availableActions", "onAddAction"];
 function ActionsTable(_ref) {
-  var _ref$disableFilters = _ref.disableFilters,
-    disableFilters = _ref$disableFilters === void 0 ? true : _ref$disableFilters,
-    _ref$disablePaginatio = _ref.disablePagination,
-    disablePagination = _ref$disablePaginatio === void 0 ? true : _ref$disablePaginatio,
-    _ref$availableActions = _ref.availableActions,
-    availableActions = _ref$availableActions === void 0 ? [] : _ref$availableActions,
-    _ref$onAddAction = _ref.onAddAction,
-    onAddAction = _ref$onAddAction === void 0 ? noop__default["default"] : _ref$onAddAction,
+  let {
+      disableFilters = true,
+      disablePagination = true,
+      availableActions = [],
+      onAddAction = noop__default["default"]
+    } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-  var _props$i18n = props.i18n,
-    i18n = _props$i18n === void 0 ? function (f) {
-      return f;
-    } : _props$i18n;
-  var _useState = React.useState(""),
-    currentAction = _useState[0],
-    setAction = _useState[1];
-  var columns = [{
+  const {
+    i18n = f => f
+  } = props;
+  const [currentAction, setAction] = React$1.useState("");
+  const columns = [{
     Header: i18n("Actions"),
     accessor: "title",
     id: "title"
@@ -1047,24 +955,21 @@ function ActionsTable(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "pagination-group"
   }, /*#__PURE__*/React__default["default"].createElement(Select, {
+    "data-testid": "action-table-select",
     name: "actions",
     value: currentAction,
     choices: [{
       label: i18n("Select an action"),
       value: ""
     }].concat(availableActions),
-    onChange: function onChange(name, action) {
-      return setAction(action);
-    }
+    onChange: (name, action) => setAction(action)
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "pl-3"
   }, /*#__PURE__*/React__default["default"].createElement("button", {
-    "data-testid": "submit",
+    "data-testid": "action-table-add",
     disabled: currentAction === "",
     className: "btn btn-success",
-    onClick: function onClick() {
-      return currentAction && onAddAction(currentAction);
-    },
+    onClick: () => currentAction && onAddAction(currentAction),
     type: "submit"
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: classnames__default["default"](iconClass(undefined, "plus"), "mr-1")
@@ -1079,8 +984,8 @@ function formatError(error) {
     return error.map(formatError);
   }
   if (Object.prototype.hasOwnProperty.call(error, "errors")) {
-    return Object.keys(error.errors).map(function (key, index) {
-      var item = error.errors[key];
+    return Object.keys(error.errors).map((key, index) => {
+      const item = error.errors[key];
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: index
       }, /*#__PURE__*/React__default["default"].createElement("strong", null, item.name, " (", item.path, ")"), " ", "- ", item.message);
@@ -1092,7 +997,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(function (item, index) {
+    return error.details.map((item, index) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: index
       }, item.message);
@@ -1105,9 +1010,10 @@ function formatError(error) {
   return "An error occurred. See console logs for details.";
 }
 function Alert(_ref) {
-  var error = _ref.error,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? "danger" : _ref$type;
+  let {
+    error,
+    type = "danger"
+  } = _ref;
   if (!error || Array.isArray(error) && !error.length) {
     return null;
   }
@@ -1118,9 +1024,11 @@ function Alert(_ref) {
 }
 
 function Card(_ref) {
-  var children = _ref.children,
-    label = _ref.label,
-    className = _ref.className;
+  let {
+    children,
+    label,
+    className
+  } = _ref;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classnames__default["default"]("card", className)
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1133,7 +1041,7 @@ function Card(_ref) {
   }, children));
 }
 
-var _excluded$7 = ["src", "form", "options", "submission", "url"];
+const _excluded$7 = ["src", "form", "options", "submission", "url"];
 function _catch$1(body, recover) {
   try {
     var result = body();
@@ -1146,21 +1054,21 @@ function _catch$1(body, recover) {
   return result;
 }
 function useEvent(event, callback, events) {
-  React.useEffect(function () {
+  React$1.useEffect(() => {
     if (callback) {
       events.set(event, callback);
     }
   }, [callback, event, events]);
 }
 function useEvents(funcs) {
-  var events = React.useRef(new Map());
-  var hasEvent = function hasEvent(event) {
+  const events = React$1.useRef(new Map());
+  const hasEvent = event => {
     return funcs.hasOwnProperty(event) && typeof funcs[event] === "function";
   };
-  var emit = function emit(event) {
+  const emit = function (event) {
     if (hasEvent(event)) {
-      var fn = events.current.has(event) ? events.current.get(event) : funcs[event];
-      return fn.apply(void 0, [].slice.call(arguments, 1));
+      const fn = events.current.has(event) ? events.current.get(event) : funcs[event];
+      return fn(...[].slice.call(arguments, 1));
     }
   };
   useEvent("onBlur", funcs["onBlur"], events.current);
@@ -1182,17 +1090,17 @@ function useEvents(funcs) {
   useEvent("onBlur", funcs["onBlur"], events.current);
   useEvent("onInitialized", funcs["onInitialized"], events.current);
   return {
-    events: events,
-    emit: emit,
-    hasEvent: hasEvent
+    events,
+    emit,
+    hasEvent
   };
 }
 function useForm(props) {
-  var customValidation = function customValidation(submission, callback) {
+  const customValidation = function (submission, callback) {
     try {
-      var _temp2 = function () {
+      const _temp2 = function () {
         if (hasEvent("onAsyncSubmit")) {
-          var _temp = _catch$1(function () {
+          const _temp = _catch$1(function () {
             return Promise.resolve(emit("onAsyncSubmit", submission, instance.current)).then(function () {});
           }, function (err) {
             callback((err == null ? void 0 : err.errors) || err);
@@ -1207,20 +1115,22 @@ function useForm(props) {
       return Promise.reject(e);
     }
   };
-  var src = props.src,
-    form = props.form,
-    _props$options = props.options,
-    options = _props$options === void 0 ? {} : _props$options,
-    submission = props.submission,
-    url = props.url,
+  const {
+      src,
+      form,
+      options = {},
+      submission,
+      url
+    } = props,
     funcs = _objectWithoutPropertiesLoose(props, _excluded$7);
-  var element = React.useRef();
-  var isLoaded = React.useRef();
-  var instance = React.useRef();
-  var _useEvents = useEvents(funcs),
-    emit = _useEvents.emit,
-    hasEvent = _useEvents.hasEvent;
-  var createWebForm = function createWebForm(srcOrForm, options) {
+  const element = React$1.useRef();
+  const isLoaded = React$1.useRef();
+  const instance = React$1.useRef();
+  const {
+    emit,
+    hasEvent
+  } = useEvents(funcs);
+  const createWebForm = (srcOrForm, options) => {
     options = Object.assign({}, options);
     srcOrForm = typeof srcOrForm === "string" ? srcOrForm : cloneDeep__default["default"](srcOrForm);
     if (!instance.current) {
@@ -1236,14 +1146,14 @@ function useForm(props) {
           return;
         }
         if (event.startsWith("formio.")) {
-          var eventName = "on" + event.charAt(7).toUpperCase() + event.slice(8);
+          const eventName = "on" + event.charAt(7).toUpperCase() + event.slice(8);
           if (eventName === "onChange" && !args[0].changed) {
             return;
           }
-          emit.apply(void 0, [eventName].concat(args, [instance.current]));
+          emit(eventName, ...args, instance.current);
         }
       });
-      instance.current.ready.then(function (formio) {
+      instance.current.ready.then(formio => {
         submission && (formio.submission = cloneDeep__default["default"](submission));
         if (props.onFormReady) {
           props.onFormReady(formio);
@@ -1253,9 +1163,9 @@ function useForm(props) {
     }
     return instance.current;
   };
-  React.useEffect(function () {
+  React$1.useEffect(() => {
     if (instance.current) {
-      instance.current.ready.then(function (formio) {
+      instance.current.ready.then(formio => {
         if (isEqual__default["default"](formio.submission.data, submission == null ? void 0 : submission.data)) {
           return;
         }
@@ -1263,9 +1173,9 @@ function useForm(props) {
       });
     }
   }, [submission]);
-  React.useEffect(function () {
+  React$1.useEffect(() => {
     if (form && instance.current) {
-      instance.current.ready.then(function (formio) {
+      instance.current.ready.then(formio => {
         formio.form = form;
         if (url) {
           formio.url = url;
@@ -1273,7 +1183,7 @@ function useForm(props) {
       });
     }
   }, [form, url]);
-  React.useEffect(function () {
+  React$1.useEffect(() => {
     if (src) {
       if (instance.current) {
         isLoaded.current = false;
@@ -1282,24 +1192,25 @@ function useForm(props) {
       createWebForm(src, options);
     }
   }, [src]);
-  React.useEffect(function () {
+  React$1.useEffect(() => {
     if (form) {
       createWebForm(form, options);
     }
-    return function () {
+    return () => {
       isLoaded.current = false;
       instance.current && instance.current.destroy(true);
     };
   }, []);
   return {
-    element: element
+    element
   };
 }
 
 formiojs.Components.setComponents(AllComponents__default["default"]);
 function Form(props) {
-  var _useForm = useForm(props),
-    element = _useForm.element;
+  const {
+    element
+  } = useForm(props);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     "data-testid": "formioContainer" + (props.name || ""),
     ref: element,
@@ -1309,24 +1220,24 @@ function Form(props) {
 Form.propTypes = {
   name: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
-  /**
-   *
+  /**
+   *
    */
   src: PropTypes__default["default"].string,
-  /**
-   * url to fetch form
+  /**
+   * url to fetch form
    */
   url: PropTypes__default["default"].string,
-  /**
-   * Raw form object
+  /**
+   * Raw form object
    */
   form: PropTypes__default["default"].object,
-  /**
-   * Data submission
+  /**
+   * Data submission
    */
   submission: PropTypes__default["default"].object,
-  /**
-   * Configuration option
+  /**
+   * Configuration option
    */
   options: PropTypes__default["default"].shape({
     readOnly: PropTypes__default["default"].bool,
@@ -1358,15 +1269,17 @@ Form.propTypes = {
 };
 
 function getRoleComponent(_ref) {
-  var label = _ref.label,
-    key = _ref.key,
-    description = _ref.description,
-    choices = _ref.choices,
-    data = _ref.data;
+  let {
+    label,
+    key,
+    description,
+    choices,
+    data
+  } = _ref;
   return {
-    label: label,
-    key: key,
-    description: description,
+    label,
+    key,
+    description,
     type: "select",
     labelPosition: "top",
     widget: "choicesjs",
@@ -1396,92 +1309,96 @@ function toDescription(description, hr) {
   return '<span class="text-sm">' + description + "</span> " + (hr ? '<hr class="mt-6 mb-5 border-gray-200 mx-20"/>' : "");
 }
 function getSubmissionPermissionForm(_ref2) {
-  var choices = _ref2.choices;
+  let {
+    choices
+  } = _ref2;
   return {
     description: "<strong>Elevated permissions allow users to access and modify other user's entities. Assign with caution.</strong>",
     components: [getRoleComponent({
       key: "create_own",
       label: '<h4 class="text-gray-800">Create Own Submissions</h4>',
       description: toDescription("The Create Own Submissions permission will allow a user with one of the Roles to create a Submission. Upon creating the Submission, the user will be defined as its owner."),
-      choices: choices
+      choices
     }), getRoleComponent({
       key: "create_all",
       label: '<h4 class="text-gray-800">Create All Submissions</h4>',
       description: toDescription('<strong class="text-yellow-600">Elevated Permission:</strong> The Create All Submissions permission will allow a user with one of the Roles to create a new Submission and assign ownership of that Submission to another user.'),
-      choices: choices
+      choices
     }), getRoleComponent({
       key: "read_own",
       label: '<h4 class="text-gray-800">Read Own Submissions</h4>',
       description: toDescription("The Read Own Submissions permission will allow a user with one of the Roles to read a Submission. A user can only read a Submission if they are defined as its owner."),
-      choices: choices
+      choices
     }), getRoleComponent({
       key: "read_all",
       label: '<h4 class="text-gray-800">Read All Submissions</h4>',
       description: toDescription('<strong class="text-yellow-600">Elevated Permission:</strong> The Read All Submissions permission will allow a user with one of the Roles to read all Submissions regardless of who owns them.'),
-      choices: choices
+      choices
     }), getRoleComponent({
       key: "update_own",
       label: '<h4 class="text-gray-800">Update Own Submissions</h4>',
       description: toDescription("The Update Own Submissions permission will allow a user with one of the Roles to update a Submission. A user can only update a Submission if they are defined as its owner."),
-      choices: choices
+      choices
     }), getRoleComponent({
       key: "update_all",
       label: '<h4 class="text-gray-800">Update All Submissions</h4>',
       description: toDescription('<strong class="text-yellow-600">Elevated Permission:</strong> The Update All Submissions permission will allow a user with one of the Roles to update a Submission, regardless of who owns the Submission. Additionally with this permission, a user can change the owner of a Submission.'),
-      choices: choices
+      choices
     }), getRoleComponent({
       key: "delete_own",
       label: '<h4 class="text-gray-800">Delete Own Submissions</h4>',
       description: toDescription("The Delete Own Submissions permission will allow a user with one of the Roles, to delete a Submission. A user can only delete a Submission if they are defined as its owner."),
-      choices: choices
+      choices
     }), getRoleComponent({
       key: "delete_all",
       label: '<h4 class="text-gray-800">Delete All Submissions</h4>',
       description: toDescription('<strong class="text-yellow-600">Elevated Permission:</strong> The Delete All Submissions permission will allow a user with one of the Roles to delete a Submission, regardless of who owns the Submission.', false),
-      choices: choices
+      choices
     })]
   };
 }
 function getAccessPermissionForm(_ref3) {
-  var choices = _ref3.choices;
+  let {
+    choices
+  } = _ref3;
   return {
     description: "<strong>Elevated permissions allow users to access and modify other user's entities. Assign with caution.</strong>",
     components: [getRoleComponent({
       key: "read_own",
       label: '<h4 class="text-gray-800">Read Form Definition (Restricted to owner)</h4>',
       description: toDescription("The Read Own permission will allow a user, with one of the given Roles, to read a form. A user can only read a form if they are defined as its owner."),
-      choices: choices
+      choices
     }), getRoleComponent({
       key: "read_all",
       label: "<h4>Read Form Definition</h4>",
       description: toDescription('<strong class="text-yellow-600">Elevated Permission:</strong> The Read permission will allow a user, with one of the given Roles, to read the form.'),
-      choices: choices
+      choices
     }), getRoleComponent({
       key: "update_own",
       label: '<h4 class="text-gray-800">Update Form Definition (Restricted to owner)</h4>',
       description: toDescription("The Update Own permission will allow a user, with one of the given Roles, to update a form. A user can only update a form if they are defined as its owner."),
-      choices: choices
+      choices
     }), getRoleComponent({
       key: "update_all",
       label: '<h4 class="text-gray-800">Update Form Definition</h4>',
       description: toDescription('<strong class="text-yellow-600">Elevated Permission:</strong> The Update permission will allow a user, with one of the given Roles, to read and edit the form.'),
-      choices: choices
+      choices
     }), getRoleComponent({
       key: "delete_own",
       label: '<h4 class="text-gray-800">Delete Form Definition (Restricted to owner)</h4>',
       description: toDescription("The Delete Own permission will allow a user, with one of the given Roles, to delete a form. A user can only delete a form if they are defined as its owner."),
-      choices: choices
+      choices
     }), getRoleComponent({
       key: "delete_all",
       label: '<h4 class="text-gray-800">Delete Form Definition</h4>',
       description: toDescription('<strong class="text-yellow-600">Elevated Permission:</strong> The Delete permission will allow a user, with one of the given Roles, to delete the form.', false),
-      choices: choices
+      choices
     })]
   };
 }
 
 function rolesToChoices(roles) {
-  return Object.values(roles).map(function (role) {
+  return Object.values(roles).map(role => {
     return {
       label: role.title || "",
       value: role._id || ""
@@ -1492,50 +1409,50 @@ function accessToHash(keys, access) {
   if (access === void 0) {
     access = [];
   }
-  var hash = Object.values(access).reduce(function (o, role) {
+  const hash = Object.values(access).reduce((o, role) => {
     o[role.type] = role.roles;
     return o;
   }, {});
-  return (keys || []).filter(Boolean).reduce(function (data, key) {
-    var _extends2;
-    return _extends({}, data, (_extends2 = {}, _extends2[key] = hash[key] || [], _extends2));
+  return (keys || []).filter(Boolean).reduce((data, key) => {
+    return _extends({}, data, {
+      [key]: hash[key] || []
+    });
   }, {});
 }
 function hashToAccess(data) {
-  var accessRoles = [];
-  Object.entries(data).forEach(function (_ref) {
-    var accessType = _ref[0],
-      roles = _ref[1];
+  const accessRoles = [];
+  Object.entries(data).forEach(_ref => {
+    let [accessType, roles] = _ref;
     if (accessType === "submit") {
       return;
     }
     accessRoles.push({
       type: accessType,
-      roles: roles
+      roles
     });
   });
   return accessRoles;
 }
 function getFormAccess(roles) {
-  var choices = rolesToChoices(roles);
-  var access = getAccessPermissionForm({
-    choices: choices
+  const choices = rolesToChoices(roles);
+  const access = getAccessPermissionForm({
+    choices
   });
-  var submissionAccess = getSubmissionPermissionForm({
-    choices: choices
+  const submissionAccess = getSubmissionPermissionForm({
+    choices
   });
   return {
-    access: access,
-    submissionAccess: submissionAccess
+    access,
+    submissionAccess
   };
 }
 function dataAccessToSubmissions(form, formAccess) {
-  var getKeys = function getKeys(components) {
-    return components.map(function (_ref2) {
-      var key = _ref2.key;
-      return key;
-    });
-  };
+  const getKeys = components => components.map(_ref2 => {
+    let {
+      key
+    } = _ref2;
+    return key;
+  });
   return {
     access: {
       data: accessToHash(getKeys(formAccess.access.components), form.access)
@@ -1559,34 +1476,30 @@ function updateSubmissions(type, submission, submissions, cb) {
     cb = noop__default["default"];
   }
   if (shouldUpdate(type, submission, submissions)) {
-    var _extends3;
-    submissions = _extends({}, submissions, (_extends3 = {}, _extends3[type] = {
-      data: submission.data
-    }, _extends3));
+    submissions = _extends({}, submissions, {
+      [type]: {
+        data: submission.data
+      }
+    });
     cb(submissions);
   }
   return submissions;
 }
 
 function useFormAccess(_ref) {
-  var formDefinition = _ref.form,
-    roles = _ref.roles,
-    _onSubmit = _ref.onSubmit,
-    options = _ref.options;
-  // eslint-disable-next-line no-undef
-  var form = React.useMemo(function () {
-    return getFormAccess(roles);
-  }, [roles]);
-  var _useState = React.useState(function () {
-      return dataAccessToSubmissions(formDefinition, form);
-    }),
-    submissions = _useState[0],
-    setSubmissions = _useState[1];
-  var onChange = React.useCallback(function (type, submission) {
+  let {
+    form: formDefinition,
+    roles,
+    onSubmit,
+    options
+  } = _ref;
+  const form = React$1.useMemo(() => getFormAccess(roles), [roles]);
+  const [submissions, setSubmissions] = React$1.useState(() => dataAccessToSubmissions(formDefinition, form));
+  const onChange = React$1.useCallback((type, submission) => {
     updateSubmissions(type, submission, submissions, setSubmissions);
   }, [submissions]);
-  React.useEffect(function () {
-    var input = dataAccessToSubmissions(formDefinition, form);
+  React$1.useEffect(() => {
+    const input = dataAccessToSubmissions(formDefinition, form);
     if (formDefinition != null && formDefinition._id) {
       if (shouldUpdate("access", submissions.access, input) || shouldUpdate("submissionAccess", submissions.submissionAccess, input)) {
         setSubmissions(input);
@@ -1594,36 +1507,38 @@ function useFormAccess(_ref) {
     }
   }, [formDefinition == null ? void 0 : formDefinition._id]);
   return {
-    options: options,
-    form: form,
+    options,
+    form,
     type: formDefinition.type,
-    submissions: submissions,
-    onChange: onChange,
-    onSubmit: function onSubmit() {
-      _onSubmit && _onSubmit(submissionsToDataAccess(formDefinition, submissions));
+    submissions,
+    onChange,
+    onSubmit: () => {
+      onSubmit && onSubmit(submissionsToDataAccess(formDefinition, submissions));
     }
   };
 }
 function NamedFormAccess(_ref2) {
-  var name = _ref2.name,
-    form = _ref2.form,
-    submissions = _ref2.submissions,
-    options = _ref2.options,
-    _onChange = _ref2.onChange,
-    onSubmit = _ref2.onSubmit,
-    children = _ref2.children;
-  var _useState2 = React.useState(true),
-    isValid = _useState2[0],
-    setIsValid = _useState2[1];
+  let {
+    name,
+    form,
+    submissions,
+    options,
+    onChange,
+    onSubmit,
+    children
+  } = _ref2;
+  const [isValid, setIsValid] = React$1.useState(true);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Form, {
     name: name,
     form: form[name],
     submission: submissions[name],
-    onChange: function onChange(_ref3) {
-      var data = _ref3.data,
-        isValid = _ref3.isValid;
-      isValid && _onChange(name, {
-        data: data
+    onChange: _ref3 => {
+      let {
+        data,
+        isValid
+      } = _ref3;
+      isValid && onChange(name, {
+        data
       });
       setIsValid(isValid);
     },
@@ -1637,13 +1552,14 @@ function NamedFormAccess(_ref2) {
   }, "Elevated permissions allow users to access and modify other user's entities. Assign with caution."));
 }
 function FormAccess(props) {
-  var _useFormAccess = useFormAccess(props),
-    type = _useFormAccess.type,
-    form = _useFormAccess.form,
-    submissions = _useFormAccess.submissions,
-    options = _useFormAccess.options,
-    onChange = _useFormAccess.onChange,
-    onSubmit = _useFormAccess.onSubmit;
+  const {
+    type,
+    form,
+    submissions,
+    options,
+    onChange,
+    onSubmit
+  } = useFormAccess(props);
   return /*#__PURE__*/React__default["default"].createElement("div", null, props.children, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex mb-5"
   }, /*#__PURE__*/React__default["default"].createElement(Card, {
@@ -1682,24 +1598,17 @@ function FormAccess(props) {
     label: "About Form Definition Access"
   }, /*#__PURE__*/React__default["default"].createElement("p", null, "These permissions allow you to give access to a single form's JSON definition so they can render the form."), /*#__PURE__*/React__default["default"].createElement("p", null, "Typically you will want to allow all of your roles to be able to Read the form definition."), /*#__PURE__*/React__default["default"].createElement("p", null, "Each form also has an owner at ", /*#__PURE__*/React__default["default"].createElement("strong", null, "form.owner"), " which is the user who created the form. In some applications users are allowed to create their own forms. In those cases it is helpful to have Owner based permissions as well.")))));
 }
-FormAccess.propTypes = {
-  type: PropTypes__default["default"].string.isRequired,
-  form: PropTypes__default["default"].object,
-  roles: PropTypes__default["default"].any,
-  children: PropTypes__default["default"].any,
-  options: PropTypes__default["default"].any,
-  onSubmit: PropTypes__default["default"].func
-};
 
-var _excluded$6 = ["action"],
+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) {
-  var settingsForm = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  FormioUtils__default["default"].eachComponent(settingsForm.components, function (component) {
-    var resourceExclude = "";
+  let settingsForm = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  FormioUtils__default["default"].eachComponent(settingsForm.components, component => {
+    const resourceExclude = "";
     if (component.type === "resourcefields") {
       component.type = "select";
       component.label = component.title;
@@ -1715,23 +1624,26 @@ function mapSettingsForm(_ref) {
   return settingsForm;
 }
 function FormAction(_ref2) {
-  var actionInfo = _ref2.actionInfo,
-    children = _ref2.children,
-    onSubmit = _ref2.onSubmit,
-    options = _ref2.options,
+  let {
+      actionInfo,
+      children,
+      onSubmit,
+      options
+    } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  var _ref3 = function () {
-      var submission = mapData(props.submission || {}, actionInfo.defaults);
-      var form = mapSettingsForm(actionInfo.settingsForm);
-      return {
-        form: form,
-        submission: {
-          data: submission
-        }
-      };
-    }(),
-    form = _ref3.form,
-    submission = _ref3.submission;
+  const {
+    form,
+    submission
+  } = (() => {
+    const submission = mapData(props.submission || {}, actionInfo.defaults);
+    const form = mapSettingsForm(actionInfo.settingsForm);
+    return {
+      form,
+      submission: {
+        data: submission
+      }
+    };
+  })();
   return /*#__PURE__*/React__default["default"].createElement("div", null, children, /*#__PURE__*/React__default["default"].createElement(Form, {
     form: form,
     submission: submission,
@@ -1751,32 +1663,30 @@ function _catch(body, recover) {
   }
   return result;
 }
-var createBuilder = function createBuilder(el, _ref2) {
-  var _ref2$components = _ref2.components,
-    components = _ref2$components === void 0 ? [] : _ref2$components,
-    display = _ref2.display,
-    options = _ref2.options,
-    onChange = _ref2.onChange,
-    _ref2$events = _ref2.events,
-    events = _ref2$events === void 0 ? {} : _ref2$events;
+const createBuilder = function (el, _ref) {
+  let {
+    components = [],
+    display,
+    options,
+    onChange,
+    events = {}
+  } = _ref;
   try {
-    var form = {
-      display: display,
-      components: [].concat(components)
+    const form = {
+      display,
+      components: [...components]
     };
     return Promise.resolve(_catch(function () {
       return Promise.resolve(new FormioFormBuilder__default["default"](el, form, _extends({}, options)).ready).then(function (builder) {
-        var handleEvent = function handleEvent(event) {
+        const handleEvent = event => {
           return function () {
-            events[event] && events[event].apply(events, [].slice.call(arguments));
+            events[event] && events[event](...[].slice.call(arguments));
             if (EVENTS_CHANGE.includes(event)) {
               onChange(builder.form.components);
             }
           };
         };
-        EVENTS.forEach(function (event) {
-          return builder.on(event, callLast(handleEvent(event), 200));
-        });
+        EVENTS.forEach(event => builder.on(event, callLast(handleEvent(event), 200)));
         return builder;
       });
     }, function (er) {
@@ -1787,91 +1697,88 @@ var createBuilder = function createBuilder(el, _ref2) {
   }
 };
 Components__default["default"].setComponents(AllComponents__default["default"]);
-var EVENTS = ["addComponent", "updateComponent", "removeComponent", "saveComponent", "cancelComponent", "moveComponent", "editComponent", "editJson", "copyComponent", "pasteComponent"];
-var EVENTS_CHANGE = ["addComponent", "saveComponent", "updateComponent", "removeComponent"];
-var FormBuilder = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(FormBuilder, _React$Component);
-  function FormBuilder(props) {
-    var _this;
-    _this = _React$Component.call(this, props) || this;
-    _this.elRef = void 0;
-    _this.builderRef = void 0;
-    _this.state = {
+const EVENTS = ["addComponent", "updateComponent", "removeComponent", "saveComponent", "cancelComponent", "moveComponent", "editComponent", "editJson", "copyComponent", "pasteComponent"];
+const EVENTS_CHANGE = ["addComponent", "saveComponent", "updateComponent", "removeComponent"];
+class FormBuilder extends React__default["default"].Component {
+  constructor(props) {
+    super(props);
+    this.elRef = void 0;
+    this.builderRef = void 0;
+    this.state = {
       display: props.display,
       components: cloneDeep__default["default"](props.components)
     };
-    _this.elRef = null;
-    _this.builderRef = null;
-    return _this;
+    this.elRef = null;
+    this.builderRef = null;
   }
-  var _proto = FormBuilder.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     try {
-      var _this2 = this;
-      return Promise.resolve(_this2.create(_this2.props)).then(function () {});
+      const _this = this;
+      return Promise.resolve(_this.create(_this.props)).then(function () {});
     } catch (e) {
       return Promise.reject(e);
     }
-  };
-  _proto.create = function create(props) {
+  }
+  create(props) {
     try {
-      var _this3 = this;
-      var options = props.options,
-        display = props.display,
-        components = props.components,
-        onAddComponent = props.onAddComponent,
-        onUpdateComponent = props.onUpdateComponent,
-        onRemoveComponent = props.onRemoveComponent,
-        onSaveComponent = props.onSaveComponent,
-        onCancelComponent = props.onCancelComponent,
-        onMoveComponent = props.onMoveComponent,
-        onEditComponent = props.onEditComponent,
-        onEditJson = props.onEditJson,
-        onCopyComponent = props.onCopyComponent,
-        onPasteComponent = props.onPasteComponent;
-      return Promise.resolve(createBuilder(_this3.elRef.firstChild, {
-        display: display,
+      const _this2 = this;
+      const {
+        options,
+        display,
+        components,
+        onAddComponent,
+        onUpdateComponent,
+        onRemoveComponent,
+        onSaveComponent,
+        onCancelComponent,
+        onMoveComponent,
+        onEditComponent,
+        onEditJson,
+        onCopyComponent,
+        onPasteComponent
+      } = props;
+      return Promise.resolve(createBuilder(_this2.elRef.firstChild, {
+        display,
         options: _extends({}, options),
         components: cloneDeep__default["default"](components),
-        onChange: _this3.whenComponentsChange.bind(_this3),
+        onChange: _this2.whenComponentsChange.bind(_this2),
         events: {
-          onAddComponent: onAddComponent,
-          onUpdateComponent: onUpdateComponent,
-          onRemoveComponent: onRemoveComponent,
-          onSaveComponent: onSaveComponent,
-          onCancelComponent: onCancelComponent,
-          onMoveComponent: onMoveComponent,
-          onEditComponent: onEditComponent,
-          onEditJson: onEditJson,
-          onCopyComponent: onCopyComponent,
-          onPasteComponent: onPasteComponent
+          onAddComponent,
+          onUpdateComponent,
+          onRemoveComponent,
+          onSaveComponent,
+          onCancelComponent,
+          onMoveComponent,
+          onEditComponent,
+          onEditJson,
+          onCopyComponent,
+          onPasteComponent
         }
       })).then(function (_createBuilder) {
-        _this3.builderRef = _createBuilder;
+        _this2.builderRef = _createBuilder;
       });
     } catch (e) {
       return Promise.reject(e);
     }
-  };
-  _proto.componentWillUnmount = function componentWillUnmount() {
+  }
+  componentWillUnmount() {
     var _this$builderRef;
     (_this$builderRef = this.builderRef) == null ? void 0 : _this$builderRef.destroy();
   }
   // eslint-disable-next-line react/no-deprecated
-  ;
-  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps) {
     try {
-      var _this4 = this;
-      var _temp2 = function () {
-        if (_this4.builderRef) {
-          var _temp = function () {
-            if (nextProps.display !== _this4.state.display) {
-              return Promise.resolve(_this4.create(_extends({}, _this4.props, {
+      const _this3 = this;
+      const _temp2 = function () {
+        if (_this3.builderRef) {
+          const _temp = function () {
+            if (nextProps.display !== _this3.state.display) {
+              return Promise.resolve(_this3.create(_extends({}, _this3.props, {
                 display: nextProps.display
               }))).then(function () {});
-            } else if (nextProps.components !== _this4.state.components) {
-              _this4.builderRef.form = {
-                display: _this4.state.display,
+            } else if (nextProps.components !== _this3.state.components) {
+              _this3.builderRef.form = {
+                display: _this3.state.display,
                 components: nextProps.components
               };
             }
@@ -1883,29 +1790,24 @@ var FormBuilder = /*#__PURE__*/function (_React$Component) {
     } catch (e) {
       return Promise.reject(e);
     }
-  };
-  _proto.whenComponentsChange = function whenComponentsChange(components) {
-    var _this5 = this;
+  }
+  whenComponentsChange(components) {
     this.setState({
-      components: components
-    }, function () {
-      var _this5$props;
-      ((_this5$props = _this5.props) == null ? void 0 : _this5$props.onChange) && _this5.props.onChange(components);
+      components
+    }, () => {
+      var _this$props;
+      ((_this$props = this.props) == null ? void 0 : _this$props.onChange) && this.props.onChange(components);
     });
-  };
-  _proto.render = function render() {
-    var _this6 = this;
+  }
+  render() {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      ref: function ref(_ref) {
-        _this6.elRef = _ref;
+      ref: ref => {
+        this.elRef = ref;
       },
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
+      onClick: e => e.stopPropagation()
     }, /*#__PURE__*/React__default["default"].createElement("div", null));
-  };
-  return FormBuilder;
-}(React__default["default"].Component);
+  }
+}
 FormBuilder.defaultProps = {
   options: {},
   onChange: noop__default["default"],
@@ -1930,46 +1832,45 @@ FormBuilder.propTypes = {
 };
 
 function useTooltip(options) {
-  var ref = React.useRef();
-  React.useEffect(function () {
+  const ref = React$1.useRef();
+  React$1.useEffect(() => {
     ref.current && new Tooltip__default["default"](ref.current, options);
   }, [ref, options]);
   return ref;
 }
 
 function FormEditCTAs(_ref) {
-  var _ref$saveText = _ref.saveText,
-    saveText = _ref$saveText === void 0 ? "Save" : _ref$saveText,
-    disabled = _ref.disabled,
-    _ref$options = _ref.options,
-    options = _ref$options === void 0 ? {} : _ref$options,
-    onCopy = _ref.onCopy,
-    hasUndo = _ref.hasUndo,
-    hasRedo = _ref.hasRedo,
-    onUndo = _ref.onUndo,
-    onRedo = _ref.onRedo,
-    onReset = _ref.onReset,
-    onSubmit = _ref.onSubmit;
-  var _options$i18n = options.i18n,
-    t = _options$i18n === void 0 ? function (t) {
-      return t;
-    } : _options$i18n;
-  var copyTooltipRef = useTooltip({
+  let {
+    saveText = "Save",
+    disabled,
+    options = {},
+    onCopy,
+    hasUndo,
+    hasRedo,
+    onUndo,
+    onRedo,
+    onReset,
+    onSubmit
+  } = _ref;
+  const {
+    i18n: t = t => t
+  } = options;
+  const copyTooltipRef = useTooltip({
     trigger: "hover",
     placement: "top",
     title: t("Copy")
   });
-  var undoTooltipRef = useTooltip({
+  const undoTooltipRef = useTooltip({
     trigger: "hover",
     placement: "top",
     title: t("Undo last change")
   });
-  var redoTooltipRef = useTooltip({
+  const redoTooltipRef = useTooltip({
     trigger: "hover",
     placement: "top",
     title: t("Redo last change")
   });
-  var resetTooltipRef = useTooltip({
+  const resetTooltipRef = useTooltip({
     trigger: "hover",
     placement: "top",
     title: t("Reset all changes")
@@ -1979,40 +1880,30 @@ function FormEditCTAs(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("button", {
     className: "btn btn-primary btn-save flex " + (disabled ? "disabled" : ""),
     disabled: disabled,
-    onClick: function onClick() {
-      return !disabled && onSubmit && onSubmit();
-    }
+    onClick: () => !disabled && onSubmit && onSubmit()
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "mr-1 " + iconClass(options.iconset, "save")
   }), saveText), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("button", {
     className: "btn btn-light btn-undo " + (hasUndo ? "" : "disabled"),
-    onClick: function onClick() {
-      return onUndo && onUndo();
-    },
+    onClick: () => onUndo && onUndo(),
     ref: undoTooltipRef
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: iconClass(options.iconset, "undo")
   })), /*#__PURE__*/React__default["default"].createElement("button", {
     className: "btn btn-light btn-redo " + (hasRedo ? "" : "disabled"),
-    onClick: function onClick() {
-      return onRedo && onRedo();
-    },
+    onClick: () => onRedo && onRedo(),
     ref: redoTooltipRef
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: iconClass(options.iconset, "redo")
   }))), /*#__PURE__*/React__default["default"].createElement("div", null, onCopy && /*#__PURE__*/React__default["default"].createElement("button", {
     className: "btn btn-light",
-    onClick: function onClick() {
-      return onCopy();
-    },
+    onClick: () => onCopy(),
     ref: copyTooltipRef
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: iconClass(options.iconset, "copy")
   })), /*#__PURE__*/React__default["default"].createElement("button", {
     className: "btn btn-light btn-reset",
-    onClick: function onClick() {
-      return onReset && onReset();
-    },
+    onClick: () => onReset && onReset(),
     ref: resetTooltipRef
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: iconClass(options.iconset, "reset")
@@ -2029,35 +1920,34 @@ FormEditCTAs.propTypes = {
   onReset: PropTypes__default["default"].func
 };
 
-var _excluded$5 = ["name", "value", "label", "onChange", "required", "description", "prefix", "suffix"];
+const _excluded$5 = ["name", "value", "label", "onChange", "required", "description", "prefix", "suffix"];
 function InputTags(_ref) {
-  var name = _ref.name,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? [] : _ref$value,
-    label = _ref.label,
-    onChange = _ref.onChange,
-    required = _ref.required,
-    description = _ref.description,
-    prefix = _ref.prefix,
-    suffix = _ref.suffix,
+  let {
+      name,
+      value = [],
+      label,
+      onChange,
+      required,
+      description,
+      prefix,
+      suffix
+    } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  var ref = React.useRef();
-  React.useEffect(function () {
-    var instance = new Choices__default["default"](ref.current, {
+  const ref = React$1.useRef();
+  React$1.useEffect(() => {
+    const instance = new Choices__default["default"](ref.current, {
       delimiter: ",",
       editItems: true,
       removeItemButton: true
     });
     instance.setValue([].concat(value, []));
-    instance.passedElement.element.addEventListener("addItem", function (event) {
+    instance.passedElement.element.addEventListener("addItem", event => {
       onChange && onChange(name, uniq__default["default"](value.concat(event.detail.value)));
     });
-    instance.passedElement.element.addEventListener("removeItem", function (event) {
-      onChange && onChange(name, value.filter(function (v) {
-        return v !== event.detail.value;
-      }));
+    instance.passedElement.element.addEventListener("removeItem", event => {
+      onChange && onChange(name, value.filter(v => v !== event.detail.value));
     });
-    return function () {
+    return () => {
       instance.destroy();
     };
   }, []);
@@ -2084,7 +1974,7 @@ InputTags.propTypes = {
   onChange: PropTypes__default["default"].func
 };
 
-var defaultDisplayChoices = [{
+const defaultDisplayChoices = [{
   label: "Form",
   value: "form"
 }, {
@@ -2095,21 +1985,17 @@ var defaultDisplayChoices = [{
   value: "pdf"
 }];
 function FormParameters(_ref) {
-  var onChange = _ref.onChange,
-    form = _ref.form,
-    _ref$enableTags = _ref.enableTags,
-    enableTags = _ref$enableTags === void 0 ? true : _ref$enableTags,
-    _ref$typeChoices = _ref.typeChoices,
-    typeChoices = _ref$typeChoices === void 0 ? [] : _ref$typeChoices,
-    _ref$displayChoices = _ref.displayChoices,
-    displayChoices = _ref$displayChoices === void 0 ? defaultDisplayChoices : _ref$displayChoices,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className,
-    _ref$readonly = _ref.readonly,
-    readonly = _ref$readonly === void 0 ? {} : _ref$readonly,
-    _ref$baseUrl = _ref.baseUrl,
-    baseUrl = _ref$baseUrl === void 0 ? window.location.origin : _ref$baseUrl;
-  var hasTypeChoices = typeChoices && typeChoices.length > 1;
+  let {
+    onChange,
+    form,
+    enableTags = true,
+    typeChoices = [],
+    displayChoices = defaultDisplayChoices,
+    className = "",
+    readonly = {},
+    baseUrl = window.location.origin
+  } = _ref;
+  const hasTypeChoices = typeChoices && typeChoices.length > 1;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "form-edit__settings " + className
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2187,9 +2073,7 @@ FormParameters.propTypes = {
   className: PropTypes__default["default"].string
 };
 
-var hasChanged = function hasChanged(form, value) {
-  return !isEqual__default["default"](form, value);
-};
+const hasChanged = (form, value) => !isEqual__default["default"](form, value);
 function createInitialState(props) {
   return {
     past: [],
@@ -2198,40 +2082,44 @@ function createInitialState(props) {
     original: cloneDeep__default["default"](props.form)
   };
 }
-var reducer = function reducer(state, _ref) {
-  var type = _ref.type,
-    value = _ref.value;
-  var past = state.past,
-    current = state.current,
-    future = state.future;
-  var update = function update(newValue) {
+const reducer = (state, _ref) => {
+  let {
+    type,
+    value
+  } = _ref;
+  const {
+    past,
+    current,
+    future
+  } = state;
+  const update = newValue => {
     if (newValue.title !== state.current.title && !state.current._id) {
       newValue.name = camelCase__default["default"](value.title);
       newValue.path = camelCase__default["default"](value.title).toLowerCase();
     }
     return _extends({}, state, {
-      past: [].concat(past, [cloneDeep__default["default"](current)]),
+      past: [...past, cloneDeep__default["default"](current)],
       current: newValue
     });
   };
   switch (type) {
     case "undo":
       if (past.length) {
-        var previous = past[past.length - 1];
-        var newPast = past.slice(0, past.length - 1);
+        const previous = past[past.length - 1];
+        const newPast = past.slice(0, past.length - 1);
         return _extends({}, state, {
           past: newPast,
           current: cloneDeep__default["default"](previous),
-          future: [cloneDeep__default["default"](current)].concat(future)
+          future: [cloneDeep__default["default"](current), ...future]
         });
       }
       break;
     case "redo":
       if (future.length) {
-        var next = future[0];
-        var newFuture = future.slice(1);
+        const next = future[0];
+        const newFuture = future.slice(1);
         return _extends({}, state, {
-          past: [].concat(past, [cloneDeep__default["default"](current)]),
+          past: [...past, cloneDeep__default["default"](current)],
           current: cloneDeep__default["default"](next),
           future: newFuture
         });
@@ -2240,8 +2128,7 @@ var reducer = function reducer(state, _ref) {
     case "reset":
       return update(cloneDeep__default["default"](state.original));
     case "formChange":
-      // eslint-disable-next-line no-case-declarations
-      var newValue = _extends({}, state.current, value);
+      const newValue = _extends({}, state.current, value);
       if (hasChanged(state.current, newValue)) {
         return update(newValue);
       }
@@ -2258,23 +2145,22 @@ var reducer = function reducer(state, _ref) {
 };
 
 function useFormEdit(props) {
-  var _useReducer = React.useReducer(reducer, createInitialState(props)),
-    _useReducer$ = _useReducer[0],
-    current = _useReducer$.current,
-    future = _useReducer$.future,
-    past = _useReducer$.past,
-    dispatchFormAction = _useReducer[1];
-  var onSubmit = function onSubmit() {
+  const [{
+    current,
+    future,
+    past
+  }, dispatchFormAction] = React$1.useReducer(reducer, createInitialState(props));
+  const onSubmit = () => {
     if (props.onSubmit && typeof props.onSubmit === "function") {
       props.onSubmit(current);
     }
   };
-  var onCopy = function onCopy() {
+  const onCopy = () => {
     if (props.onSubmit && typeof props.onCopy === "function") {
       props.onCopy(current);
     }
   };
-  React.useEffect(function () {
+  React$1.useEffect(() => {
     if (props.form && (current._id !== props.form._id || current.modified !== props.form.modified)) {
       dispatchFormAction({
         type: "replaceForm",
@@ -2282,7 +2168,7 @@ function useFormEdit(props) {
       });
     }
   }, [props.form]);
-  var formChange = function formChange(newForm) {
+  const formChange = newForm => {
     if (hasChanged(current, _extends({}, current, newForm))) {
       dispatchFormAction({
         type: "formChange",
@@ -2290,57 +2176,54 @@ function useFormEdit(props) {
       });
     }
   };
-  var redo = function redo() {
-    return dispatchFormAction({
-      type: "redo"
-    });
-  };
-  var undo = function undo() {
-    return dispatchFormAction({
-      type: "undo"
-    });
-  };
-  var reset = function reset() {
-    return dispatchFormAction({
-      type: "reset"
-    });
-  };
-  var setChange = function setChange(path, value) {
-    var _extends2;
-    formChange(_extends({}, current, (_extends2 = {}, _extends2[path] = value, _extends2)));
+  const redo = () => dispatchFormAction({
+    type: "redo"
+  });
+  const undo = () => dispatchFormAction({
+    type: "undo"
+  });
+  const reset = () => dispatchFormAction({
+    type: "reset"
+  });
+  const setChange = (path, value) => {
+    formChange(_extends({}, current, {
+      [path]: value
+    }));
   };
   return {
     form: cloneDeep__default["default"](current),
-    redo: redo,
-    undo: undo,
-    reset: reset,
+    redo,
+    undo,
+    reset,
     hasChanged: !!past.length,
     isValid: current.title && current.name && current.path,
     hasUndo: !!past.length,
     hasRedo: !!future.length,
-    onSubmit: onSubmit,
-    onCopy: onCopy,
-    formChange: formChange,
-    setChange: setChange
+    onSubmit,
+    onCopy,
+    formChange,
+    setChange
   };
 }
 
 function FormEdit(props) {
-  var _useFormEdit = useFormEdit(props),
-    form = _useFormEdit.form,
-    isValid = _useFormEdit.isValid,
-    setChange = _useFormEdit.setChange,
-    hasRedo = _useFormEdit.hasRedo,
-    hasChanged = _useFormEdit.hasChanged,
-    hasUndo = _useFormEdit.hasUndo,
-    redo = _useFormEdit.redo,
-    undo = _useFormEdit.undo,
-    reset = _useFormEdit.reset,
-    onSubmit = _useFormEdit.onSubmit,
-    onCopy = _useFormEdit.onCopy;
-  var _props$options = props.options,
-    options = _props$options === void 0 ? {} : _props$options,
-    builder = props.builder;
+  const {
+    form,
+    isValid,
+    setChange,
+    hasRedo,
+    hasChanged,
+    hasUndo,
+    redo,
+    undo,
+    reset,
+    onSubmit,
+    onCopy
+  } = useFormEdit(props);
+  const {
+    options = {},
+    builder
+  } = props;
   return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "form-edit"
   }, /*#__PURE__*/React__default["default"].createElement(FormParameters, _extends({}, props, {
@@ -2366,7 +2249,7 @@ function FormEdit(props) {
     display: form.display,
     options: options,
     builder: builder,
-    onChange: function onChange(components) {
+    onChange: components => {
       setChange("components", components);
     }
   }));
@@ -2455,60 +2338,55 @@ function submissionToFormSettings(form, submission) {
 }
 
 function useFormSettings(_ref) {
-  var formDefinition = _ref.form,
-    _ref$onSubmit = _ref.onSubmit,
-    _onSubmit = _ref$onSubmit === void 0 ? noop__default["default"] : _ref$onSubmit,
-    options = _ref.options;
-  var form = getFormSettingsSchema();
-  var _useState = React.useState(true),
-    isValid = _useState[0],
-    setIsValid = _useState[1];
-  var _useState2 = React.useState(function () {
-      return formSettingsToSubmission(formDefinition);
-    }),
-    submission = _useState2[0],
-    setSubmission = _useState2[1];
-  var onChange = function onChange(_ref2) {
-    var data = _ref2.data,
-      isValid = _ref2.isValid;
+  let {
+    form: formDefinition,
+    onSubmit = noop__default["default"],
+    options
+  } = _ref;
+  const form = getFormSettingsSchema();
+  const [isValid, setIsValid] = React$1.useState(true);
+  const [submission, setSubmission] = React$1.useState(() => formSettingsToSubmission(formDefinition));
+  const onChange = _ref2 => {
+    let {
+      data,
+      isValid
+    } = _ref2;
     if (isValid) {
       setSubmission({
-        data: data
+        data
       });
     }
     setIsValid(isValid);
   };
-  React.useEffect(function () {
-    var input = formSettingsToSubmission(formDefinition);
+  React$1.useEffect(() => {
+    const input = formSettingsToSubmission(formDefinition);
     if (formDefinition != null && formDefinition._id && !isEqual__default["default"](submission.data, input.data)) {
       setSubmission(input);
     }
   }, [formDefinition == null ? void 0 : formDefinition._id]);
   return {
-    options: options,
-    form: form,
+    options,
+    form,
     type: formDefinition.type,
-    submission: submission,
-    onChange: onChange,
-    isValid: isValid,
-    setIsValid: setIsValid,
-    onSubmit: function onSubmit() {
-      _onSubmit(submissionToFormSettings(formDefinition, submission));
+    submission,
+    onChange,
+    isValid,
+    setIsValid,
+    onSubmit: () => {
+      onSubmit(submissionToFormSettings(formDefinition, submission));
     }
   };
 }
 function FormSettings(props) {
-  var _useFormSettings = useFormSettings(props),
-    form = _useFormSettings.form,
-    submission = _useFormSettings.submission,
-    _useFormSettings$opti = _useFormSettings.options,
-    options = _useFormSettings$opti === void 0 ? {} : _useFormSettings$opti,
-    onChange = _useFormSettings.onChange,
-    onSubmit = _useFormSettings.onSubmit,
-    isValid = _useFormSettings.isValid;
-  var i18n = options.i18n || function (f) {
-    return f;
-  };
+  const {
+    form,
+    submission,
+    options = {},
+    onChange,
+    onSubmit,
+    isValid
+  } = useFormSettings(props);
+  const i18n = options.i18n || (f => f);
   return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Form, {
     form: form,
     submission: submission,
@@ -2524,36 +2402,38 @@ function FormSettings(props) {
 }
 
 function useSelectColumnFilter(props) {
-  var column = props.column;
-  var id = column.id,
-    preFilteredRows = column.preFilteredRows;
-  var customChoices = column.choices;
-  var filterValue = column.filterValue,
-    setFilter = column.setFilter;
-  var choices = function () {
+  const {
+    column
+  } = props;
+  const {
+    id,
+    preFilteredRows
+  } = column;
+  const {
+    choices: customChoices
+  } = column;
+  const {
+    filterValue,
+    setFilter
+  } = column;
+  const choices = (() => {
     if (customChoices) {
       if (typeof customChoices === "function") {
         return customChoices(props);
       }
       return customChoices;
     }
-    return [].concat(new Set(preFilteredRows.map(function (row) {
-      return row.values[id];
-    }))).filter(function (value) {
-      return value;
-    }).map(function (value) {
-      return {
-        label: value,
-        value: value
-      };
-    });
-  }();
-  var onChange = function onChange(_, value) {
+    return [...new Set(preFilteredRows.map(row => row.values[id]))].filter(value => value).map(value => ({
+      label: value,
+      value
+    }));
+  })();
+  const onChange = (_, value) => {
     setFilter(value || undefined);
   };
   return {
     value: filterValue,
-    onChange: onChange,
+    onChange,
     choices: [{
       value: "",
       label: "All"
@@ -2561,10 +2441,11 @@ function useSelectColumnFilter(props) {
   };
 }
 function SelectColumnFilter(props) {
-  var _useSelectColumnFilte = useSelectColumnFilter(props),
-    value = _useSelectColumnFilte.value,
-    choices = _useSelectColumnFilte.choices,
-    onChange = _useSelectColumnFilte.onChange;
+  const {
+    value,
+    choices,
+    onChange
+  } = useSelectColumnFilter(props);
   return /*#__PURE__*/React__default["default"].createElement(Select, {
     key: "filter-" + props.column.id,
     name: "filter-" + props.column.id,
@@ -2691,7 +2572,7 @@ var moment = createCommonjsModule(function (module, exports) {
     if (Array.prototype.some) {
       some = Array.prototype.some;
     } else {
-      some = function some(fun) {
+      some = function (fun) {
         var t = Object(this),
           len = t.length >>> 0,
           i;
@@ -2904,7 +2785,7 @@ var moment = createCommonjsModule(function (module, exports) {
     if (Object.keys) {
       keys = Object.keys;
     } else {
-      keys = function keys(obj) {
+      keys = function (obj) {
         var i,
           res = [];
         for (i in obj) {
@@ -2945,7 +2826,7 @@ var moment = createCommonjsModule(function (module, exports) {
     function addFormatToken(token, padded, ordinal, callback) {
       var func = callback;
       if (typeof callback === 'string') {
-        func = function func() {
+        func = function () {
           return this[callback]();
         };
       }
@@ -3248,7 +3129,7 @@ var moment = createCommonjsModule(function (module, exports) {
         token = [token];
       }
       if (isNumber(callback)) {
-        func = function func(input, array) {
+        func = function (input, array) {
           array[callback] = toInt(input);
         };
       }
@@ -3284,7 +3165,7 @@ var moment = createCommonjsModule(function (module, exports) {
     if (Array.prototype.indexOf) {
       indexOf = Array.prototype.indexOf;
     } else {
-      indexOf = function indexOf(o) {
+      indexOf = function (o) {
         // I know
         var i;
         for (i = 0; i < this.length; ++i) {
@@ -5046,7 +4927,7 @@ var moment = createCommonjsModule(function (module, exports) {
       var args = [].slice.call(arguments, 0);
       return pickBy('isAfter', args);
     }
-    var now = function now() {
+    var now = function () {
       return Date.now ? Date.now() : +new Date();
     };
     var ordering = ['year', 'quarter', 'month', 'week', 'day', 'hour', 'minute', 'second', 'millisecond'];
@@ -6479,8 +6360,8 @@ var moment = createCommonjsModule(function (module, exports) {
     proto.toDate = toDate;
     proto.toISOString = toISOString;
     proto.inspect = inspect;
-    if (typeof Symbol !== 'undefined' && Symbol["for"] != null) {
-      proto[Symbol["for"]('nodejs.util.inspect.custom')] = function () {
+    if (typeof Symbol !== 'undefined' && Symbol.for != null) {
+      proto[Symbol.for('nodejs.util.inspect.custom')] = function () {
         return 'Moment<' + this.format() + '>';
       };
     }
@@ -6665,7 +6546,7 @@ var moment = createCommonjsModule(function (module, exports) {
         abbr: 'BC'
       }],
       dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/,
-      ordinal: function ordinal(number) {
+      ordinal: function (number) {
         var b = number % 10,
           output = toInt(number % 100 / 10) === 1 ? 'th' : b === 1 ? 'st' : b === 2 ? 'nd' : b === 3 ? 'rd' : 'th';
         return number + output;
@@ -7107,9 +6988,12 @@ var moment = createCommonjsModule(function (module, exports) {
 });
 
 function FormsCell(props) {
-  var _props$icon = props.icon,
-    icon = _props$icon === void 0 ? "server" : _props$icon,
-    form = props.row.original;
+  const {
+    icon = "server",
+    row: {
+      original: form
+    }
+  } = props;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "p-1"
   }, /*#__PURE__*/React__default["default"].createElement("h4", {
@@ -7126,40 +7010,37 @@ function FormsCell(props) {
     className: "badge bg-light mr-1"
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: classnames__default["default"](iconClass(undefined, "history"), "mr-1")
-  }), /*#__PURE__*/React__default["default"].createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map(function (tag, index) {
-    return /*#__PURE__*/React__default["default"].createElement("button", {
-      key: index,
-      className: "badge badge-hover bg-secondary mr-1",
-      onClick: stopPropagationWrapper(function () {
-        props.setFilter("tags", tag);
-        props.gotoPage(0);
-      })
-    }, /*#__PURE__*/React__default["default"].createElement("i", {
-      className: classnames__default["default"](iconClass(undefined, "tags"), "mr-1")
-    }), tag);
-  }))));
+  }), /*#__PURE__*/React__default["default"].createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map((tag, index) => /*#__PURE__*/React__default["default"].createElement("button", {
+    key: index,
+    className: "badge badge-hover bg-secondary mr-1",
+    onClick: stopPropagationWrapper(() => {
+      props.setFilter("tags", tag);
+      props.gotoPage(0);
+    })
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
+    className: classnames__default["default"](iconClass(undefined, "tags"), "mr-1")
+  }), tag)))));
 }
 
-var _excluded$4 = ["Cell"];
+const _excluded$4 = ["Cell"];
 function FormsTable(_ref) {
-  var Cell = _ref.Cell,
+  let {
+      Cell
+    } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  var _props$i18n = props.i18n,
-    i18n = _props$i18n === void 0 ? function (f) {
-      return f;
-    } : _props$i18n,
-    tags = props.tags;
-  var FormCell = Cell || FormsCell;
-  var columns = [{
+  const {
+    i18n = f => f,
+    tags
+  } = props;
+  const FormCell = Cell || FormsCell;
+  const columns = [{
     Header: i18n("Title"),
     accessor: "title",
     id: "title",
-    Cell: function Cell(props) {
-      return /*#__PURE__*/React__default["default"].createElement(FormCell, _extends({}, props, {
-        icon: props.icon,
-        i18n: i18n
-      }));
-    },
+    Cell: props => /*#__PURE__*/React__default["default"].createElement(FormCell, _extends({}, props, {
+      icon: props.icon,
+      i18n: i18n
+    })),
     Filter: DefaultColumnFilter,
     colspan: 2
   }, {
@@ -7167,13 +7048,11 @@ function FormsTable(_ref) {
     accessor: "tags",
     id: "tags",
     hidden: true,
-    Filter: function Filter(props) {
-      return tags && tags.length ? /*#__PURE__*/React__default["default"].createElement(SelectColumnFilter, _extends({}, props, {
-        column: _extends({}, props.columns, {
-          choices: tags
-        })
-      })) : /*#__PURE__*/React__default["default"].createElement(DefaultColumnFilter, props);
-    }
+    Filter: props => tags && tags.length ? /*#__PURE__*/React__default["default"].createElement(SelectColumnFilter, _extends({}, props, {
+      column: _extends({}, props.columns, {
+        choices: tags
+      })
+    })) : /*#__PURE__*/React__default["default"].createElement(DefaultColumnFilter, props)
   }];
   return /*#__PURE__*/React__default["default"].createElement(Table, _extends({}, props, {
     columns: columns
@@ -7181,13 +7060,12 @@ function FormsTable(_ref) {
 }
 
 function Loader(_ref) {
-  var isActive = _ref.isActive,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "blue" : _ref$color,
-    _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? "radio-circle" : _ref$icon,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className;
+  let {
+    isActive,
+    color = "blue",
+    icon = "radio-circle",
+    className = ""
+  } = _ref;
   if (isActive) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: classnames__default["default"]("opacity-85 z-20 flex items-center justify-center p-5 absolute top-0 right-0 left-0 bottom-0 bg-white", className)
@@ -7206,48 +7084,43 @@ Loader.propTypes = {
   className: PropTypes__default["default"].string
 };
 
-var _excluded$3 = ["show", "children", "closeModal", "onClose", "title", "footer", "style", "className"];
+const _excluded$3 = ["show", "children", "closeModal", "onClose", "title", "footer", "style", "className"];
 function useModal() {
-  var _useState = React.useState(false),
-    show = _useState[0],
-    setShowModal = _useState[1];
+  const [show, setShowModal] = React$1.useState(false);
   return {
-    show: show,
-    setShowModal: setShowModal,
-    openModal: function openModal() {
+    show,
+    setShowModal,
+    openModal() {
       setShowModal(true);
     },
-    closeModal: function closeModal() {
+    closeModal() {
       setShowModal(false);
     }
   };
 }
 function Modal(_ref) {
-  var show = _ref.show,
-    children = _ref.children,
-    _ref$closeModal = _ref.closeModal,
-    closeModal = _ref$closeModal === void 0 ? noop__default$1["default"] : _ref$closeModal,
-    _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? noop__default$1["default"] : _ref$onClose,
-    title = _ref.title,
-    ModalFooter = _ref.footer,
-    style = _ref.style,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className,
+  let {
+      show,
+      children,
+      closeModal = noop__default$1["default"],
+      onClose = noop__default$1["default"],
+      title,
+      footer: ModalFooter,
+      style,
+      className = ""
+    } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var titleRef = React.useRef();
-  var footerRef = React.useRef();
-  var _useState2 = React.useState(),
-    maxHeight = _useState2[0],
-    setMaxHeight = _useState2[1];
-  var onClickClose = function onClickClose() {
+  const titleRef = React$1.useRef();
+  const footerRef = React$1.useRef();
+  const [maxHeight, setMaxHeight] = React$1.useState();
+  const onClickClose = () => {
     closeModal();
     onClose();
   };
-  React.useEffect(function () {
+  React$1.useEffect(() => {
     if (titleRef.current || footerRef.current) {
       var _titleRef$current, _footerRef$current;
-      var height = ((titleRef == null ? void 0 : (_titleRef$current = titleRef.current) == null ? void 0 : _titleRef$current.offsetHeight) || 0) + ((footerRef == null ? void 0 : (_footerRef$current = footerRef.current) == null ? void 0 : _footerRef$current.offsetHeight) || 0);
+      const height = ((titleRef == null ? void 0 : (_titleRef$current = titleRef.current) == null ? void 0 : _titleRef$current.offsetHeight) || 0) + ((footerRef == null ? void 0 : (_footerRef$current = footerRef.current) == null ? void 0 : _footerRef$current.offsetHeight) || 0);
       setMaxHeight("calc(85vh - " + height + "px)");
     } else {
       setMaxHeight("auto");
@@ -7274,7 +7147,7 @@ function Modal(_ref) {
   }, title) : null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "formio-dialog-body",
     style: {
-      maxHeight: maxHeight
+      maxHeight
     },
     "data-testid": "modalBody"
   }, show && children), ModalFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7292,16 +7165,15 @@ function Modal(_ref) {
   })));
 }
 
-var _excluded$2 = ["maxWidth", "children"];
+const _excluded$2 = ["maxWidth", "children"];
 function RemoveModalFooter(_ref) {
-  var value = _ref.value,
-    valueToCompare = _ref.valueToCompare,
-    onSubmit = _ref.onSubmit,
-    onClose = _ref.onClose,
-    _ref$i18n = _ref.i18n,
-    i18n = _ref$i18n === void 0 ? function (f) {
-      return f;
-    } : _ref$i18n;
+  let {
+    value,
+    valueToCompare,
+    onSubmit,
+    onClose,
+    i18n = f => f
+  } = _ref;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-center bg-white p-2"
   }, /*#__PURE__*/React__default["default"].createElement("button", {
@@ -7312,7 +7184,7 @@ function RemoveModalFooter(_ref) {
     disabled: valueToCompare !== value,
     "data-testid": "customSubmitModal",
     className: "btn btn-danger mx-2",
-    onClick: function onClick(e) {
+    onClick: e => {
       if (valueToCompare === value) {
         onSubmit(e);
       }
@@ -7323,21 +7195,19 @@ function RemoveModalFooter(_ref) {
 }
 function RemoveModal(_ref2) {
   var _props$itemType, _props$itemType2;
-  var _ref2$maxWidth = _ref2.maxWidth,
-    maxWidth = _ref2$maxWidth === void 0 ? "300px" : _ref2$maxWidth,
-    children = _ref2.children,
+  let {
+      maxWidth = "300px",
+      children
+    } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
-  var _props$i18n = props.i18n,
-    i18n = _props$i18n === void 0 ? function (f) {
-      return f;
-    } : _props$i18n;
-  var _useState = React.useState(),
-    value = _useState[0],
-    setValue = _useState[1];
+  const {
+    i18n = f => f
+  } = props;
+  const [value, setValue] = React$1.useState();
   return /*#__PURE__*/React__default["default"].createElement(Modal, _extends({}, props, {
     className: classnames__default["default"](props.className, "formio-dialog-theme-remove"),
     style: {
-      maxWidth: maxWidth
+      maxWidth
     },
     title: "Drop " + ((_props$itemType = props.itemType) == null ? void 0 : _props$itemType.toLowerCase()),
     value: value,
@@ -7349,92 +7219,90 @@ function RemoveModal(_ref2) {
   }, children, i18n("To drop"), " ", /*#__PURE__*/React__default["default"].createElement("strong", null, props.valueToCompare), ",\xA0", i18n("type the"), "\xA0", /*#__PURE__*/React__default["default"].createElement("strong", null, "\"", (_props$itemType2 = props.itemType) == null ? void 0 : _props$itemType2.toLowerCase(), "\""), "\xA0", i18n("name"), " ", /*#__PURE__*/React__default["default"].createElement("strong", null, "\"", props.valueToCompare, "\""), "."), /*#__PURE__*/React__default["default"].createElement(InputText, {
     name: "remove",
     value: value,
-    onChange: function onChange(name, value) {
-      return setValue(value);
-    }
+    onChange: (name, value) => setValue(value)
   })));
 }
 
-var ReactComponent = /*#__PURE__*/function (_Components$component) {
-  _inheritsLoose(ReactComponent, _Components$component);
-  /**
-   * 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.
+class ReactComponent extends formiojs.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
-  function ReactComponent(component, options, data) {
-    var _this;
-    _this = _Components$component.call(this, component, options, data) || this;
-    _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
+  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
      */
-    _this.updateValue = function (value, flags) {
+    this.updateValue = (value, flags) => {
       flags = flags || {};
-      var newValue = value === undefined || value === null ? _this.getValue() : value;
-      var changed = newValue !== undefined ? _this.hasChanged(newValue, _this.dataValue) : false;
-      _this.dataValue = Array.isArray(newValue) ? [].concat(newValue) : newValue;
-      _this.updateOnChange(flags, changed);
+      const newValue = value === undefined || value === null ? this.getValue() : value;
+      const changed = newValue !== undefined ? this.hasChanged(newValue, this.dataValue) : false;
+      this.dataValue = Array.isArray(newValue) ? [...newValue] : newValue;
+      this.updateOnChange(flags, changed);
       return changed;
     };
-    return _this;
   }
-  var _proto = ReactComponent.prototype;
-  /**
-   * 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.
+  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.
    */
-  _proto.init = function init() {
-    return _Components$component.prototype.init.call(this);
+  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.
-   */;
-  _proto.destroy = function destroy() {
-    return _Components$component.prototype.destroy.call(this);
+  /**
+   * 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
-   */;
-  _proto.render = function render() {
+  /**
+   * 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 _Components$component.prototype.render.call(this, "<div ref=\"react-" + this.id + "\"></div>");
+    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.
-   */;
-  _proto.attach = function attach(element) {
+  /**
+   * 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.
+   */
+  attach(element) {
     try {
-      var _this2$loadRefs;
-      var _this2 = this;
-      _Components$component.prototype.attach.call(_this2, element);
+      const _super$attach = super.attach,
+        _this = this;
+      _super$attach.call(_this, element);
       // The loadRefs function will find all dom elements that have the "ref" setting that match the object property.
       // It can load a single element or multiple elements with the same ref.
-      _this2.loadRefs(element, (_this2$loadRefs = {}, _this2$loadRefs["react-" + _this2.id] = "single", _this2$loadRefs));
+      _this.loadRefs(element, {
+        ["react-" + _this.id]: "single"
+      });
       // @ts-ignore
-      if (_this2.refs["react-" + _this2.id]) {
+      if (_this.refs["react-" + _this.id]) {
         // @ts-ignore
-        _this2.reactInstance = _this2.attachReact(_this2.refs["react-" + _this2.id]);
-        if (_this2.shouldSetValue) {
-          _this2.setValue(_this2.dataForSetting);
-          _this2.updateValue(_this2.dataForSetting);
+        _this.reactInstance = _this.attachReact(_this.refs["react-" + _this.id]);
+        if (_this.shouldSetValue) {
+          _this.setValue(_this.dataForSetting);
+          _this.updateValue(_this.dataForSetting);
         }
       }
       return Promise.resolve();
@@ -7442,53 +7310,49 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
       return Promise.reject(e);
     }
   }
-  /**
-   * 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.
    */
-  ;
-  _proto.detach = function detach() {
+  detach() {
     // @ts-ignore
     if (this.refs["react-" + this.id]) {
       // @ts-ignore
       this.detachReact(this.refs["react-" + this.id]);
     }
-    _Components$component.prototype.detach.call(this);
+    super.detach();
   }
-  /**
-   * Override this function to render a react component.
-   */;
-  _proto.renderReact = function renderReact() {
+  /**
+   * 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
-  ;
-  _proto.attachReact = function attachReact(element) {
-    // eslint-disable-next-line react/no-render-return-value
+  attachReact(element) {
+    // eslint-disable-next-line react/no-render-return-value,react/no-deprecated
     return ReactDOM__default["default"].render(this.renderReact(), element);
   }
-  /**
-   * Override this function.
+  /**
+   * Override this function.
    */
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  ;
-  _proto.detachReact = function detachReact(element) {
+  detachReact(element) {
     if (element) {
+      // eslint-disable-next-line react/no-deprecated
       ReactDOM__default["default"].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
-   */;
-  _proto.setValue = function setValue(value, 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) {
     if (this.reactInstance) {
       this.reactInstance.setState({
         value: value
@@ -7499,57 +7363,48 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
       this.dataForSetting = value;
     }
     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 {*}
    */
-  _proto.getValue = function getValue() {
+  getValue() {
     if (this.reactInstance) {
       return this.reactInstance.state.value;
     }
     return this.defaultValue;
   }
-  /**
-   * Override normal validation check to insert custom validation in react component.
-   *
-   * @param data
-   * @param dirty
-   * @param rowData
-   * @returns {boolean}
-   */;
-  _proto.checkValidity = function checkValidity(data, dirty, rowData) {
-    var valid = _Components$component.prototype.checkValidity.call(this, data, dirty, rowData);
+  /**
+   * 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);
     if (!valid) {
       return false;
     }
     return this.validate(data, dirty, rowData);
   }
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ;
-  _proto.validate = function validate(data, dirty, rowData) {
+  validate(data, dirty, rowData) {
     return true;
-  };
-  _createClass(ReactComponent, [{
-    key: "$reactNode",
-    get: function get() {
-      return this.refs["react-" + this.id];
-    }
-  }]);
-  return ReactComponent;
-}(formiojs.Components.components.field);
+  }
+}
 
 function DefaultCell(_ref) {
-  var value = _ref.value,
-    _ref$render = _ref.render,
-    render = _ref$render === void 0 ? function (f) {
-      return f;
-    } : _ref$render;
+  let {
+    value,
+    render = f => f
+  } = _ref;
   if (value === undefined) {
     return /*#__PURE__*/React__default["default"].createElement("span", null);
   }
-  var rendered = render(value);
+  const rendered = render(value);
   if (value !== rendered) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       dangerouslySetInnerHTML: {
@@ -7561,21 +7416,17 @@ function DefaultCell(_ref) {
 }
 
 function mapFormToColumns(form) {
-  var columns = [];
-  FormioUtils__default["default"].eachComponent(form.components, function (component) {
+  const columns = [];
+  FormioUtils__default["default"].eachComponent(form.components, component => {
     if (component.tableView && component.key) {
-      var cmp = formiojs.Components.create(component, {}, null, true);
-      var column = {
+      const cmp = formiojs.Components.create(component, {}, null, true);
+      const column = {
         Header: component.label || component.title || component.key,
         accessor: "data." + component.key,
         className: "text-center",
-        Cell: function Cell(props) {
-          return /*#__PURE__*/React__default["default"].createElement(DefaultCell, _extends({}, props, {
-            render: function render(value) {
-              return cmp.asString(value);
-            }
-          }));
-        }
+        Cell: props => /*#__PURE__*/React__default["default"].createElement(DefaultCell, _extends({}, props, {
+          render: value => cmp.asString(value)
+        }))
       };
       if (component.type === "select" && component.dataSrc === "values") {
         column.Filter = SelectColumnFilter;
@@ -7587,58 +7438,61 @@ function mapFormToColumns(form) {
   return columns;
 }
 
-var _excluded$1 = ["form"];
+const _excluded$1 = ["form"];
 function SubmissionsTable(_ref) {
-  var form = _ref.form,
+  let {
+      form
+    } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  var columns = form && mapFormToColumns(form);
+  const columns = form && mapFormToColumns(form);
   return /*#__PURE__*/React__default["default"].createElement(Table, _extends({}, props, {
     columns: columns
   }));
 }
 
 function SliderColumnFilter(_ref) {
-  var _ref$column = _ref.column,
-    filterValue = _ref$column.filterValue,
-    setFilter = _ref$column.setFilter,
-    preFilteredRows = _ref$column.preFilteredRows,
-    id = _ref$column.id;
-  var _React$useMemo = React__default["default"].useMemo(function () {
-      var min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
-      var max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
-      preFilteredRows.forEach(function (row) {
-        min = Math.min(row == null ? void 0 : row.values[id], min);
-        max = Math.max(row == null ? void 0 : row.values[id], max);
-      });
-      return [min, max];
-    }, [id, preFilteredRows]),
-    min = _React$useMemo[0],
-    max = _React$useMemo[1];
+  let {
+    column: {
+      filterValue,
+      setFilter,
+      preFilteredRows,
+      id
+    }
+  } = _ref;
+  const [min, max] = React__default["default"].useMemo(() => {
+    let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
+    let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
+    preFilteredRows.forEach(row => {
+      min = Math.min(row == null ? void 0 : row.values[id], min);
+      max = Math.max(row == null ? void 0 : row.values[id], max);
+    });
+    return [min, max];
+  }, [id, preFilteredRows]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", {
     type: "range",
     min: min,
     max: max,
     value: filterValue || min,
-    onChange: function onChange(e) {
+    onChange: e => {
       setFilter(parseInt(e.target.value, 10));
     }
   }), /*#__PURE__*/React__default["default"].createElement("button", {
-    onClick: function onClick() {
-      return setFilter(undefined);
-    }
+    onClick: () => setFilter(undefined)
   }, "Off"));
 }
 
-var _excluded = ["style", "current", "items", "children", "HeaderChildren", "AddButton", "Button", "className", "onClick", "i18n"];
+const _excluded = ["style", "current", "items", "children", "HeaderChildren", "AddButton", "Button", "className", "onClick", "i18n"];
 function ButtonTab(_ref) {
-  var icon = _ref.icon,
-    back = _ref.back,
-    onClick = _ref.onClick,
-    isActive = _ref.isActive,
-    reverse = _ref.reverse,
-    children = _ref.children,
-    className = _ref.className,
-    after = _ref.after;
+  let {
+    icon,
+    back,
+    onClick,
+    isActive,
+    reverse,
+    children,
+    className,
+    after
+  } = _ref;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     title: "button-wrapper",
     className: classnames__default["default"]("tw-tabs__button-wrapper", isActive ? "-active" : "", back ? "-back" : "", className)
@@ -7655,21 +7509,18 @@ function ButtonTab(_ref) {
   }));
 }
 function Tabs(_ref2) {
-  var style = _ref2.style,
-    current = _ref2.current,
-    _ref2$items = _ref2.items,
-    items = _ref2$items === void 0 ? [] : _ref2$items,
-    children = _ref2.children,
-    HeaderChildren = _ref2.HeaderChildren,
-    AddButton = _ref2.AddButton,
-    _ref2$Button = _ref2.Button,
-    Button = _ref2$Button === void 0 ? ButtonTab : _ref2$Button,
-    className = _ref2.className,
-    _onClick = _ref2.onClick,
-    _ref2$i18n = _ref2.i18n,
-    i18n = _ref2$i18n === void 0 ? function (f) {
-      return f;
-    } : _ref2$i18n,
+  let {
+      style,
+      current,
+      items = [],
+      children,
+      HeaderChildren,
+      AddButton,
+      Button = ButtonTab,
+      className,
+      onClick,
+      i18n = f => f
+    } = _ref2,
     additionalProps = _objectWithoutPropertiesLoose(_ref2, _excluded);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     "data-testid": "tabs-comp",
@@ -7681,16 +7532,14 @@ function Tabs(_ref2) {
     className: "tw-tabs__header-wrapper"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "tw-tabs__header-border"
-  }), items.filter(function (item) {
-    return item.label || item.icon;
-  }).map(function (item, index) {
+  }), items.filter(item => item.label || item.icon).map((item, index) => {
     return /*#__PURE__*/React__default["default"].createElement(Button, _extends({
       key: index,
       back: item.back,
       isActive: (current == null ? void 0 : current.action) === item.action,
       exact: item.exact,
-      onClick: function onClick() {
-        _onClick && _onClick(item);
+      onClick: () => {
+        onClick && onClick(item);
       }
     }, additionalProps, item), i18n(item.label || ""));
   }), AddButton && /*#__PURE__*/React__default["default"].createElement(AddButton, _extends({}, additionalProps, {
@@ -7704,11 +7553,12 @@ function Tabs(_ref2) {
 }
 
 function mapPagination(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-    skip = _ref.skip,
-    limit = _ref.limit,
-    serverCount = _ref.serverCount,
-    length = _ref.length;
+  let {
+    skip,
+    limit,
+    serverCount,
+    length
+  } = _temp === void 0 ? {} : _temp;
   skip = skip || 0;
   limit = limit || 10;
   serverCount = serverCount || length;