@tsed/react-formio 2.1.2 → 2.2.0

package/dist/index.modern.js

@@ -2,6 +2,7 @@ export { default as Webform } from 'formiojs/Webform';
 export { default as WebformBuilder } from 'formiojs/WebformBuilder';
 export { default as Wizard } from 'formiojs/Wizard';
 export { default as WizardBuilder } from 'formiojs/WizardBuilder';
+import classnames from 'classnames';
 import noop from 'lodash/noop';
 import React, { useRef, useEffect, useState, useMemo, useCallback, useReducer } from 'react';
 import { Templates, Form as Form$1, Components } from 'formiojs';
@@ -50,60 +51,6 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function createCommonjsModule(fn) {
-  var module = { exports: {} };
-	return fn(module, module.exports), module.exports;
-}
-
-function commonjsRequire (target) {
-	throw new Error('Could not dynamically require "' + target + '". Please configure the dynamicRequireTargets option of @rollup/plugin-commonjs appropriately for this require call to behave properly.');
-}
-
-/*!
-  Copyright (c) 2017 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-var classnames = createCommonjsModule(function (module) {
-  /* global define */
-
-  (function () {
-
-    var hasOwn = {}.hasOwnProperty;
-    function classNames() {
-      var classes = [];
-      for (var i = 0; i < arguments.length; i++) {
-        var arg = arguments[i];
-        if (!arg) continue;
-        var argType = typeof arg;
-        if (argType === 'string' || argType === 'number') {
-          classes.push(arg);
-        } else if (Array.isArray(arg) && arg.length) {
-          var inner = classNames.apply(null, arg);
-          if (inner) {
-            classes.push(inner);
-          }
-        } else if (argType === 'object') {
-          for (var key in arg) {
-            if (hasOwn.call(arg, key) && arg[key]) {
-              classes.push(key);
-            }
-          }
-        }
-      }
-      return classes.join(' ');
-    }
-    if (module.exports) {
-      classNames.default = classNames;
-      module.exports = classNames;
-    } else {
-      window.classNames = classNames;
-    }
-  })();
-});
-
 function iconClass(iconset, name, spinning) {
   return Templates.current.iconClass(iconset || Templates.current.defaultIconset, name, spinning);
 }
@@ -161,7 +108,7 @@ FormControl.propTypes = {
   description: PropTypes.any
 };
 
-const _excluded = ["name", "label", "size", "onChange", "required", "value", "choices", "description", "placeholder", "prefix", "suffix", "multiple", "layout"];
+const _excluded$f = ["name", "label", "size", "onChange", "required", "value", "choices", "description", "placeholder", "prefix", "suffix", "multiple", "layout"];
 function Select(_ref) {
   let {
       name,
@@ -178,7 +125,7 @@ function Select(_ref) {
       multiple,
       layout
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   const ref = useRef();
   useEffect(() => {
     let instance;
@@ -288,7 +235,7 @@ function getPageNumbers({
   return range(1, totalPages);
 }
 
-const _excluded$1 = ["component", "children", "disabled", "active"];
+const _excluded$e = ["component", "children", "disabled", "active"];
 function PaginationButton(props) {
   const {
       component: Component = "button",
@@ -296,7 +243,7 @@ function PaginationButton(props) {
       disabled,
       active
     } = props,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded$e);
   return /*#__PURE__*/React.createElement(Component, _extends({}, otherProps, {
     "data-testid": "pagination-button",
     disabled: disabled,
@@ -317,6 +264,7 @@ function Pagination(props) {
     pageOptions,
     pageSize,
     setPageSize,
+    totalLength,
     i18n = f => f
   } = props;
   const pageNumbers = getPageNumbers({
@@ -375,8 +323,13 @@ function Pagination(props) {
   }), /*#__PURE__*/React.createElement("span", {
     className: "ml-3"
   }, i18n("items per page"))), pageOptions && /*#__PURE__*/React.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)));
+    className: "mb-3 mr-3 flex items-center"
+  }, /*#__PURE__*/React.createElement("span", null, i18n("Page"), "\xA0"), /*#__PURE__*/React.createElement("strong", null, pageIndex + 1, " of ", pageOptions.length), totalLength !== undefined && /*#__PURE__*/React.createElement("span", {
+    className: "ml-3"
+  }, i18n("Totals"), ": ", /*#__PURE__*/React.createElement("strong", null, new Intl.NumberFormat(undefined).format(totalLength)), " ", i18n("items"))), totalLength !== undefined && /*#__PURE__*/React.createElement("li", {
+    className: "mb-3 flex items-center",
+    "data-testid": "pagination-total-items"
+  }, i18n("Totals"), ": ", /*#__PURE__*/React.createElement("strong", null, new Intl.NumberFormat(undefined).format(totalLength)), " ", i18n("items")));
 }
 
 function DefaultArrowSort({
@@ -405,7 +358,7 @@ function DefaultCellHeader({
   }, column.render("Filter")) : null);
 }
 
-const _excluded$2 = ["onDrag", "onDrop", "index"];
+const _excluded$d = ["onDrag", "onDrop", "index"];
 const DND_ITEM_TYPE = "row";
 function useDndRow(_ref) {
   let {
@@ -413,7 +366,7 @@ function useDndRow(_ref) {
       onDrop,
       index
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   const dropRef = useRef(null);
   const dragRef = useRef(null);
   const [, drop] = useDrop({
@@ -503,7 +456,7 @@ function DefaultCells({
   }));
 }
 
-const _excluded$3 = ["onClick", "row", "enableDragNDrop", "onDrop", "onDrag"];
+const _excluded$c = ["onClick", "row", "enableDragNDrop", "onDrop", "onDrag"];
 function DefaultDndRow(props) {
   const {
     isDragging,
@@ -537,7 +490,7 @@ function DefaultRow(_ref) {
       onDrop,
       onDrag
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   const opts = _extends({}, props, {
     onClick: () => onClick(row.original, "row")
   }, row.getRowProps());
@@ -564,7 +517,7 @@ function callLast(fn, time) {
   };
 }
 
-const _excluded$4 = ["name", "value", "label", "onChange", "required", "size", "type", "prefix", "suffix", "description", "className", "placeholder"];
+const _excluded$b = ["name", "value", "label", "onChange", "required", "size", "type", "prefix", "suffix", "description", "className", "placeholder"];
 function InputText(_ref) {
   let {
       name,
@@ -580,7 +533,7 @@ function InputText(_ref) {
       className,
       placeholder
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   const [localValue, setValue] = useState(value);
   const change = useMemo(() => onChange && callLast(onChange, 300), [onChange]);
   useEffect(() => {
@@ -683,7 +636,7 @@ function DefaultOperationButton(props) {
   }, i18n(title)));
 }
 
-const _excluded$5 = ["OperationButton"];
+const _excluded$a = ["OperationButton"];
 function DefaultCellOperations({
   operations,
   row,
@@ -700,7 +653,7 @@ function DefaultCellOperations({
     let {
         OperationButton = DefaultOperationButton
       } = _ref,
-      operation = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      operation = _objectWithoutPropertiesLoose(_ref, _excluded$a);
     return /*#__PURE__*/React.createElement(OperationButton, _extends({
       key: operation.action
     }, operation, {
@@ -741,7 +694,7 @@ function useOperations({
   };
 }
 
-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"];
+const _excluded$9 = ["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);
@@ -791,7 +744,7 @@ function useCustomTable(props) {
       CellOperations,
       i18n = f => f
     } = props,
-    ctx = _objectWithoutPropertiesLoose(props, _excluded$6);
+    ctx = _objectWithoutPropertiesLoose(props, _excluded$9);
   const _onClick = getOperationCallback(operations, onClick);
   const defaultColumn = React.useMemo(() => ({
     // Let's set up our default Filter UI
@@ -852,12 +805,11 @@ function useCustomTable(props) {
       filterId
     });
   }, [onChange, pageIndex, pageSize, sortBy, filters, filterId]);
-  return _extends({}, props, {
+  return {
     className,
     tableInstance,
     CellHeader,
     isLoading,
-    onClick: _onClick,
     Loader,
     EmptyData,
     Row,
@@ -870,9 +822,11 @@ function useCustomTable(props) {
     setPageSize,
     i18n,
     children,
+    onClick: _onClick,
     onDrag: _onDrag,
-    onDrop: onDrop
-  });
+    onDrop: onDrop,
+    enableDragNDrop: props.enableDragNDrop
+  };
 }
 
 function Table(props) {
@@ -939,7 +893,7 @@ function Table(props) {
   }))) : null, children));
 }
 
-const _excluded$7 = ["disableFilters", "disablePagination", "availableActions", "onAddAction"];
+const _excluded$8 = ["disableFilters", "disablePagination", "availableActions", "onAddAction"];
 function ActionsTable(_ref) {
   let {
       disableFilters = true,
@@ -947,7 +901,7 @@ function ActionsTable(_ref) {
       availableActions = [],
       onAddAction = noop
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   const {
     i18n = f => f
   } = props;
@@ -1047,7 +1001,7 @@ function Card({
   }, children));
 }
 
-const _excluded$8 = ["src", "form", "options", "submission", "url"];
+const _excluded$7 = ["src", "form", "options", "submission", "url"];
 function useEvent(event, callback, events) {
   useEffect(() => {
     if (callback) {
@@ -1098,7 +1052,7 @@ function useForm(props) {
       submission,
       url
     } = props,
-    funcs = _objectWithoutPropertiesLoose(props, _excluded$8);
+    funcs = _objectWithoutPropertiesLoose(props, _excluded$7);
   const element = useRef();
   const isLoaded = useRef();
   const instance = useRef();
@@ -1575,13 +1529,13 @@ FormAccess.propTypes = {
   onSubmit: PropTypes.func
 };
 
-const _excluded$9 = ["action"],
+const _excluded$6 = ["action"],
   _excluded2 = ["actionInfo", "children", "onSubmit", "options"];
 function mapData(options, defaults) {
   return _extends({}, defaults, options);
 }
 function mapSettingsForm(_ref) {
-  let settingsForm = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+  let settingsForm = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   FormioUtils.eachComponent(settingsForm.components, component => {
     const resourceExclude = "";
     if (component.type === "resourcefields") {
@@ -1854,7 +1808,7 @@ FormEditCTAs.propTypes = {
   onReset: PropTypes.func
 };
 
-const _excluded$a = ["name", "value", "label", "onChange", "required", "description", "prefix", "suffix"];
+const _excluded$5 = ["name", "value", "label", "onChange", "required", "description", "prefix", "suffix"];
 function InputTags(_ref) {
   let {
       name,
@@ -1866,7 +1820,7 @@ function InputTags(_ref) {
       prefix,
       suffix
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   const ref = useRef();
   useEffect(() => {
     const instance = new Choices(ref.current, {
@@ -2363,6 +2317,17 @@ function SelectColumnFilter({
   });
 }
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn) {
+  var module = { exports: {} };
+	return fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire (target) {
+	throw new Error('Could not dynamically require "' + target + '". Please configure the dynamicRequireTargets option of @rollup/plugin-commonjs appropriately for this require call to behave properly.');
+}
+
 var moment = createCommonjsModule(function (module, exports) {
   (function (global, factory) {
     module.exports = factory() ;
@@ -6918,12 +6883,12 @@ function FormsCell(props) {
   }), tag)))));
 }
 
-const _excluded$b = ["Cell"];
+const _excluded$4 = ["Cell"];
 function FormsTable(_ref) {
   let {
       Cell
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   const {
     i18n = f => f,
     tags
@@ -6979,7 +6944,7 @@ Loader.propTypes = {
   className: PropTypes.string
 };
 
-const _excluded$c = ["show", "children", "closeModal", "onClose", "title", "footer", "style", "className"];
+const _excluded$3 = ["show", "children", "closeModal", "onClose", "title", "footer", "style", "className"];
 function useModal() {
   const [show, setShowModal] = useState(false);
   return {
@@ -7004,7 +6969,7 @@ function Modal(_ref) {
       style,
       className = ""
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   const titleRef = useRef();
   const footerRef = useRef();
   const [maxHeight, setMaxHeight] = useState();
@@ -7060,7 +7025,7 @@ function Modal(_ref) {
   })));
 }
 
-const _excluded$d = ["maxWidth", "children"];
+const _excluded$2 = ["maxWidth", "children"];
 function RemoveModalFooter({
   value,
   valueToCompare,
@@ -7093,9 +7058,9 @@ function RemoveModal(_ref) {
       maxWidth = "300px",
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   const {
-    i18n = noop
+    i18n = f => f
   } = props;
   const [value, setValue] = useState();
   return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
@@ -7124,13 +7089,18 @@ class ReactComponent extends Components.components.field {
    * @param component - The component definition created from the settings form.
    * @param options - Any options passed into the renderer.
    * @param data - The submission data where this component's data exists.
-   */
-  // eslint-disable-next-line no-useless-constructor,import/no-anonymous-default-export
+   */ // eslint-disable-next-line no-useless-constructor,import/no-anonymous-default-export
   constructor(component, options, data) {
     super(component, options, data);
     this.reactInstance = void 0;
     this.shouldSetValue = void 0;
     this.dataForSetting = void 0;
+    /**
+     * The user has changed the value in the component and the value needs to be updated on the main submission object and other components notified of a change event.
+     *
+     * @param value
+     * @param flags
+     */
     this.updateValue = (value, flags) => {
       flags = flags || {};
       const newValue = value === undefined || value === null ? this.getValue() : value;
@@ -7247,13 +7217,6 @@ class ReactComponent extends Components.components.field {
     }
     return false;
   }
-  /**
-   * The user has changed the value in the component and the value needs to be updated on the main submission object and other components notified of a change event.
-   *
-   * @param value
-   * @param flags
-   */
-
   /**
    * Get the current value of the component. Should return the value set in the react component.
    *
@@ -7326,12 +7289,12 @@ function mapFormToColumns(form) {
   return columns;
 }
 
-const _excluded$e = ["form"];
+const _excluded$1 = ["form"];
 function SubmissionsTable(_ref) {
   let {
       form
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   const columns = form && mapFormToColumns(form);
   return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
     columns: columns
@@ -7368,7 +7331,7 @@ function SliderColumnFilter({
   }, "Off"));
 }
 
-const _excluded$f = ["style", "current", "items", "children", "HeaderChildren", "AddButton", "Button", "className", "onClick", "i18n"];
+const _excluded = ["style", "current", "items", "children", "HeaderChildren", "AddButton", "Button", "className", "onClick", "i18n"];
 function ButtonTab({
   icon,
   back,
@@ -7407,7 +7370,7 @@ function Tabs(_ref) {
       onClick,
       i18n = f => f
     } = _ref,
-    additionalProps = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    additionalProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "tabs-comp",
     className: `tw-tabs ${className}`,
@@ -7454,5 +7417,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, getOperationCallback, iconClass, mapPagination, stopPropagationWrapper, useCustomTable, 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, LEFT_PAGE, Loader, Modal, Pagination, RIGHT_PAGE, ReactComponent, RemoveModal, Select, SelectColumnFilter, SliderColumnFilter, SubmissionsTable, Table, Tabs, callLast, defaultDisplayChoices, getOperationCallback, getPageNumbers, iconClass, mapFormToColumns, mapPagination, stopPropagationWrapper, swapElements, useCustomTable, useForm, useFormEdit, useModal, useOperations, useTooltip };
 //# sourceMappingURL=index.modern.js.map