@tsed/react-formio 2.0.2 → 2.1.0

package/dist/index.js

@@ -3,10 +3,12 @@ var WebformBuilder = require('formiojs/WebformBuilder');
 var Wizard = require('formiojs/Wizard');
 var WizardBuilder = require('formiojs/WizardBuilder');
 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 AllComponents = require('formiojs/components');
 var cloneDeep = require('lodash/cloneDeep');
@@ -27,7 +29,7 @@ var WebformBuilder__default = /*#__PURE__*/_interopDefaultLegacy(WebformBuilder)
 var Wizard__default = /*#__PURE__*/_interopDefaultLegacy(Wizard);
 var WizardBuilder__default = /*#__PURE__*/_interopDefaultLegacy(WizardBuilder);
 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);
@@ -238,8 +240,8 @@ function Select(_ref) {
     multiple = _ref.multiple,
     layout = _ref.layout,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var ref = React.useRef();
-  React.useEffect(function () {
+  var ref = React$1.useRef();
+  React$1.useEffect(function () {
     var instance;
     if (layout === "choicesjs") {
       instance = new Choices__default['default'](ref.current, {
@@ -295,6 +297,14 @@ Select.propTypes = {
   choices: PropTypes__default['default'].array.isRequired
 };
 
+function DrapNDropContainer(_ref) {
+  var enableDragNDrop = _ref.enableDragNDrop,
+    children = _ref.children;
+  return enableDragNDrop ? /*#__PURE__*/React.createElement(reactDnd.DndProvider, {
+    backend: reactDndHtml5Backend.HTML5Backend
+  }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}
+
 var LEFT_PAGE = "LEFT";
 var RIGHT_PAGE = "RIGHT";
 function range(from, to, step) {
@@ -463,6 +473,155 @@ function DefaultCellHeader(_ref) {
   }, column.render("Filter")) : null);
 }
 
+var _excluded$2 = ["onDrag", "onDrop", "index"];
+var DND_ITEM_TYPE = "row";
+function useDndRow(_ref) {
+  var onDrag = _ref.onDrag,
+    onDrop = _ref.onDrop,
+    index = _ref.index,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var dropRef = React$1.useRef(null);
+  var dragRef = React$1.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;
+      }
+    }),
+    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;
+  preview(drop(dropRef));
+  drag(dragRef);
+  return _extends({}, props, {
+    opacity: opacity,
+    isDragging: isDragging,
+    dropRef: dropRef,
+    dragRef: dragRef
+  });
+}
+
+function DefaultCells(_ref) {
+  var row = _ref.row;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, row.cells.map(function (cell, i) {
+    var _cell$column = cell.column,
+      hidden = _cell$column.hidden,
+      colspan = _cell$column.colspan;
+    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"));
+  }));
+}
+
+var _excluded$3 = ["onClick", "row", "enableDragNDrop", "onDrop", "onDrag"];
+function DefaultDndRow(props) {
+  var _useDndRow = useDndRow(props),
+    isDragging = _useDndRow.isDragging,
+    dragRef = _useDndRow.dragRef,
+    dropRef = _useDndRow.dropRef,
+    opacity = _useDndRow.opacity;
+  return /*#__PURE__*/React__default['default'].createElement("tr", {
+    ref: dropRef,
+    style: {
+      opacity: opacity
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("td", {
+    ref: dragRef,
+    role: "cell",
+    style: {
+      cursor: isDragging ? "grabbing" : "grab"
+    },
+    className: "align-middle"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex items-center justify-center"
+  }, /*#__PURE__*/React__default['default'].createElement("i", {
+    className: classnames(iconClass(undefined, "dots-vertical-rounded"))
+  }))), /*#__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$3);
+  var opts = _extends({}, props, {
+    onClick: function onClick() {
+      return _onClick(row.original, "row");
+    }
+  }, row.getRowProps());
+  if (enableDragNDrop) {
+    return /*#__PURE__*/React__default['default'].createElement(DefaultDndRow, _extends({}, opts, {
+      row: row,
+      onDrag: onDrag,
+      onDrop: onDrop
+    }));
+  }
+  return /*#__PURE__*/React__default['default'].createElement("tr", opts, /*#__PURE__*/React__default['default'].createElement(DefaultCells, {
+    row: row
+  }));
+}
+
 function callLast(fn, time) {
   var last = null;
   return function () {
@@ -477,7 +636,7 @@ function callLast(fn, time) {
   };
 }
 
-var _excluded$2 = ["name", "value", "label", "onChange", "required", "size", "type", "prefix", "suffix", "description", "className", "placeholder"];
+var _excluded$4 = ["name", "value", "label", "onChange", "required", "size", "type", "prefix", "suffix", "description", "className", "placeholder"];
 function InputText(_ref) {
   var name = _ref.name,
     value = _ref.value,
@@ -491,14 +650,14 @@ function InputText(_ref) {
     description = _ref.description,
     className = _ref.className,
     placeholder = _ref.placeholder,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  var _useState = React.useState(value),
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  var _useState = React$1.useState(value),
     localValue = _useState[0],
     setValue = _useState[1];
-  var change = React.useMemo(function () {
+  var change = React$1.useMemo(function () {
     return onChange && callLast(onChange, 300);
   }, [onChange]);
-  React.useEffect(function () {
+  React$1.useEffect(function () {
     setValue(value);
   }, [value]);
   return /*#__PURE__*/React__default['default'].createElement(FormControl, {
@@ -544,10 +703,10 @@ function DefaultColumnFilter(props) {
     id = _props$column.id,
     filterValue = _props$column.filterValue,
     setFilter = _props$column.setFilter;
-  var _useState = React.useState(filterValue || ""),
+  var _useState = React$1.useState(filterValue || ""),
     value = _useState[0],
     setValue = _useState[1];
-  var onChange = React.useCallback(function (name, value) {
+  var onChange = React$1.useCallback(function (name, value) {
     setValue(value);
     setFilterId(id);
     setFilter(value || undefined);
@@ -564,6 +723,14 @@ 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];
+  return myArray;
+};
+
 var stopPropagationWrapper = function stopPropagationWrapper(fn) {
   return function (event) {
     event.stopPropagation();
@@ -601,7 +768,7 @@ function DefaultOperationButton(props) {
   }, i18n(title)));
 }
 
-var _excluded$3 = ["OperationButton"];
+var _excluded$5 = ["OperationButton"];
 function DefaultCellOperations(_ref) {
   var operations = _ref.operations,
     row = _ref.row,
@@ -617,7 +784,7 @@ function DefaultCellOperations(_ref) {
   }).map(function (_ref3) {
     var _ref3$OperationButton = _ref3.OperationButton,
       OperationButton = _ref3$OperationButton === void 0 ? DefaultOperationButton : _ref3$OperationButton,
-      operation = _objectWithoutPropertiesLoose(_ref3, _excluded$3);
+      operation = _objectWithoutPropertiesLoose(_ref3, _excluded$5);
     return /*#__PURE__*/React__default['default'].createElement(OperationButton, _extends({
       key: operation.action
     }, operation, {
@@ -667,7 +834,7 @@ function useOperations(_ref) {
   };
 }
 
-var _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"];
+var _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 function (data, action) {
     var operation = operations.find(function (operation) {
@@ -689,7 +856,7 @@ function DefaultEmptyData() {
   }, "No data found");
 }
 var hooks = [reactTable.useFilters, reactTable.useGroupBy, reactTable.useSortBy, reactTable.usePagination];
-function Table(props) {
+function useCustomTable(props) {
   var children = props.children,
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className,
@@ -699,6 +866,10 @@ function Table(props) {
     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,
@@ -721,6 +892,8 @@ function Table(props) {
     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,
@@ -728,7 +901,7 @@ function Table(props) {
     i18n = _props$i18n === void 0 ? function (f) {
       return f;
     } : _props$i18n,
-    ctx = _objectWithoutPropertiesLoose(props, _excluded$4);
+    ctx = _objectWithoutPropertiesLoose(props, _excluded$6);
   var _onClick = getOperationCallback(operations, onClick);
   var defaultColumn = React__default['default'].useMemo(function () {
     return {
@@ -740,11 +913,21 @@ function Table(props) {
   var _React$useState = React__default['default'].useState(controlledFilterId),
     filterId = _React$useState[0],
     setFilterId = _React$useState[1];
+  // DND
+  var _useState = React$1.useState(data),
+    records = _useState[0],
+    setRecords = _useState[1];
+  var _onDrag = function _onDrag(dragIndex, hoverIndex) {
+    var newRecords = swapElements([].concat(records), dragIndex, hoverIndex);
+    setRecords(newRecords);
+    onDrag(newRecords);
+  };
   var tableInstance = reactTable.useTable.apply(void 0, [_extends({}, props, {
     columns: columns,
     data: data,
     ctx: ctx,
     defaultColumn: defaultColumn,
+    // getRowId,
     initialState: _extends({}, props.initialState || {}, {
       filters: controlledFilters || [],
       pageIndex: controlledPageIndex || 0,
@@ -779,55 +962,97 @@ function Table(props) {
       filterId: filterId
     });
   }, [onChange, pageIndex, pageSize, sortBy, filters, filterId]);
+  return _extends({}, props, {
+    className: className,
+    tableInstance: tableInstance,
+    CellHeader: CellHeader,
+    isLoading: isLoading,
+    onClick: _onClick,
+    Loader: Loader,
+    EmptyData: EmptyData,
+    Row: Row,
+    data: data,
+    disablePagination: disablePagination,
+    Pagination: Pagination$1,
+    pageIndex: pageIndex,
+    pageSize: pageSize,
+    pageSizes: pageSizes,
+    setPageSize: setPageSize,
+    i18n: i18n,
+    children: children,
+    onDrag: _onDrag,
+    onDrop: onDrop
+  });
+}
+
+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,
+    i18n = _useCustomTable.i18n,
+    enableDragNDrop = _useCustomTable.enableDragNDrop,
+    children = _useCustomTable.children,
+    onDrag = _useCustomTable.onDrag,
+    onDrop = _useCustomTable.onDrop;
   // Render the UI for your table
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement(DrapNDropContainer, {
+    enableDragNDrop: enableDragNDrop
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: classnames("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
-    }), headerGroup.headers.map(function (column) {
+    }), 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) {
+  })), !isLoading ? /*#__PURE__*/React__default['default'].createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map(function (row, index) {
     tableInstance.prepareRow(row);
-    return /*#__PURE__*/React__default['default'].createElement("tr", _extends({
-      onClick: function onClick() {
-        return _onClick(row.original, "row");
-      }
-    }, row.getRowProps(), {
-      key: "tableInstance.page." + row.id
-    }), row.cells.map(function (cell, i) {
-      var _cell$column = cell.column,
-        hidden = _cell$column.hidden,
-        colspan = _cell$column.colspan;
-      if (hidden) {
-        return null;
-      }
-      return /*#__PURE__*/React__default['default'].createElement("td", _extends({
-        colSpan: colspan
-      }, cell.getCellProps(), {
-        key: "tableInstance.page.cells." + (cell.value || "value") + "." + i
-      }), cell.render("Cell"));
-    }));
+    return /*#__PURE__*/React__default['default'].createElement(Row, {
+      index: index,
+      enableDragNDrop: enableDragNDrop,
+      onClick: onClick,
+      row: row,
+      key: "tableInstance.page." + row.id,
+      onDrag: onDrag,
+      onDrop: onDrop
+    });
   })) : null), isLoading ? /*#__PURE__*/React__default['default'].createElement(Loader, null) : null, !data.length ? /*#__PURE__*/React__default['default'].createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? /*#__PURE__*/React__default['default'].createElement("div", {
     className: "overflow-hidden"
-  }, /*#__PURE__*/React__default['default'].createElement(Pagination$1, _extends({}, tableInstance, {
+  }, /*#__PURE__*/React__default['default'].createElement(Pagination, _extends({}, tableInstance, {
     className: "text-sm",
     pageIndex: pageIndex,
     pageSize: pageSize,
     pageSizes: pageSizes,
     setPageSize: setPageSize,
     i18n: i18n
-  }))) : null, children);
+  }))) : null, children));
 }
 
-var _excluded$5 = ["disableFilters", "disablePagination", "availableActions", "onAddAction"];
+var _excluded$7 = ["disableFilters", "disablePagination", "availableActions", "onAddAction"];
 function ActionsTable(_ref) {
   var _ref$disableFilters = _ref.disableFilters,
     disableFilters = _ref$disableFilters === void 0 ? true : _ref$disableFilters,
@@ -837,12 +1062,12 @@ function ActionsTable(_ref) {
     availableActions = _ref$availableActions === void 0 ? [] : _ref$availableActions,
     _ref$onAddAction = _ref.onAddAction,
     onAddAction = _ref$onAddAction === void 0 ? noop__default['default'] : _ref$onAddAction,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var _props$i18n = props.i18n,
     i18n = _props$i18n === void 0 ? function (f) {
       return f;
     } : _props$i18n;
-  var _useState = React.useState(""),
+  var _useState = React$1.useState(""),
     currentAction = _useState[0],
     setAction = _useState[1];
   var columns = [{
@@ -943,7 +1168,7 @@ function Card(_ref) {
   }, children));
 }
 
-var _excluded$6 = ["src", "form", "options", "submission", "url"];
+var _excluded$8 = ["src", "form", "options", "submission", "url"];
 function _catch(body, recover) {
   try {
     var result = body();
@@ -956,14 +1181,14 @@ function _catch(body, recover) {
   return result;
 }
 function useEvent(event, callback, events) {
-  React.useEffect(function () {
+  React$1.useEffect(function () {
     if (callback) {
       events.set(event, callback);
     }
   }, [callback, event, events]);
 }
 function useEvents(funcs) {
-  var events = React.useRef(new Map());
+  var events = React$1.useRef(new Map());
   var hasEvent = function hasEvent(event) {
     return funcs.hasOwnProperty(event) && typeof funcs[event] === "function";
   };
@@ -1023,10 +1248,10 @@ function useForm(props) {
     options = _props$options === void 0 ? {} : _props$options,
     submission = props.submission,
     url = props.url,
-    funcs = _objectWithoutPropertiesLoose(props, _excluded$6);
-  var element = React.useRef();
-  var isLoaded = React.useRef();
-  var instance = React.useRef();
+    funcs = _objectWithoutPropertiesLoose(props, _excluded$8);
+  var element = React$1.useRef();
+  var isLoaded = React$1.useRef();
+  var instance = React$1.useRef();
   var _useEvents = useEvents(funcs),
     emit = _useEvents.emit,
     hasEvent = _useEvents.hasEvent;
@@ -1063,7 +1288,7 @@ function useForm(props) {
     }
     return instance.current;
   };
-  React.useEffect(function () {
+  React$1.useEffect(function () {
     if (instance.current) {
       instance.current.ready.then(function (formio) {
         if (isEqual__default['default'](formio.submission.data, submission == null ? void 0 : submission.data)) {
@@ -1073,7 +1298,7 @@ function useForm(props) {
       });
     }
   }, [submission]);
-  React.useEffect(function () {
+  React$1.useEffect(function () {
     if (form && instance.current) {
       instance.current.ready.then(function (formio) {
         formio.form = form;
@@ -1083,7 +1308,7 @@ function useForm(props) {
       });
     }
   }, [form, url]);
-  React.useEffect(function () {
+  React$1.useEffect(function () {
     if (src) {
       if (instance.current) {
         isLoaded.current = false;
@@ -1092,7 +1317,7 @@ function useForm(props) {
       createWebForm(src, options);
     }
   }, [src]);
-  React.useEffect(function () {
+  React$1.useEffect(function () {
     if (form) {
       createWebForm(form, options);
     }
@@ -1384,18 +1609,18 @@ function useFormAccess(_ref) {
     _onSubmit = _ref.onSubmit,
     options = _ref.options;
   // eslint-disable-next-line no-undef
-  var form = React.useMemo(function () {
+  var form = React$1.useMemo(function () {
     return getFormAccess(roles);
   }, [roles]);
-  var _useState = React.useState(function () {
+  var _useState = React$1.useState(function () {
       return dataAccessToSubmissions(formDefinition, form);
     }),
     submissions = _useState[0],
     setSubmissions = _useState[1];
-  var onChange = React.useCallback(function (type, submission) {
+  var onChange = React$1.useCallback(function (type, submission) {
     updateSubmissions(type, submission, submissions, setSubmissions);
   }, [submissions]);
-  React.useEffect(function () {
+  React$1.useEffect(function () {
     var input = dataAccessToSubmissions(formDefinition, form);
     if (formDefinition != null && formDefinition._id) {
       if (shouldUpdate("access", submissions.access, input) || shouldUpdate("submissionAccess", submissions.submissionAccess, input)) {
@@ -1422,7 +1647,7 @@ function NamedFormAccess(_ref2) {
     _onChange = _ref2.onChange,
     onSubmit = _ref2.onSubmit,
     children = _ref2.children;
-  var _useState2 = React.useState(true),
+  var _useState2 = React$1.useState(true),
     isValid = _useState2[0],
     setIsValid = _useState2[1];
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Form, {
@@ -1501,13 +1726,13 @@ FormAccess.propTypes = {
   onSubmit: PropTypes__default['default'].func
 };
 
-var _excluded$7 = ["action"],
+var _excluded$9 = ["action"],
   _excluded2 = ["actionInfo", "children", "onSubmit", "options"];
 function mapData(options, defaults) {
   return _extends({}, defaults, options);
 }
 function mapSettingsForm(_ref) {
-  var settingsForm = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+  var settingsForm = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   FormioUtils__default['default'].eachComponent(settingsForm.components, function (component) {
     var resourceExclude = "";
     if (component.type === "resourcefields") {
@@ -1740,8 +1965,8 @@ FormBuilder.propTypes = {
 };
 
 function useTooltip(options) {
-  var ref = React.useRef();
-  React.useEffect(function () {
+  var ref = React$1.useRef();
+  React$1.useEffect(function () {
     ref.current && new Tooltip__default['default'](ref.current, options);
   }, [ref, options]);
   return ref;
@@ -1839,7 +2064,7 @@ FormEditCTAs.propTypes = {
   onReset: PropTypes__default['default'].func
 };
 
-var _excluded$8 = ["name", "value", "label", "onChange", "required", "description", "prefix", "suffix"];
+var _excluded$a = ["name", "value", "label", "onChange", "required", "description", "prefix", "suffix"];
 function InputTags(_ref) {
   var name = _ref.name,
     _ref$value = _ref.value,
@@ -1850,9 +2075,9 @@ function InputTags(_ref) {
     description = _ref.description,
     prefix = _ref.prefix,
     suffix = _ref.suffix,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-  var ref = React.useRef();
-  React.useEffect(function () {
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+  var ref = React$1.useRef();
+  React$1.useEffect(function () {
     var instance = new Choices__default['default'](ref.current, {
       delimiter: ",",
       editItems: true,
@@ -2068,7 +2293,7 @@ var reducer = function reducer(state, _ref) {
 };
 
 function useFormEdit(props) {
-  var _useReducer = React.useReducer(reducer, createInitialState(props)),
+  var _useReducer = React$1.useReducer(reducer, createInitialState(props)),
     _useReducer$ = _useReducer[0],
     current = _useReducer$.current,
     future = _useReducer$.future,
@@ -2084,7 +2309,7 @@ function useFormEdit(props) {
       props.onCopy(current);
     }
   };
-  React.useEffect(function () {
+  React$1.useEffect(function () {
     if (props.form && (current._id !== props.form._id || current.modified !== props.form.modified)) {
       dispatchFormAction({
         type: "replaceForm",
@@ -2270,10 +2495,10 @@ function useFormSettings(_ref) {
     _onSubmit = _ref$onSubmit === void 0 ? noop__default['default'] : _ref$onSubmit,
     options = _ref.options;
   var form = getFormSettingsSchema();
-  var _useState = React.useState(true),
+  var _useState = React$1.useState(true),
     isValid = _useState[0],
     setIsValid = _useState[1];
-  var _useState2 = React.useState(function () {
+  var _useState2 = React$1.useState(function () {
       return formSettingsToSubmission(formDefinition);
     }),
     submission = _useState2[0],
@@ -2288,7 +2513,7 @@ function useFormSettings(_ref) {
     }
     setIsValid(isValid);
   };
-  React.useEffect(function () {
+  React$1.useEffect(function () {
     var input = formSettingsToSubmission(formDefinition);
     if (formDefinition != null && formDefinition._id && !isEqual__default['default'](submission.data, input.data)) {
       setSubmission(input);
@@ -6919,10 +7144,10 @@ function FormsCell(props) {
   }))));
 }
 
-var _excluded$9 = ["Cell"];
+var _excluded$b = ["Cell"];
 function FormsTable(_ref) {
   var Cell = _ref.Cell,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var _props$i18n = props.i18n,
     i18n = _props$i18n === void 0 ? function (f) {
       return f;
@@ -6985,9 +7210,9 @@ Loader.propTypes = {
   className: PropTypes__default['default'].string
 };
 
-var _excluded$a = ["show", "children", "closeModal", "onClose", "title", "footer", "style", "className"];
+var _excluded$c = ["show", "children", "closeModal", "onClose", "title", "footer", "style", "className"];
 function useModal() {
-  var _useState = React.useState(false),
+  var _useState = React$1.useState(false),
     show = _useState[0],
     setShowModal = _useState[1];
   return {
@@ -7013,17 +7238,17 @@ function Modal(_ref) {
     style = _ref.style,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-  var titleRef = React.useRef();
-  var footerRef = React.useRef();
-  var _useState2 = React.useState(),
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+  var titleRef = React$1.useRef();
+  var footerRef = React$1.useRef();
+  var _useState2 = React$1.useState(),
     maxHeight = _useState2[0],
     setMaxHeight = _useState2[1];
   var onClickClose = function onClickClose() {
     closeModal();
     onClose();
   };
-  React.useEffect(function () {
+  React$1.useEffect(function () {
     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);
@@ -7071,7 +7296,7 @@ function Modal(_ref) {
   })));
 }
 
-var _excluded$b = ["maxWidth", "children"];
+var _excluded$d = ["maxWidth", "children"];
 function RemoveModalFooter(_ref) {
   var value = _ref.value,
     valueToCompare = _ref.valueToCompare,
@@ -7105,10 +7330,10 @@ function RemoveModal(_ref2) {
   var _ref2$maxWidth = _ref2.maxWidth,
     maxWidth = _ref2$maxWidth === void 0 ? "300px" : _ref2$maxWidth,
     children = _ref2.children,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
   var _props$i18n = props.i18n,
     i18n = _props$i18n === void 0 ? noop__default['default'] : _props$i18n;
-  var _useState = React.useState(),
+  var _useState = React$1.useState(),
     value = _useState[0],
     setValue = _useState[1];
   return /*#__PURE__*/React__default['default'].createElement(Modal, _extends({}, props, {
@@ -7363,10 +7588,10 @@ function mapFormToColumns(form) {
   return columns;
 }
 
-var _excluded$c = ["form"];
+var _excluded$e = ["form"];
 function SubmissionsTable(_ref) {
   var form = _ref.form,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   var columns = form && mapFormToColumns(form);
   return /*#__PURE__*/React__default['default'].createElement(Table, _extends({}, props, {
     columns: columns
@@ -7405,7 +7630,7 @@ function SliderColumnFilter(_ref) {
   }, "Off"));
 }
 
-var _excluded$d = ["style", "current", "items", "children", "HeaderChildren", "AddButton", "Button", "className", "onClick", "i18n"];
+var _excluded$f = ["style", "current", "items", "children", "HeaderChildren", "AddButton", "Button", "className", "onClick", "i18n"];
 function ButtonTab(_ref) {
   var icon = _ref.icon,
     back = _ref.back,
@@ -7446,7 +7671,7 @@ function Tabs(_ref2) {
     i18n = _ref2$i18n === void 0 ? function (f) {
       return f;
     } : _ref2$i18n,
-    additionalProps = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
+    additionalProps = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     "data-testid": "tabs-comp",
     className: "tw-tabs " + className,
@@ -7578,9 +7803,11 @@ exports.Table = Table;
 exports.Tabs = Tabs;
 exports.callLast = callLast;
 exports.defaultDisplayChoices = defaultDisplayChoices;
+exports.getOperationCallback = getOperationCallback;
 exports.iconClass = iconClass;
 exports.mapPagination = mapPagination;
 exports.stopPropagationWrapper = stopPropagationWrapper;
+exports.useCustomTable = useCustomTable;
 exports.useForm = useForm;
 exports.useFormEdit = useFormEdit;
 exports.useModal = useModal;