@tsed/react-formio 1.10.6 → 1.10.10

package/dist/index.modern.js

@@ -1579,7 +1579,7 @@ function DefaultOperationButton(props) {
     title = "",
     i18n = f => f
   } = props;
-  return React.createElement("span", {
+  return React.createElement("button", {
     className: classnames(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), `btn-${buttonSize}`),
     onClick: stopPropagationWrapper(() => onClick(action))
   }, icon ? React.createElement(React.Fragment, null, React.createElement("i", {
@@ -1755,13 +1755,18 @@ function Table(props) {
     className: classnames("table-group table-responsive", className)
   }, React.createElement("table", Object.assign({
     className: "table table-striped table-hover"
-  }, tableInstance.getTableProps()), React.createElement("thead", null, tableInstance.headerGroups.map(headerGroup => React.createElement("tr", Object.assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(column => React.createElement("th", Object.assign({}, column.getHeaderProps()), React.createElement(CellHeader, {
+  }, tableInstance.getTableProps()), React.createElement("thead", null, tableInstance.headerGroups.map((headerGroup, i) => React.createElement("tr", Object.assign({
+    key: `tableInstance.headerGroups${i}`
+  }, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(column => React.createElement("th", Object.assign({
+    key: `tableInstance.headers.column.${column.id}`
+  }, column.getHeaderProps()), React.createElement(CellHeader, {
     column: column
-  })))))), !isLoading ? React.createElement("tbody", Object.assign({}, tableInstance.getTableBodyProps()), tableInstance.page.map((row, i) => {
+  })))))), !isLoading ? React.createElement("tbody", Object.assign({}, tableInstance.getTableBodyProps()), tableInstance.page.map(row => {
     tableInstance.prepareRow(row);
     return React.createElement("tr", Object.assign({
+      key: `tableInstance.page.${row.id}`,
       onClick: () => _onClick(row.original, "row")
-    }, row.getRowProps()), row.cells.map(cell => {
+    }, row.getRowProps()), row.cells.map((cell, i) => {
       const {
         hidden,
         colspan
@@ -1772,6 +1777,7 @@ function Table(props) {
       }
 
       return React.createElement("td", Object.assign({
+        key: `tableInstance.page.cells.${cell.value || "value"}.${i}`,
         colSpan: colspan
       }, cell.getCellProps()), cell.render("Cell"));
     }));
@@ -1897,11 +1903,10 @@ function Card({
   }, React.createElement("div", {
     className: "card-header "
   }, React.createElement("h4", {
-    className: "card-title",
-    role: "card-heading"
+    className: "card-title"
   }, label)), React.createElement("div", {
     className: "card-body",
-    role: "card-body"
+    role: "article"
   }, children));
 }
 
@@ -1994,6 +1999,16 @@ const useForm = props => {
       createWebForm(src, options);
     }
   }, [src]);
+  useEffect(() => {
+    if (form) {
+      createWebForm(form, options);
+    }
+
+    return () => {
+      isLoaded.current = false;
+      instance.current && instance.current.destroy(true);
+    };
+  }, []);
   useEffect(() => {
     props.onSubmit && events.current.set("onSubmit", props.onSubmit);
   }, [props.onSubmit, events]);
@@ -8343,7 +8358,7 @@ function FormsCell(props) {
     className: 'badge bg-light mr-1'
   }, React.createElement("i", {
     className: classnames(iconClass(undefined, "history"), "mr-1")
-  }), React.createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map((tag, index) => React.createElement("span", {
+  }), React.createElement("span", null, "Updated ", moment(form.modified).fromNow())), (form.tags || []).map((tag, index) => React.createElement("button", {
     key: index,
     className: 'badge badge-hover bg-secondary mr-1',
     onClick: stopPropagationWrapper(() => {
@@ -8446,6 +8461,7 @@ function Modal(_ref) {
   }
 
   return React.createElement("div", {
+    role: "dialog",
     className: `formio-dialog formio-dialog-theme-default ${className}`
   }, React.createElement("div", {
     className: 'formio-dialog-overlay',
@@ -8485,7 +8501,7 @@ function RemoveModalFooter({
   valueToCompare,
   onSubmit,
   onClose,
-  i18n = noop
+  i18n = f => f
 }) {
   return React.createElement("div", {
     className: "flex items-center justify-center bg-white p-2"
@@ -8507,16 +8523,23 @@ function RemoveModalFooter({
   }), i18n("Remove")));
 }
 
-function RemoveModal(props) {
+function RemoveModal(_ref) {
   var _props$itemType, _props$itemType2;
 
+  let {
+    maxWidth = "300px",
+    children
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["maxWidth", "children"]);
+
   const {
     i18n = noop
   } = props;
   const [value, setValue] = useState();
   return React.createElement(Modal, Object.assign({}, props, {
+    className: classnames(props.className, "formio-dialog-theme-remove"),
     style: {
-      maxWidth: "300px"
+      maxWidth
     },
     title: `Drop ${(_props$itemType = props.itemType) == null ? void 0 : _props$itemType.toLowerCase()}`,
     value: value,
@@ -8525,7 +8548,7 @@ function RemoveModal(props) {
     className: "px-4 pt-3 pb-5"
   }, React.createElement("div", {
     className: "pb-1"
-  }, i18n("To drop"), " ", React.createElement("strong", null, props.valueToCompare), ",\u00A0", i18n("type the"), "\u00A0", React.createElement("strong", null, "\"", (_props$itemType2 = props.itemType) == null ? void 0 : _props$itemType2.toLowerCase(), "\""), "\u00A0", i18n("name"), " ", React.createElement("strong", null, "\"", props.valueToCompare, "\""), "."), React.createElement(InputText, {
+  }, children, i18n("To drop"), " ", React.createElement("strong", null, props.valueToCompare), ",\u00A0", i18n("type the"), "\u00A0", React.createElement("strong", null, "\"", (_props$itemType2 = props.itemType) == null ? void 0 : _props$itemType2.toLowerCase(), "\""), "\u00A0", i18n("name"), " ", React.createElement("strong", null, "\"", props.valueToCompare, "\""), "."), React.createElement(InputText, {
     name: 'remove',
     value: value,
     onChange: (name, value) => setValue(value)
@@ -21766,6 +21789,7 @@ class ReactComponent extends Components$1.components.field {
 
 
   attachReact(element) {
+    // eslint-disable-next-line react/no-render-return-value
     return reactDom.render(this.renderReact(), element);
   }
   /**
@@ -21842,7 +21866,7 @@ class ReactComponent extends Components$1.components.field {
 
 }
 
-function Cell({
+function DefaultCell({
   value,
   render = f => f
 }) {
@@ -21871,7 +21895,7 @@ function mapFormToColumns(form) {
       const column = {
         Header: component.label || component.title || component.key,
         accessor: `data.${component.key}`,
-        Cell: props => React.createElement(Cell, Object.assign({}, props, {
+        Cell: props => React.createElement(DefaultCell, Object.assign({}, props, {
           render: value => cmp.asString(value)
         }))
       };
@@ -22020,5 +22044,5 @@ Loader.propTypes = {
   className: PropTypes.string
 };
 
-export { ACTION, ACTIONS, ACTION_INFO, AUTH, ActionsTable, Alert, ButtonTab, Card, Cell, DefaultArrowSort, 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, actionInfoReducer, actionReducer, actionsReducer, authReducer, checkRoleFormAccess, clearActionError, clearFormError, clearSubmissionError, createInitialState$7 as createInitialState, defaultDisplayChoices, defaultFormioReducer, deleteAction, deleteForm, deleteSubmission, failAction, failActionInfo, failActions, failForm, failForms, failSubmission, failSubmissions, failUser, formAccessUser, formReducer, formsReducer, getAccess, getAction, getActionInfo, getActionUrl, getActions, getForm, getFormUrl, getForms, getProjectAccess, getSubmission, getSubmissionUrl, getSubmissions, hasRole, hasRoles, iconClass, initAuth, isAuthorized, logout, logoutUser, oneOfIsActive, projectAccessUser, receiveAction, receiveActionInfo, receiveActions, receiveForm, receiveForms, receiveSubmission, receiveSubmissions, receiveUser, refreshForms, refreshSubmissions, requestAction, requestActionInfo, requestActions, requestForm, requestForms, requestSubmission, requestSubmissions, requestUser, resetAction, resetActionInfo, resetActions, resetForm, resetForms, resetSubmission, resetSubmissions, saveAction, saveForm, saveSubmission, selectAction, selectActionInfo, selectActions, selectAuth, selectAvailableActions, selectError, selectForm, selectForms, selectFormsParameters, selectIsActive, selectIsAuthenticated, selectRoles, selectRoot, selectSubmission, selectSubmissions, selectSubmissionsParameters, selectUser, sendAction, sendForm, sendSubmission, setUser, submissionAccessUser, submissionReducer, submissionsReducer, useModal, useOperations, useTooltip, userForms, userRoles };
+export { ACTION, ACTIONS, ACTION_INFO, AUTH, 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, actionInfoReducer, actionReducer, actionsReducer, authReducer, checkRoleFormAccess, clearActionError, clearFormError, clearSubmissionError, createInitialState$7 as createInitialState, defaultDisplayChoices, defaultFormioReducer, deleteAction, deleteForm, deleteSubmission, failAction, failActionInfo, failActions, failForm, failForms, failSubmission, failSubmissions, failUser, formAccessUser, formReducer, formsReducer, getAccess, getAction, getActionInfo, getActionUrl, getActions, getForm, getFormUrl, getForms, getProjectAccess, getSubmission, getSubmissionUrl, getSubmissions, hasRole, hasRoles, iconClass, initAuth, isAuthorized, logout, logoutUser, oneOfIsActive, projectAccessUser, receiveAction, receiveActionInfo, receiveActions, receiveForm, receiveForms, receiveSubmission, receiveSubmissions, receiveUser, refreshForms, refreshSubmissions, requestAction, requestActionInfo, requestActions, requestForm, requestForms, requestSubmission, requestSubmissions, requestUser, resetAction, resetActionInfo, resetActions, resetForm, resetForms, resetSubmission, resetSubmissions, saveAction, saveForm, saveSubmission, selectAction, selectActionInfo, selectActions, selectAuth, selectAvailableActions, selectError, selectForm, selectForms, selectFormsParameters, selectIsActive, selectIsAuthenticated, selectRoles, selectRoot, selectSubmission, selectSubmissions, selectSubmissionsParameters, selectUser, sendAction, sendForm, sendSubmission, setUser, submissionAccessUser, submissionReducer, submissionsReducer, useModal, useOperations, useTooltip, userForms, userRoles };
 //# sourceMappingURL=index.modern.js.map