@tsed/react-formio 2.0.3 → 2.1.0

package/dist/index.modern.js

@@ -3,11 +3,13 @@ export { default as WebformBuilder } from 'formiojs/WebformBuilder';
 export { default as Wizard } from 'formiojs/Wizard';
 export { default as WizardBuilder } from 'formiojs/WizardBuilder';
 import noop from 'lodash/noop';
-import React, { useRef, useEffect, useState, useMemo, useCallback, useReducer } from 'react';
+import React$1, { useRef, useEffect, useState, useMemo, useCallback, useReducer } from 'react';
 import { Templates, Form as Form$1, Components } from 'formiojs';
 export { Components, Formio, Templates, Utils } from 'formiojs';
 import Choices from '@formio/choices.js';
 import PropTypes from 'prop-types';
+import { DndProvider, useDrop, useDrag } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useTable, useFilters, useGroupBy, useSortBy, usePagination } from 'react-table';
 import AllComponents from 'formiojs/components';
 import cloneDeep from 'lodash/cloneDeep';
@@ -126,27 +128,27 @@ function FormControl({
   label,
   className
 }) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     "data-testid": name && `form-group-${name}`,
     id: `form-group-${name || ""}`,
     className: classnames("form-group", className)
-  }, label && /*#__PURE__*/React.createElement("label", {
+  }, label && /*#__PURE__*/React$1.createElement("label", {
     htmlFor: name,
     "data-testid": "form-control-label",
     className: `col-form-label ${required ? " field-required" : ""}`
-  }, label), /*#__PURE__*/React.createElement("div", {
+  }, label), /*#__PURE__*/React$1.createElement("div", {
     className: "input-group"
-  }, prefix && /*#__PURE__*/React.createElement("div", {
+  }, prefix && /*#__PURE__*/React$1.createElement("div", {
     className: "input-group-prepend"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React$1.createElement("span", {
     className: "input-group-text",
     "data-testid": "form-control-prefix"
-  }, prefix)), children, suffix && /*#__PURE__*/React.createElement("div", {
+  }, prefix)), children, suffix && /*#__PURE__*/React$1.createElement("div", {
     className: "input-group-append"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React$1.createElement("span", {
     className: "input-group-text",
     "data-testid": "form-control-suffix"
-  }, suffix))), description && /*#__PURE__*/React.createElement("div", {
+  }, suffix))), description && /*#__PURE__*/React$1.createElement("div", {
     "data-testid": "form-control-description",
     className: "form-text text-muted"
   }, description));
@@ -194,7 +196,7 @@ function Select(_ref) {
     label: placeholder,
     value: ""
   }, ...choices];
-  return /*#__PURE__*/React.createElement(FormControl, {
+  return /*#__PURE__*/React$1.createElement(FormControl, {
     name: name,
     label: label,
     required: required,
@@ -202,7 +204,7 @@ function Select(_ref) {
     prefix: prefix,
     suffix: suffix,
     shadow: false
-  }, /*#__PURE__*/React.createElement("select", _extends({
+  }, /*#__PURE__*/React$1.createElement("select", _extends({
     ref: ref
   }, props, {
     "data-testid": `select_${name}`,
@@ -219,7 +221,7 @@ function Select(_ref) {
     label,
     value
   }) => {
-    return /*#__PURE__*/React.createElement("option", {
+    return /*#__PURE__*/React$1.createElement("option", {
       key: String(value),
       label: label,
       value: value
@@ -235,6 +237,15 @@ Select.propTypes = {
   choices: PropTypes.array.isRequired
 };
 
+function DrapNDropContainer({
+  enableDragNDrop,
+  children
+}) {
+  return enableDragNDrop ? /*#__PURE__*/React.createElement(DndProvider, {
+    backend: HTML5Backend
+  }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}
+
 const LEFT_PAGE = "LEFT";
 const RIGHT_PAGE = "RIGHT";
 function range(from, to, step = 1) {
@@ -286,7 +297,7 @@ function PaginationButton(props) {
       active
     } = props,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-  return /*#__PURE__*/React.createElement(Component, _extends({}, otherProps, {
+  return /*#__PURE__*/React$1.createElement(Component, _extends({}, otherProps, {
     "data-testid": "pagination-button",
     disabled: disabled,
     className: classnames("page-link", disabled ? "disabled" : "", active ? "" : "", props.className)
@@ -317,55 +328,55 @@ function Pagination(props) {
     value,
     label: value
   }));
-  return /*#__PURE__*/React.createElement("nav", {
+  return /*#__PURE__*/React$1.createElement("nav", {
     "aria-label": "Page navigation",
     className: classnames("pagination-group -mb-3", className)
-  }, /*#__PURE__*/React.createElement("ul", {
+  }, /*#__PURE__*/React$1.createElement("ul", {
     className: "pagination mb-3 mr-3"
-  }, /*#__PURE__*/React.createElement("li", {
+  }, /*#__PURE__*/React$1.createElement("li", {
     className: classnames("page-item", !canPreviousPage && "disabled")
-  }, /*#__PURE__*/React.createElement(PaginationButton, {
+  }, /*#__PURE__*/React$1.createElement(PaginationButton, {
     tabIndex: -1,
     disabled: !canPreviousPage,
     onClick: () => previousPage()
   }, i18n("Previous"))), pageNumbers.map(page => {
     if ([LEFT_PAGE, RIGHT_PAGE].includes(page)) {
-      return /*#__PURE__*/React.createElement("li", {
+      return /*#__PURE__*/React$1.createElement("li", {
         className: "page-item",
         key: page
-      }, /*#__PURE__*/React.createElement(PaginationButton, {
+      }, /*#__PURE__*/React$1.createElement(PaginationButton, {
         "aria-hidden": "true"
       }, "..."));
     }
     const active = page - 1 === pageIndex;
-    return /*#__PURE__*/React.createElement("li", {
+    return /*#__PURE__*/React$1.createElement("li", {
       className: classnames("page-item", active && "active"),
       key: page
-    }, /*#__PURE__*/React.createElement(PaginationButton, {
+    }, /*#__PURE__*/React$1.createElement(PaginationButton, {
       tabIndex: pageIndex,
       active: active,
       onClick: () => gotoPage(page - 1)
     }, page));
-  }), /*#__PURE__*/React.createElement("li", {
+  }), /*#__PURE__*/React$1.createElement("li", {
     className: classnames("page-item", !canNextPage && "disabled")
-  }, /*#__PURE__*/React.createElement(PaginationButton, {
+  }, /*#__PURE__*/React$1.createElement(PaginationButton, {
     tabIndex: pageNumbers.length,
     disabled: !canNextPage,
     onClick: () => nextPage()
-  }, i18n("Next")))), /*#__PURE__*/React.createElement("li", {
+  }, i18n("Next")))), /*#__PURE__*/React$1.createElement("li", {
     className: "mb-3 mr-3 flex items-center"
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React$1.createElement(Select, {
     name: "page",
     value: pageSize,
     choices: choices,
     onChange: (name, value) => {
       setPageSize(+value);
     }
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React$1.createElement("span", {
     className: "ml-3"
-  }, i18n("items per page"))), pageOptions && /*#__PURE__*/React.createElement("li", {
+  }, i18n("items per page"))), pageOptions && /*#__PURE__*/React$1.createElement("li", {
     className: "mb-3 flex items-center"
-  }, /*#__PURE__*/React.createElement("span", null, i18n("Page"), "\xA0"), /*#__PURE__*/React.createElement("strong", null, pageIndex + 1, " of ", pageOptions.length)));
+  }, /*#__PURE__*/React$1.createElement("span", null, i18n("Page"), "\xA0"), /*#__PURE__*/React$1.createElement("strong", null, pageIndex + 1, " of ", pageOptions.length)));
 }
 
 function DefaultArrowSort({
@@ -375,9 +386,9 @@ function DefaultArrowSort({
     isSorted,
     isSortedDesc
   } = column;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React$1.createElement("span", {
     className: "table-arrow-sort"
-  }, isSorted ? /*#__PURE__*/React.createElement("i", {
+  }, isSorted ? /*#__PURE__*/React$1.createElement("i", {
     className: iconClass(undefined, isSortedDesc ? "sort-up" : "sort-down")
   }) : "");
 }
@@ -385,15 +396,163 @@ function DefaultArrowSort({
 function DefaultCellHeader({
   column
 }) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "table-cell-header"
-  }, /*#__PURE__*/React.createElement("div", _extends({
+  }, /*#__PURE__*/React$1.createElement("div", _extends({
     className: "table-cell-header__label"
-  }, column.getSortByToggleProps()), /*#__PURE__*/React.createElement("span", null, column.render("Header")), column.render("ArrowSort")), column.canFilter ? /*#__PURE__*/React.createElement("div", {
+  }, column.getSortByToggleProps()), /*#__PURE__*/React$1.createElement("span", null, column.render("Header")), column.render("ArrowSort")), column.canFilter ? /*#__PURE__*/React$1.createElement("div", {
     className: "table-cell-header__filter"
   }, column.render("Filter")) : null);
 }
 
+const _excluded$2 = ["onDrag", "onDrop", "index"];
+const DND_ITEM_TYPE = "row";
+function useDndRow(_ref) {
+  let {
+      onDrag,
+      onDrop,
+      index
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  const dropRef = useRef(null);
+  const dragRef = useRef(null);
+  const [, drop] = useDrop({
+    accept: DND_ITEM_TYPE,
+    drop(item) {
+      onDrop(item);
+    },
+    hover(item, monitor) {
+      if (!dropRef.current) {
+        return;
+      }
+      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] = 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,
+    isDragging,
+    dropRef,
+    dragRef
+  });
+}
+
+function DefaultCells({
+  row
+}) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, row.cells.map((cell, i) => {
+    const {
+      hidden,
+      colspan
+    } = cell.column;
+    if (hidden) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("td", _extends({
+      colSpan: colspan
+    }, cell.getCellProps(), {
+      key: `tableInstance.page.cells.${cell.value || "value"}.${i}`
+    }), cell.render("Cell"));
+  }));
+}
+
+const _excluded$3 = ["onClick", "row", "enableDragNDrop", "onDrop", "onDrag"];
+function DefaultDndRow(props) {
+  const {
+    isDragging,
+    dragRef,
+    dropRef,
+    opacity
+  } = useDndRow(props);
+  return /*#__PURE__*/React$1.createElement("tr", {
+    ref: dropRef,
+    style: {
+      opacity
+    }
+  }, /*#__PURE__*/React$1.createElement("td", {
+    ref: dragRef,
+    role: "cell",
+    style: {
+      cursor: isDragging ? "grabbing" : "grab"
+    },
+    className: "align-middle"
+  }, /*#__PURE__*/React$1.createElement("div", {
+    className: "flex items-center justify-center"
+  }, /*#__PURE__*/React$1.createElement("i", {
+    className: classnames(iconClass(undefined, "dots-vertical-rounded"))
+  }))), /*#__PURE__*/React$1.createElement(DefaultCells, props));
+}
+function DefaultRow(_ref) {
+  let {
+      onClick,
+      row,
+      enableDragNDrop,
+      onDrop,
+      onDrag
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  const opts = _extends({}, props, {
+    onClick: () => onClick(row.original, "row")
+  }, row.getRowProps());
+  if (enableDragNDrop) {
+    return /*#__PURE__*/React$1.createElement(DefaultDndRow, _extends({}, opts, {
+      row: row,
+      onDrag: onDrag,
+      onDrop: onDrop
+    }));
+  }
+  return /*#__PURE__*/React$1.createElement("tr", opts, /*#__PURE__*/React$1.createElement(DefaultCells, {
+    row: row
+  }));
+}
+
 function callLast(fn, time) {
   let last = null;
   return (...args) => {
@@ -405,7 +564,7 @@ function callLast(fn, time) {
   };
 }
 
-const _excluded$2 = ["name", "value", "label", "onChange", "required", "size", "type", "prefix", "suffix", "description", "className", "placeholder"];
+const _excluded$4 = ["name", "value", "label", "onChange", "required", "size", "type", "prefix", "suffix", "description", "className", "placeholder"];
 function InputText(_ref) {
   let {
       name,
@@ -421,13 +580,13 @@ function InputText(_ref) {
       className,
       placeholder
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   const [localValue, setValue] = useState(value);
   const change = useMemo(() => onChange && callLast(onChange, 300), [onChange]);
   useEffect(() => {
     setValue(value);
   }, [value]);
-  return /*#__PURE__*/React.createElement(FormControl, {
+  return /*#__PURE__*/React$1.createElement(FormControl, {
     name: name,
     label: label,
     required: required,
@@ -435,7 +594,7 @@ function InputText(_ref) {
     prefix: prefix,
     suffix: suffix,
     className: className
-  }, /*#__PURE__*/React.createElement("input", _extends({
+  }, /*#__PURE__*/React$1.createElement("input", _extends({
     type: type || "text"
   }, props, {
     "data-testid": `input_${name}`,
@@ -479,7 +638,7 @@ function DefaultColumnFilter(props) {
     setFilterId(id);
     setFilter(value || undefined);
   }, [id, setValue, setFilterId, setFilter]);
-  return /*#__PURE__*/React.createElement(InputText, {
+  return /*#__PURE__*/React$1.createElement(InputText, {
     size: "sm",
     id: id,
     name: id,
@@ -491,6 +650,12 @@ function DefaultColumnFilter(props) {
   });
 }
 
+const swapElements = (myArray, index1, index2) => {
+  myArray = [...myArray];
+  [myArray[index1], myArray[index2]] = [myArray[index2], myArray[index1]];
+  return myArray;
+};
+
 const stopPropagationWrapper = fn => event => {
   event.stopPropagation();
   fn();
@@ -508,17 +673,17 @@ function DefaultOperationButton(props) {
     title = "",
     i18n = f => f
   } = props;
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React$1.createElement("button", {
     className: classnames(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), `btn-${buttonSize}`),
     onClick: stopPropagationWrapper(() => onClick(action))
-  }, icon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
+  }, icon ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("i", {
     className: iconClass(undefined, icon)
-  }), " ", title && " ") : null, title && /*#__PURE__*/React.createElement("span", {
+  }), " ", title && " ") : null, title && /*#__PURE__*/React$1.createElement("span", {
     className: icon && title ? "ml-1" : ""
   }, i18n(title)));
 }
 
-const _excluded$3 = ["OperationButton"];
+const _excluded$5 = ["OperationButton"];
 function DefaultCellOperations({
   operations,
   row,
@@ -527,7 +692,7 @@ function DefaultCellOperations({
   i18n
 }) {
   const data = row.original;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "btn-group"
   }, operations.filter(({
     permissionsResolver
@@ -535,8 +700,8 @@ function DefaultCellOperations({
     let {
         OperationButton = DefaultOperationButton
       } = _ref,
-      operation = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-    return /*#__PURE__*/React.createElement(OperationButton, _extends({
+      operation = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    return /*#__PURE__*/React$1.createElement(OperationButton, _extends({
       key: operation.action
     }, operation, {
       onClick: action => onClick(data, action),
@@ -562,10 +727,10 @@ function useOperations({
       return [...columns, {
         id: "operations",
         groupByBoundary: true,
-        Header: () => /*#__PURE__*/React.createElement("div", {
+        Header: () => /*#__PURE__*/React$1.createElement("div", {
           className: "text-center"
         }, i18n("Operations")),
-        Cell: props => /*#__PURE__*/React.createElement(CellOperations, _extends({}, props, {
+        Cell: props => /*#__PURE__*/React$1.createElement(CellOperations, _extends({}, props, {
           operations: operations,
           onClick: onClick,
           ctx: ctx,
@@ -576,7 +741,7 @@ function useOperations({
   };
 }
 
-const _excluded$4 = ["children", "className", "columns", "data", "onChange", "onClick", "operations", "pageSizes", "filters", "filterId", "pageSize", "pageIndex", "sortBy", "isLoading", "disableFilters", "disablePagination", "ArrowSort", "ColumnFilter", "EmptyData", "Loader", "Pagination", "CellHeader", "CellOperations", "i18n"];
+const _excluded$6 = ["children", "className", "columns", "data", "onChange", "onClick", "onDrag", "onDrop", "operations", "pageSizes", "filters", "filterId", "pageSize", "pageIndex", "sortBy", "isLoading", "disableFilters", "disablePagination", "ArrowSort", "ColumnFilter", "EmptyData", "Loader", "Pagination", "Row", "CellHeader", "CellOperations", "i18n"];
 function getOperationCallback(operations, onClick) {
   return (data, action) => {
     const operation = operations.find(operation => operation.action === action || operation.alias === action);
@@ -586,17 +751,17 @@ function getOperationCallback(operations, onClick) {
   };
 }
 function DefaultLoader() {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "text-center p-2 pb-4 font-bold"
   }, "Loading in progress");
 }
 function DefaultEmptyData() {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "text-center p-2 pb-4 font-bold"
   }, "No data found");
 }
 const hooks = [useFilters, useGroupBy, useSortBy, usePagination];
-function Table(props) {
+function useCustomTable(props) {
   const {
       children,
       className = "",
@@ -604,6 +769,8 @@ function Table(props) {
       data,
       onChange = noop,
       onClick = noop,
+      onDrag = noop,
+      onDrop = noop,
       operations = [],
       pageSizes = [10, 25, 50, 100],
       filters: controlledFilters,
@@ -619,23 +786,32 @@ function Table(props) {
       EmptyData = DefaultEmptyData,
       Loader = DefaultLoader,
       Pagination: Pagination$1 = Pagination,
+      Row = DefaultRow,
       CellHeader = DefaultCellHeader,
       CellOperations,
       i18n = f => f
     } = props,
-    ctx = _objectWithoutPropertiesLoose(props, _excluded$4);
+    ctx = _objectWithoutPropertiesLoose(props, _excluded$6);
   const _onClick = getOperationCallback(operations, onClick);
-  const defaultColumn = React.useMemo(() => ({
+  const defaultColumn = React$1.useMemo(() => ({
     // Let's set up our default Filter UI
     Filter: ColumnFilter,
     ArrowSort
   }), [ColumnFilter, ArrowSort]);
-  const [filterId, setFilterId] = React.useState(controlledFilterId);
+  const [filterId, setFilterId] = React$1.useState(controlledFilterId);
+  // DND
+  const [records, setRecords] = useState(data);
+  const _onDrag = (dragIndex, hoverIndex) => {
+    const newRecords = swapElements([...records], dragIndex, hoverIndex);
+    setRecords(newRecords);
+    onDrag(newRecords);
+  };
   const tableInstance = useTable(_extends({}, props, {
     columns,
     data,
     ctx,
     defaultColumn,
+    // getRowId,
     initialState: _extends({}, props.initialState || {}, {
       filters: controlledFilters || [],
       pageIndex: controlledPageIndex || 0,
@@ -664,7 +840,7 @@ function Table(props) {
       filters
     }
   } = tableInstance;
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     onChange({
       pageIndex,
       pageSize,
@@ -673,50 +849,94 @@ function Table(props) {
       filterId
     });
   }, [onChange, pageIndex, pageSize, sortBy, filters, filterId]);
+  return _extends({}, props, {
+    className,
+    tableInstance,
+    CellHeader,
+    isLoading,
+    onClick: _onClick,
+    Loader,
+    EmptyData,
+    Row,
+    data,
+    disablePagination,
+    Pagination: Pagination$1,
+    pageIndex,
+    pageSize,
+    pageSizes,
+    setPageSize,
+    i18n,
+    children,
+    onDrag: _onDrag,
+    onDrop: onDrop
+  });
+}
+
+function Table(props) {
+  const {
+    className,
+    tableInstance,
+    CellHeader,
+    isLoading,
+    onClick,
+    Loader,
+    EmptyData,
+    Row,
+    data,
+    disablePagination,
+    Pagination,
+    pageIndex,
+    pageSize,
+    pageSizes,
+    setPageSize,
+    i18n,
+    enableDragNDrop,
+    children,
+    onDrag,
+    onDrop
+  } = useCustomTable(props);
   // Render the UI for your table
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement(DrapNDropContainer, {
+    enableDragNDrop: enableDragNDrop
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: classnames("table-group table-responsive", className)
-  }, /*#__PURE__*/React.createElement("table", _extends({
+  }, /*#__PURE__*/React$1.createElement("table", _extends({
     className: "table table-striped table-hover"
-  }, tableInstance.getTableProps()), /*#__PURE__*/React.createElement("thead", null, tableInstance.headerGroups.map((headerGroup, i) => /*#__PURE__*/React.createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
+  }, tableInstance.getTableProps()), /*#__PURE__*/React$1.createElement("thead", null, tableInstance.headerGroups.map((headerGroup, i) => /*#__PURE__*/React$1.createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
     key: `tableInstance.headerGroups${i}`
-  }), headerGroup.headers.map(column => /*#__PURE__*/React.createElement("th", _extends({}, column.getHeaderProps(), {
+  }), enableDragNDrop ? /*#__PURE__*/React$1.createElement("th", {
+    role: "columnheader",
+    className: "text-center"
+  }, /*#__PURE__*/React$1.createElement("div", {
+    className: "table-cell-header"
+  })) : null, headerGroup.headers.map(column => /*#__PURE__*/React$1.createElement("th", _extends({}, column.getHeaderProps(), {
     key: `tableInstance.headers.column.${column.id}`
-  }), /*#__PURE__*/React.createElement(CellHeader, {
+  }), /*#__PURE__*/React$1.createElement(CellHeader, {
     column: column
-  })))))), !isLoading ? /*#__PURE__*/React.createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map(row => {
+  })))))), !isLoading ? /*#__PURE__*/React$1.createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map((row, index) => {
     tableInstance.prepareRow(row);
-    return /*#__PURE__*/React.createElement("tr", _extends({
-      onClick: () => _onClick(row.original, "row")
-    }, row.getRowProps(), {
-      key: `tableInstance.page.${row.id}`
-    }), row.cells.map((cell, i) => {
-      const {
-        hidden,
-        colspan
-      } = cell.column;
-      if (hidden) {
-        return null;
-      }
-      return /*#__PURE__*/React.createElement("td", _extends({
-        colSpan: colspan
-      }, cell.getCellProps(), {
-        key: `tableInstance.page.cells.${cell.value || "value"}.${i}`
-      }), cell.render("Cell"));
-    }));
-  })) : null), isLoading ? /*#__PURE__*/React.createElement(Loader, null) : null, !data.length ? /*#__PURE__*/React.createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React$1.createElement(Row, {
+      index: index,
+      enableDragNDrop: enableDragNDrop,
+      onClick: onClick,
+      row: row,
+      key: `tableInstance.page.${row.id}`,
+      onDrag: onDrag,
+      onDrop: onDrop
+    });
+  })) : null), isLoading ? /*#__PURE__*/React$1.createElement(Loader, null) : null, !data.length ? /*#__PURE__*/React$1.createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? /*#__PURE__*/React$1.createElement("div", {
     className: "overflow-hidden"
-  }, /*#__PURE__*/React.createElement(Pagination$1, _extends({}, tableInstance, {
+  }, /*#__PURE__*/React$1.createElement(Pagination, _extends({}, tableInstance, {
     className: "text-sm",
     pageIndex: pageIndex,
     pageSize: pageSize,
     pageSizes: pageSizes,
     setPageSize: setPageSize,
     i18n: i18n
-  }))) : null, children);
+  }))) : null, children));
 }
 
-const _excluded$5 = ["disableFilters", "disablePagination", "availableActions", "onAddAction"];
+const _excluded$7 = ["disableFilters", "disablePagination", "availableActions", "onAddAction"];
 function ActionsTable(_ref) {
   let {
       disableFilters = true,
@@ -724,7 +944,7 @@ function ActionsTable(_ref) {
       availableActions = [],
       onAddAction = noop
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   const {
     i18n = f => f
   } = props;
@@ -734,13 +954,13 @@ function ActionsTable(_ref) {
     accessor: "title",
     id: "title"
   }];
-  return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
+  return /*#__PURE__*/React$1.createElement(Table, _extends({}, props, {
     disableFilters: disableFilters,
     disablePagination: disablePagination,
     columns: columns
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React$1.createElement("div", {
     className: "pagination-group"
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React$1.createElement(Select, {
     name: "actions",
     value: currentAction,
     choices: [{
@@ -748,15 +968,15 @@ function ActionsTable(_ref) {
       value: ""
     }].concat(availableActions),
     onChange: (name, action) => setAction(action)
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React$1.createElement("div", {
     className: "pl-3"
-  }, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React$1.createElement("button", {
     "data-testid": "submit",
     disabled: currentAction === "",
     className: "btn btn-success",
     onClick: () => currentAction && onAddAction(currentAction),
     type: "submit"
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: classnames(iconClass(undefined, "plus"), "mr-1")
   }), " ", i18n("Add action")))));
 }
@@ -771,9 +991,9 @@ function formatError(error) {
   if (Object.prototype.hasOwnProperty.call(error, "errors")) {
     return Object.keys(error.errors).map((key, index) => {
       const item = error.errors[key];
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React$1.createElement("div", {
         key: index
-      }, /*#__PURE__*/React.createElement("strong", null, item.name, " (", item.path, ")"), " ", "- ", item.message);
+      }, /*#__PURE__*/React$1.createElement("strong", null, item.name, " (", item.path, ")"), " ", "- ", item.message);
     });
   }
   // If this is a standard error.
@@ -783,7 +1003,7 @@ function formatError(error) {
   // If this is a joy validation error.
   if (Object.prototype.hasOwnProperty.call(error, "name") && error.name === "ValidationError") {
     return error.details.map((item, index) => {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React$1.createElement("div", {
         key: index
       }, item.message);
     });
@@ -801,7 +1021,7 @@ function Alert({
   if (!error || Array.isArray(error) && !error.length) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: `alert alert-${type}`,
     role: "alert"
   }, formatError(error));
@@ -812,19 +1032,19 @@ function Card({
   label,
   className
 }) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: classnames("card", className)
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "card-header "
-  }, /*#__PURE__*/React.createElement("h4", {
+  }, /*#__PURE__*/React$1.createElement("h4", {
     className: "card-title"
-  }, label)), /*#__PURE__*/React.createElement("div", {
+  }, label)), /*#__PURE__*/React$1.createElement("div", {
     className: "card-body",
     role: "article"
   }, children));
 }
 
-const _excluded$6 = ["src", "form", "options", "submission", "url"];
+const _excluded$8 = ["src", "form", "options", "submission", "url"];
 function useEvent(event, callback, events) {
   useEffect(() => {
     if (callback) {
@@ -875,7 +1095,7 @@ function useForm(props) {
       submission,
       url
     } = props,
-    funcs = _objectWithoutPropertiesLoose(props, _excluded$6);
+    funcs = _objectWithoutPropertiesLoose(props, _excluded$8);
   const element = useRef();
   const isLoaded = useRef();
   const instance = useRef();
@@ -974,7 +1194,7 @@ function Form(props) {
   const {
     element
   } = useForm(props);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     "data-testid": `formioContainer${props.name || ""}`,
     ref: element,
     className: props.className
@@ -1274,7 +1494,7 @@ function NamedFormAccess({
   children
 }) {
   const [isValid, setIsValid] = useState(true);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Form, {
     name: name,
     form: form[name],
     submission: submissions[name],
@@ -1288,11 +1508,11 @@ function NamedFormAccess({
       setIsValid(isValid);
     },
     options: options
-  }), /*#__PURE__*/React.createElement("button", {
+  }), /*#__PURE__*/React$1.createElement("button", {
     disabled: !isValid,
     className: "mt-5 btn btn-primary",
     onClick: onSubmit
-  }, "Save access"), children, /*#__PURE__*/React.createElement("div", {
+  }, "Save access"), children, /*#__PURE__*/React$1.createElement("div", {
     className: "alert alert-warning mt-5"
   }, "Elevated permissions allow users to access and modify other user's entities. Assign with caution."));
 }
@@ -1305,43 +1525,43 @@ function FormAccess(props) {
     onChange,
     onSubmit
   } = useFormAccess(props);
-  return /*#__PURE__*/React.createElement("div", null, props.children, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", null, props.children, /*#__PURE__*/React$1.createElement("div", {
     className: "flex mb-5"
-  }, /*#__PURE__*/React.createElement(Card, {
+  }, /*#__PURE__*/React$1.createElement(Card, {
     label: "Manage submission access",
     className: "flex-1"
-  }, /*#__PURE__*/React.createElement(NamedFormAccess, {
+  }, /*#__PURE__*/React$1.createElement(NamedFormAccess, {
     name: "submissionAccess",
     form: form,
     submissions: submissions,
     onChange: onChange,
     onSubmit: onSubmit,
     options: options
-  }, props.children)), /*#__PURE__*/React.createElement("div", {
+  }, props.children)), /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/4 pl-4"
-  }, /*#__PURE__*/React.createElement(Card, {
+  }, /*#__PURE__*/React$1.createElement(Card, {
     label: "About Submission Data Permissions"
-  }, /*#__PURE__*/React.createElement("p", null, "Submission Data Permissions allow you to control who can create, view, and modify form submission data."), /*#__PURE__*/React.createElement("ul", {
+  }, /*#__PURE__*/React$1.createElement("p", null, "Submission Data Permissions allow you to control who can create, view, and modify form submission data."), /*#__PURE__*/React$1.createElement("ul", {
     className: "mt-5 pl-7 list-disc"
-  }, /*#__PURE__*/React.createElement("li", {
+  }, /*#__PURE__*/React$1.createElement("li", {
     className: "pb-2"
-  }, /*#__PURE__*/React.createElement("strong", null, "Own Permissions"), " - These permissions apply if the user is the original creator of the submission data and is listed as the owner of the submission in submission.owner. This allows users to create and edit their own submission data without seeing other user's data."), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("strong", null, "All Permissions"), " - These permissions apply to all submission data regardless of who owns it."))))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("strong", null, "Own Permissions"), " - These permissions apply if the user is the original creator of the submission data and is listed as the owner of the submission in submission.owner. This allows users to create and edit their own submission data without seeing other user's data."), /*#__PURE__*/React$1.createElement("li", null, /*#__PURE__*/React$1.createElement("strong", null, "All Permissions"), " - These permissions apply to all submission data regardless of who owns it."))))), /*#__PURE__*/React$1.createElement("div", {
     className: "flex mb-5"
-  }, /*#__PURE__*/React.createElement(Card, {
+  }, /*#__PURE__*/React$1.createElement(Card, {
     label: `Manage ${type} definition access`,
     className: "flex-1"
-  }, /*#__PURE__*/React.createElement(NamedFormAccess, {
+  }, /*#__PURE__*/React$1.createElement(NamedFormAccess, {
     name: "access",
     form: form,
     submissions: submissions,
     onChange: onChange,
     onSubmit: onSubmit,
     options: options
-  }, props.children)), /*#__PURE__*/React.createElement("div", {
+  }, props.children)), /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/4 pl-4"
-  }, /*#__PURE__*/React.createElement(Card, {
+  }, /*#__PURE__*/React$1.createElement(Card, {
     label: "About Form Definition Access"
-  }, /*#__PURE__*/React.createElement("p", null, "These permissions allow you to give access to a single form's JSON definition so they can render the form."), /*#__PURE__*/React.createElement("p", null, "Typically you will want to allow all of your roles to be able to Read the form definition."), /*#__PURE__*/React.createElement("p", null, "Each form also has an owner at ", /*#__PURE__*/React.createElement("strong", null, "form.owner"), " which is the user who created the form. In some applications users are allowed to create their own forms. In those cases it is helpful to have Owner based permissions as well.")))));
+  }, /*#__PURE__*/React$1.createElement("p", null, "These permissions allow you to give access to a single form's JSON definition so they can render the form."), /*#__PURE__*/React$1.createElement("p", null, "Typically you will want to allow all of your roles to be able to Read the form definition."), /*#__PURE__*/React$1.createElement("p", null, "Each form also has an owner at ", /*#__PURE__*/React$1.createElement("strong", null, "form.owner"), " which is the user who created the form. In some applications users are allowed to create their own forms. In those cases it is helpful to have Owner based permissions as well.")))));
 }
 FormAccess.propTypes = {
   type: PropTypes.string.isRequired,
@@ -1352,13 +1572,13 @@ FormAccess.propTypes = {
   onSubmit: PropTypes.func
 };
 
-const _excluded$7 = ["action"],
+const _excluded$9 = ["action"],
   _excluded2 = ["actionInfo", "children", "onSubmit", "options"];
 function mapData(options, defaults) {
   return _extends({}, defaults, options);
 }
 function mapSettingsForm(_ref) {
-  let settingsForm = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+  let settingsForm = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   FormioUtils.eachComponent(settingsForm.components, component => {
     const resourceExclude = "";
     if (component.type === "resourcefields") {
@@ -1396,7 +1616,7 @@ function FormAction(_ref2) {
       }
     };
   })();
-  return /*#__PURE__*/React.createElement("div", null, children, /*#__PURE__*/React.createElement(Form, {
+  return /*#__PURE__*/React$1.createElement("div", null, children, /*#__PURE__*/React$1.createElement(Form, {
     form: form,
     submission: submission,
     onSubmit: onSubmit,
@@ -1434,7 +1654,7 @@ async function createBuilder(el, {
     console.error(er);
   }
 }
-class FormBuilder extends React.Component {
+class FormBuilder extends React$1.Component {
   constructor(props) {
     super(props);
     this.elRef = void 0;
@@ -1512,12 +1732,12 @@ class FormBuilder extends React.Component {
     });
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React$1.createElement("div", {
       ref: ref => {
         this.elRef = ref;
       },
       onClick: e => e.stopPropagation()
-    }, /*#__PURE__*/React.createElement("div", null));
+    }, /*#__PURE__*/React$1.createElement("div", null));
   }
 }
 FormBuilder.defaultProps = {
@@ -1586,37 +1806,37 @@ function FormEditCTAs({
     placement: "top",
     title: t("Reset all changes")
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "form-edit__actions"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("button", {
     className: `btn btn-primary btn-save flex ${disabled ? "disabled" : ""}`,
     disabled: disabled,
     onClick: () => !disabled && onSubmit && onSubmit()
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: `mr-1 ${iconClass(options.iconset, "save")}`
-  }), saveText), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+  }), saveText), /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("button", {
     className: `btn btn-light btn-undo ${hasUndo ? "" : "disabled"}`,
     onClick: () => onUndo && onUndo(),
     ref: undoTooltipRef
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: iconClass(options.iconset, "undo")
-  })), /*#__PURE__*/React.createElement("button", {
+  })), /*#__PURE__*/React$1.createElement("button", {
     className: `btn btn-light btn-redo ${hasRedo ? "" : "disabled"}`,
     onClick: () => onRedo && onRedo(),
     ref: redoTooltipRef
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: iconClass(options.iconset, "redo")
-  }))), /*#__PURE__*/React.createElement("div", null, onCopy && /*#__PURE__*/React.createElement("button", {
+  }))), /*#__PURE__*/React$1.createElement("div", null, onCopy && /*#__PURE__*/React$1.createElement("button", {
     className: "btn btn-light",
     onClick: () => onCopy(),
     ref: copyTooltipRef
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: iconClass(options.iconset, "copy")
-  })), /*#__PURE__*/React.createElement("button", {
+  })), /*#__PURE__*/React$1.createElement("button", {
     className: `btn btn-light btn-reset`,
     onClick: () => onReset && onReset(),
     ref: resetTooltipRef
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: iconClass(options.iconset, "reset")
   })))));
 }
@@ -1631,7 +1851,7 @@ FormEditCTAs.propTypes = {
   onReset: PropTypes.func
 };
 
-const _excluded$8 = ["name", "value", "label", "onChange", "required", "description", "prefix", "suffix"];
+const _excluded$a = ["name", "value", "label", "onChange", "required", "description", "prefix", "suffix"];
 function InputTags(_ref) {
   let {
       name,
@@ -1643,7 +1863,7 @@ function InputTags(_ref) {
       prefix,
       suffix
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   const ref = useRef();
   useEffect(() => {
     const instance = new Choices(ref.current, {
@@ -1662,14 +1882,14 @@ function InputTags(_ref) {
       instance.destroy();
     };
   }, []);
-  return /*#__PURE__*/React.createElement(FormControl, {
+  return /*#__PURE__*/React$1.createElement(FormControl, {
     name: name,
     label: label,
     required: required,
     description: description,
     prefix: prefix,
     suffix: suffix
-  }, /*#__PURE__*/React.createElement("input", _extends({
+  }, /*#__PURE__*/React$1.createElement("input", _extends({
     ref: ref,
     type: "text"
   }, props, {
@@ -1706,11 +1926,11 @@ function FormParameters({
   baseUrl = window.location.origin
 }) {
   const hasTypeChoices = typeChoices && typeChoices.length > 1;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: `form-edit__settings ${className}`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React.createElement(InputText, {
+  }, /*#__PURE__*/React$1.createElement(InputText, {
     label: "Title",
     placeholder: "Enter the form title",
     name: "title",
@@ -1718,9 +1938,9 @@ function FormParameters({
     value: form.title,
     disabled: !!readonly["title"],
     onChange: onChange
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React.createElement(InputText, {
+  }, /*#__PURE__*/React$1.createElement(InputText, {
     label: "Name",
     placeholder: "Enter the form machine name",
     name: "name",
@@ -1728,16 +1948,16 @@ function FormParameters({
     disabled: !!readonly["name"],
     value: form.name,
     onChange: onChange
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React.createElement(InputText, {
+  }, /*#__PURE__*/React$1.createElement(InputText, {
     label: "Path",
     placeholder: "example",
     name: "path",
     className: "mb-0",
-    description: /*#__PURE__*/React.createElement("span", {
+    description: /*#__PURE__*/React$1.createElement("span", {
       className: "text-xxs flex items-center"
-    }, /*#__PURE__*/React.createElement("i", {
+    }, /*#__PURE__*/React$1.createElement("i", {
       className: "bx bx-link ml-1 mr-1"
     }), `${baseUrl}/${form.path}`),
     required: true,
@@ -1748,26 +1968,26 @@ function FormParameters({
       width: "120px"
     },
     onChange: onChange
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React$1.createElement(Select, {
     label: "Display as",
     name: "display",
     disabled: !!readonly["display"],
     value: form.display,
     choices: displayChoices,
     onChange: onChange
-  })), hasTypeChoices && /*#__PURE__*/React.createElement("div", {
+  })), hasTypeChoices && /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React$1.createElement(Select, {
     label: "Type",
     name: "type",
     value: form.type,
     choices: typeChoices,
     onChange: onChange
-  })), enableTags && /*#__PURE__*/React.createElement("div", {
+  })), enableTags && /*#__PURE__*/React$1.createElement("div", {
     className: "w-1/3"
-  }, /*#__PURE__*/React.createElement(InputTags, {
+  }, /*#__PURE__*/React$1.createElement(InputTags, {
     label: "Tags",
     name: "tags",
     value: form.tags,
@@ -1934,14 +2154,14 @@ function FormEdit(props) {
     options = {},
     builder
   } = props;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("div", {
     className: "form-edit"
-  }, /*#__PURE__*/React.createElement(FormParameters, _extends({}, props, {
+  }, /*#__PURE__*/React$1.createElement(FormParameters, _extends({}, props, {
     className: "",
     key: `form-settings-${form._id}`,
     form: form,
     onChange: setChange
-  })), /*#__PURE__*/React.createElement(FormEditCTAs, _extends({}, props, {
+  })), /*#__PURE__*/React$1.createElement(FormEditCTAs, _extends({}, props, {
     className: "",
     key: `form-edit-ctas-${form._id}`,
     options: options,
@@ -1953,7 +2173,7 @@ function FormEdit(props) {
     onReset: reset,
     onCopy: onCopy,
     onSubmit: onSubmit
-  }))), /*#__PURE__*/React.createElement(FormBuilder, {
+  }))), /*#__PURE__*/React$1.createElement(FormBuilder, {
     key: `form-builder-${form._id}`,
     components: form.components,
     display: form.display,
@@ -2095,12 +2315,12 @@ function FormSettings(props) {
     isValid
   } = useFormSettings(props);
   const i18n = options.i18n || (f => f);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form, {
+  return /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Form, {
     form: form,
     submission: submission,
     onChange: onChange,
     options: options
-  }), /*#__PURE__*/React.createElement("button", {
+  }), /*#__PURE__*/React$1.createElement("button", {
     "data-testid": "submit",
     disabled: !isValid,
     className: "mt-5 btn btn-primary",
@@ -2125,7 +2345,7 @@ function SelectColumnFilter({
     label: value,
     value
   }));
-  return /*#__PURE__*/React.createElement(Select, {
+  return /*#__PURE__*/React$1.createElement(Select, {
     key: `filter-${column.id}`,
     name: `filter-${column.id}`,
     size: "sm",
@@ -6667,40 +6887,40 @@ function FormsCell(props) {
       original: form
     }
   } = props;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "p-1"
-  }, /*#__PURE__*/React.createElement("h4", {
+  }, /*#__PURE__*/React$1.createElement("h4", {
     className: "text-primary text-lg flex items-center"
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: classnames(iconClass(undefined, icon), "mr-1")
-  }), form.title), /*#__PURE__*/React.createElement("ul", {
+  }), form.title), /*#__PURE__*/React$1.createElement("ul", {
     className: "reset-list text-gray-500"
-  }, /*#__PURE__*/React.createElement("li", {
+  }, /*#__PURE__*/React$1.createElement("li", {
     className: "text-sm"
-  }, "Name: ", form.name || form.machineName), /*#__PURE__*/React.createElement("li", {
+  }, "Name: ", form.name || form.machineName), /*#__PURE__*/React$1.createElement("li", {
     className: "mt-5"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React$1.createElement("span", {
     className: "badge bg-light mr-1"
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: classnames(iconClass(undefined, "history"), "mr-1")
-  }), /*#__PURE__*/React.createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map((tag, index) => /*#__PURE__*/React.createElement("button", {
+  }), /*#__PURE__*/React$1.createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map((tag, index) => /*#__PURE__*/React$1.createElement("button", {
     key: index,
     className: "badge badge-hover bg-secondary mr-1",
     onClick: stopPropagationWrapper(() => {
       props.setFilter("tags", tag);
       props.gotoPage(0);
     })
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: classnames(iconClass(undefined, "tags"), "mr-1")
   }), tag)))));
 }
 
-const _excluded$9 = ["Cell"];
+const _excluded$b = ["Cell"];
 function FormsTable(_ref) {
   let {
       Cell
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   const {
     i18n = f => f,
     tags
@@ -6710,7 +6930,7 @@ function FormsTable(_ref) {
     Header: i18n("Title"),
     accessor: "title",
     id: "title",
-    Cell: props => /*#__PURE__*/React.createElement(FormCell, _extends({}, props, {
+    Cell: props => /*#__PURE__*/React$1.createElement(FormCell, _extends({}, props, {
       icon: props.icon,
       i18n: i18n
     })),
@@ -6721,13 +6941,13 @@ function FormsTable(_ref) {
     accessor: "tags",
     id: "tags",
     hidden: true,
-    Filter: props => tags && tags.length ? /*#__PURE__*/React.createElement(SelectColumnFilter, _extends({}, props, {
+    Filter: props => tags && tags.length ? /*#__PURE__*/React$1.createElement(SelectColumnFilter, _extends({}, props, {
       column: _extends({}, props.columns, {
         choices: tags
       })
-    })) : /*#__PURE__*/React.createElement(DefaultColumnFilter, props)
+    })) : /*#__PURE__*/React$1.createElement(DefaultColumnFilter, props)
   }];
-  return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
+  return /*#__PURE__*/React$1.createElement(Table, _extends({}, props, {
     columns: columns
   }));
 }
@@ -6739,9 +6959,9 @@ function Loader({
   className = ""
 }) {
   if (isActive) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React$1.createElement("div", {
       className: classnames("opacity-85 z-20 flex items-center justify-center p-5 absolute top-0 right-0 left-0 bottom-0 bg-white", className)
-    }, /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React$1.createElement("span", {
       "data-testid": `icon_${icon}`,
       color: color,
       className: `text-11xl ${iconClass(undefined, icon, true)}`
@@ -6756,7 +6976,7 @@ Loader.propTypes = {
   className: PropTypes.string
 };
 
-const _excluded$a = ["show", "children", "closeModal", "onClose", "title", "footer", "style", "className"];
+const _excluded$c = ["show", "children", "closeModal", "onClose", "title", "footer", "style", "className"];
 function useModal() {
   const [show, setShowModal] = useState(false);
   return {
@@ -6781,7 +7001,7 @@ function Modal(_ref) {
       style,
       className = ""
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   const titleRef = useRef();
   const footerRef = useRef();
   const [maxHeight, setMaxHeight] = useState();
@@ -6801,35 +7021,35 @@ function Modal(_ref) {
   if (!show) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     role: "dialog",
     className: `formio-dialog formio-dialog-theme-default ${className}`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "formio-dialog-overlay",
     onClick: onClickClose
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React$1.createElement("div", {
     style: style,
     className: "formio-dialog-content"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "formio-dialog-wrapper"
-  }, title ? /*#__PURE__*/React.createElement("div", {
+  }, title ? /*#__PURE__*/React$1.createElement("div", {
     className: "formio-dialog-title",
     ref: titleRef,
     "data-testid": "modalTitle"
-  }, title) : null, /*#__PURE__*/React.createElement("div", {
+  }, title) : null, /*#__PURE__*/React$1.createElement("div", {
     className: "formio-dialog-body",
     style: {
       maxHeight
     },
     "data-testid": "modalBody"
-  }, show && children), ModalFooter ? /*#__PURE__*/React.createElement("div", {
+  }, show && children), ModalFooter ? /*#__PURE__*/React$1.createElement("div", {
     className: "formio-dialog-footer",
     ref: footerRef,
     "data-testid": "modalFooter"
-  }, /*#__PURE__*/React.createElement(ModalFooter, _extends({}, props, {
+  }, /*#__PURE__*/React$1.createElement(ModalFooter, _extends({}, props, {
     closeModal: closeModal,
     onClose: onClickClose
-  }))) : null), /*#__PURE__*/React.createElement("button", {
+  }))) : null), /*#__PURE__*/React$1.createElement("button", {
     className: "formio-dialog-close float-right btn btn-secondary btn-sm",
     "aria-label": "close",
     "data-testid": "closeModal",
@@ -6837,7 +7057,7 @@ function Modal(_ref) {
   })));
 }
 
-const _excluded$b = ["maxWidth", "children"];
+const _excluded$d = ["maxWidth", "children"];
 function RemoveModalFooter({
   value,
   valueToCompare,
@@ -6845,13 +7065,13 @@ function RemoveModalFooter({
   onClose,
   i18n = f => f
 }) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "flex items-center justify-center bg-white p-2"
-  }, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React$1.createElement("button", {
     "data-testid": "customCloseModal",
     className: "btn btn-outline-dark mx-2",
     onClick: onClose
-  }, i18n("Cancel")), /*#__PURE__*/React.createElement("button", {
+  }, i18n("Cancel")), /*#__PURE__*/React$1.createElement("button", {
     disabled: valueToCompare !== value,
     "data-testid": "customSubmitModal",
     className: "btn btn-danger mx-2",
@@ -6860,7 +7080,7 @@ function RemoveModalFooter({
         onSubmit(e);
       }
     }
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React$1.createElement("i", {
     className: classnames(iconClass(undefined, "trash"), "mr-2")
   }), i18n("Remove")));
 }
@@ -6870,12 +7090,12 @@ function RemoveModal(_ref) {
       maxWidth = "300px",
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   const {
     i18n = noop
   } = props;
   const [value, setValue] = useState();
-  return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
+  return /*#__PURE__*/React$1.createElement(Modal, _extends({}, props, {
     className: classnames(props.className, "formio-dialog-theme-remove"),
     style: {
       maxWidth
@@ -6883,11 +7103,11 @@ function RemoveModal(_ref) {
     title: `Drop ${(_props$itemType = props.itemType) == null ? void 0 : _props$itemType.toLowerCase()}`,
     value: value,
     footer: RemoveModalFooter
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React$1.createElement("div", {
     className: "px-4 pt-3 pb-5"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "pb-1"
-  }, children, i18n("To drop"), " ", /*#__PURE__*/React.createElement("strong", null, props.valueToCompare), ",\xA0", i18n("type the"), "\xA0", /*#__PURE__*/React.createElement("strong", null, "\"", (_props$itemType2 = props.itemType) == null ? void 0 : _props$itemType2.toLowerCase(), "\""), "\xA0", i18n("name"), " ", /*#__PURE__*/React.createElement("strong", null, "\"", props.valueToCompare, "\""), "."), /*#__PURE__*/React.createElement(InputText, {
+  }, children, i18n("To drop"), " ", /*#__PURE__*/React$1.createElement("strong", null, props.valueToCompare), ",\xA0", i18n("type the"), "\xA0", /*#__PURE__*/React$1.createElement("strong", null, "\"", (_props$itemType2 = props.itemType) == null ? void 0 : _props$itemType2.toLowerCase(), "\""), "\xA0", i18n("name"), " ", /*#__PURE__*/React$1.createElement("strong", null, "\"", props.valueToCompare, "\""), "."), /*#__PURE__*/React$1.createElement(InputText, {
     name: "remove",
     value: value,
     onChange: (name, value) => setValue(value)
@@ -7068,17 +7288,17 @@ function DefaultCell({
   render = f => f
 }) {
   if (value === undefined) {
-    return /*#__PURE__*/React.createElement("span", null);
+    return /*#__PURE__*/React$1.createElement("span", null);
   }
   const rendered = render(value);
   if (value !== rendered) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React$1.createElement("div", {
       dangerouslySetInnerHTML: {
         __html: rendered
       }
     });
   }
-  return /*#__PURE__*/React.createElement("span", null, String(value));
+  return /*#__PURE__*/React$1.createElement("span", null, String(value));
 }
 
 function mapFormToColumns(form) {
@@ -7089,7 +7309,7 @@ function mapFormToColumns(form) {
       const column = {
         Header: component.label || component.title || component.key,
         accessor: `data.${component.key}`,
-        Cell: props => /*#__PURE__*/React.createElement(DefaultCell, _extends({}, props, {
+        Cell: props => /*#__PURE__*/React$1.createElement(DefaultCell, _extends({}, props, {
           render: value => cmp.asString(value)
         }))
       };
@@ -7103,14 +7323,14 @@ function mapFormToColumns(form) {
   return columns;
 }
 
-const _excluded$c = ["form"];
+const _excluded$e = ["form"];
 function SubmissionsTable(_ref) {
   let {
       form
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   const columns = form && mapFormToColumns(form);
-  return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
+  return /*#__PURE__*/React$1.createElement(Table, _extends({}, props, {
     columns: columns
   }));
 }
@@ -7123,7 +7343,7 @@ function SliderColumnFilter({
     id
   }
 }) {
-  const [min, max] = React.useMemo(() => {
+  const [min, max] = React$1.useMemo(() => {
     let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
     let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
     preFilteredRows.forEach(row => {
@@ -7132,7 +7352,7 @@ function SliderColumnFilter({
     });
     return [min, max];
   }, [id, preFilteredRows]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("input", {
     type: "range",
     min: min,
     max: max,
@@ -7140,12 +7360,12 @@ function SliderColumnFilter({
     onChange: e => {
       setFilter(parseInt(e.target.value, 10));
     }
-  }), /*#__PURE__*/React.createElement("button", {
+  }), /*#__PURE__*/React$1.createElement("button", {
     onClick: () => setFilter(undefined)
   }, "Off"));
 }
 
-const _excluded$d = ["style", "current", "items", "children", "HeaderChildren", "AddButton", "Button", "className", "onClick", "i18n"];
+const _excluded$f = ["style", "current", "items", "children", "HeaderChildren", "AddButton", "Button", "className", "onClick", "i18n"];
 function ButtonTab({
   icon,
   back,
@@ -7156,18 +7376,18 @@ function ButtonTab({
   className,
   after
 }) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     title: "button-wrapper",
     className: classnames("tw-tabs__button-wrapper", isActive ? "-active" : "", back ? "-back" : "", className)
-  }, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React$1.createElement("button", {
     title: "button-tab",
     className: classnames("tw-tabs__button", reverse ? "-reverse" : "", isActive ? "-active" : "", back ? "-back" : ""),
     onClick: onClick
-  }, icon && /*#__PURE__*/React.createElement("i", {
+  }, icon && /*#__PURE__*/React$1.createElement("i", {
     className: classnames(iconClass(undefined, icon), "tw-tabs__button-icon")
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React$1.createElement("span", {
     className: "tw-tabs__button-label"
-  }, children), after), /*#__PURE__*/React.createElement("div", {
+  }, children), after), /*#__PURE__*/React$1.createElement("div", {
     className: classnames("tw-tabs__button-border", isActive ? "-active" : "")
   }));
 }
@@ -7184,19 +7404,19 @@ function Tabs(_ref) {
       onClick,
       i18n = f => f
     } = _ref,
-    additionalProps = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-  return /*#__PURE__*/React.createElement("div", {
+    additionalProps = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+  return /*#__PURE__*/React$1.createElement("div", {
     "data-testid": "tabs-comp",
     className: `tw-tabs ${className}`,
     style: style
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("nav", {
+  }, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("nav", {
     className: "tw-tabs__header"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "tw-tabs__header-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "tw-tabs__header-border"
   }), items.filter(item => item.label || item.icon).map((item, index) => {
-    return /*#__PURE__*/React.createElement(Button, _extends({
+    return /*#__PURE__*/React$1.createElement(Button, _extends({
       key: index,
       back: item.back,
       isActive: (current == null ? void 0 : current.action) === item.action,
@@ -7205,11 +7425,11 @@ function Tabs(_ref) {
         onClick && onClick(item);
       }
     }, additionalProps, item), i18n(item.label || ""));
-  }), AddButton && /*#__PURE__*/React.createElement(AddButton, _extends({}, additionalProps, {
+  }), AddButton && /*#__PURE__*/React$1.createElement(AddButton, _extends({}, additionalProps, {
     current: current
-  })))), HeaderChildren && /*#__PURE__*/React.createElement(HeaderChildren, _extends({}, additionalProps, {
+  })))), HeaderChildren && /*#__PURE__*/React$1.createElement(HeaderChildren, _extends({}, additionalProps, {
     current: current
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React$1.createElement("div", {
     title: "tab-body",
     className: "tw-tabs__body"
   }, children));
@@ -7231,5 +7451,5 @@ function mapPagination({
   };
 }
 
-export { ActionsTable, Alert, ButtonTab, Card, DefaultArrowSort, DefaultCell, DefaultCellHeader, DefaultCellOperations, DefaultColumnFilter, DefaultOperationButton, Form, FormAccess, FormAction, FormBuilder, FormControl, FormEdit, FormEditCTAs, FormParameters, FormSettings, FormsTable, InputTags, InputText, Loader, Modal, Pagination, ReactComponent, RemoveModal, Select, SelectColumnFilter, SliderColumnFilter, SubmissionsTable, Table, Tabs, callLast, defaultDisplayChoices, iconClass, mapPagination, stopPropagationWrapper, useForm, useFormEdit, useModal, useOperations, useTooltip };
+export { ActionsTable, Alert, ButtonTab, Card, DefaultArrowSort, DefaultCell, DefaultCellHeader, DefaultCellOperations, DefaultColumnFilter, DefaultOperationButton, Form, FormAccess, FormAction, FormBuilder, FormControl, FormEdit, FormEditCTAs, FormParameters, FormSettings, FormsTable, InputTags, InputText, Loader, Modal, Pagination, ReactComponent, RemoveModal, Select, SelectColumnFilter, SliderColumnFilter, SubmissionsTable, Table, Tabs, callLast, defaultDisplayChoices, getOperationCallback, iconClass, mapPagination, stopPropagationWrapper, useCustomTable, useForm, useFormEdit, useModal, useOperations, useTooltip };
 //# sourceMappingURL=index.modern.js.map