@abgov/jsonforms-components 1.9.0 → 1.10.1

package/index.esm.js

@@ -4,11 +4,9 @@ import { GoACallout, GoAInputDate, GoAFormItem, GoAInput, GoATextArea, GoAInputD
 import styled from 'styled-components';
 import { rankWith, uiTypeIs, isDateControl, isStringControl, and, optionIs, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, isDescriptionHidden, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, withIncreasedRank, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
 import { withJsonFormsRendererProps, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, withJsonFormsLayoutProps, JsonFormsDispatch, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
-import React, { createContext, useEffect, useState, useMemo, useContext, useCallback } from 'react';
+import React, { createContext, useEffect, useContext, useState, useMemo, useCallback } from 'react';
 import merge from 'lodash/merge';
 import axios from 'axios';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
 import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
 import Ajv from 'ajv';
@@ -3279,14 +3277,16 @@ function addDataByOptions(key, url, location, type, values) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const enumValues = new Map();
 const enumFunctions = new Map();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const enumSubmitFunctions = new Map();
 const baseEnumerator = {
   data: enumValues,
-  functions: enumFunctions
+  functions: enumFunctions,
+  submitFunction: enumSubmitFunctions
 };
 const JsonFormContext = /*#__PURE__*/createContext(baseEnumerator);
 function ContextProvider(props) {
   var _a;
-  React.useContext(JsonFormContext);
   if (props.fileManagement) {
     const {
       fileList,
@@ -3303,6 +3303,13 @@ function ContextProvider(props) {
     enumFunctions.set('download-file', () => downloadFileFunction);
     enumFunctions.set('delete-file', () => deleteFileFunction);
   }
+  if (props.submit) {
+    const {
+      submitForm
+    } = props.submit;
+    const submitFunction = submitForm ? submitForm : () => {};
+    enumSubmitFunctions.set('submit-form', () => submitFunction);
+  }
   if (props.data) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (_a = props.data) === null || _a === void 0 ? void 0 : _a.forEach(item => {
@@ -3409,13 +3416,14 @@ const GoAEnumControlTester = rankWith(2, isEnumControl);
 const GoAEnumControl = withJsonFormsEnumProps(withTranslateProps(numControl), true);
 
 const EnumSelectAutoComplete = props => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   const {
     data,
     schema,
     path,
     handleChange,
-    uischema
+    uischema,
+    label
   } = props;
   let enumData = (schema === null || schema === void 0 ? void 0 : schema.enum) || [];
   const dataKey = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.enumContext) === null || _b === void 0 ? void 0 : _b.key;
@@ -3423,11 +3431,6 @@ const EnumSelectAutoComplete = props => {
   const location = (_f = (_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.enumContext) === null || _f === void 0 ? void 0 : _f.location;
   const type = (_h = (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.enumContext) === null || _h === void 0 ? void 0 : _h.type;
   const values = (_k = (_j = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _j === void 0 ? void 0 : _j.enumContext) === null || _k === void 0 ? void 0 : _k.values;
-  const defaultProps = {
-    options: enumData,
-    getOptionLabel: option => option
-  };
-  const [inputValue, setInputValue] = React.useState('');
   useEffect(() => {
     if (dataKey && url) {
       addDataByOptions(dataKey, url, location, type, values);
@@ -3437,25 +3440,34 @@ const EnumSelectAutoComplete = props => {
     const newData = getData(dataKey);
     // eslint-disable-next-line
     enumData = newData;
-    defaultProps.options = enumData;
   }
-  return jsx(Autocomplete, Object.assign({}, defaultProps, {
-    id: "autocomplete",
-    getOptionLabel: option => option,
-    isOptionEqualToValue: (option, value) => option.id === value.id,
-    value: data || null,
-    onChange: (name, value) => {
-      handleChange(path, value);
-      setInputValue(value);
-    },
-    renderInput: params => {
-      return jsx(TextField, Object.assign({}, params, {
-        variant: "outlined",
-        size: "small",
-        placeholder: schema === null || schema === void 0 ? void 0 : schema.description
-      }));
-    }
-  }));
+  const readOnly = (_o = (_m = (_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps) === null || _m === void 0 ? void 0 : _m.readOnly) !== null && _o !== void 0 ? _o : false;
+  return jsx("div", {
+    children: readOnly ? jsx("div", {
+      children: jsx(GoADropdown, {
+        disabled: true,
+        placeholder: data,
+        onChange: () => {}
+      })
+    }) : jsx(GoADropdown, {
+      value: data,
+      onChange: (name, value) => {
+        handleChange(path, value);
+      },
+      testId: `autocomplete-dropdown-${label}`,
+      id: `autocomplete-dropdown-${label}`,
+      width: "100%",
+      filterable: true,
+      relative: true,
+      ariaLabel: label,
+      children: enumData === null || enumData === void 0 ? void 0 : enumData.map(item => {
+        return jsx(GoADropdownItem, {
+          value: item,
+          label: item
+        }, `autocomplete-${item}`);
+      })
+    })
+  });
 };
 const numControlAutoComplete = props => {
   return jsx(GoAInputBaseControl, Object.assign({}, props, {
@@ -3622,6 +3634,38 @@ const BooleanRadioControl = props => jsx(GoAInputBaseControl, Object.assign({},
 const GoABooleanRadioControlTester = rankWith(3, and(isBooleanControl, optionIs('radio', true)));
 const GoABooleanRadioControl = withJsonFormsControlProps(BooleanRadioControl);
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 let _$5 = t => t,
   _t$5,
   _t2$3;
@@ -3676,7 +3720,7 @@ const GridItem = styled.div(_t2$3 || (_t2$3 = _$5`
 let _$4 = t => t,
   _t$4,
   _t2$2,
-  _t3$1,
+  _t3$2,
   _t4$1,
   _t5,
   _t6,
@@ -3699,7 +3743,7 @@ const ReviewItemSection = styled.div(_t2$2 || (_t2$2 = _$4`
   border: 1px solid #dcdcdc;
   border-radius: 5px;
 `));
-const ReviewItemHeader = styled.div(_t3$1 || (_t3$1 = _$4`
+const ReviewItemHeader = styled.div(_t3$2 || (_t3$2 = _$4`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3865,20 +3909,26 @@ requiredFields) => elements.map((element, index) => {
   return null;
 });
 
-const FormStepper = ({
-  uischema,
-  data,
-  schema,
-  // eslint-disable-next-line
-  ajv,
-  path,
-  cells,
-  renderers,
-  config,
-  visible,
-  enabled,
-  t
-}) => {
+const FormStepper = _a => {
+  var _b, _c, _d;
+  var {
+      uischema,
+      data,
+      schema,
+      // eslint-disable-next-line
+      ajv,
+      path,
+      cells,
+      renderers,
+      config,
+      visible,
+      enabled,
+      t
+    } = _a;
+    __rest(_a, ["uischema", "data", "schema", "ajv", "path", "cells", "renderers", "config", "visible", "enabled", "t"]);
+  const enumerators = useContext(JsonFormContext);
+  const submitFormFunction = enumerators.submitFunction.get('submit-form');
+  const submitForm = submitFormFunction && submitFormFunction();
   const categorization = uischema;
   const rawCategories = JSON.parse(JSON.stringify(categorization));
   const [step, setStep] = useState(1);
@@ -3892,8 +3942,11 @@ const FormStepper = ({
   }, [categorization, data, ajv]);
   const disabledCategoryMap = categories.map(c => !isEnabled(c, data, '', ajv));
   const handleSubmit = () => {
-    setIsOpen(true);
-    console.log('submitted', data);
+    if (submitForm) {
+      submitForm(data);
+    } else {
+      setIsOpen(true);
+    }
   };
   const onSubmit = () => {
     setIsOpen(false);
@@ -3904,14 +3957,23 @@ const FormStepper = ({
   }, [categories, t]);
   useEffect(() => {}, [categories.length]);
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const vslidateFormData = formData => {
-    const validate = ajv.compile(schema);
+  const validateFormData = formData => {
+    const newSchema = JSON.parse(JSON.stringify(schema));
+    Object.keys(newSchema.properties || {}).forEach(propertyName => {
+      var _a;
+      const property = newSchema.properties || {};
+      property[propertyName].enum = getData(propertyName);
+      if (((_a = property[propertyName]) === null || _a === void 0 ? void 0 : _a.format) === 'file-urn') {
+        delete property[propertyName].format;
+      }
+    });
+    const validate = ajv.compile(newSchema);
     return validate(formData);
   };
   useEffect(() => {
-    const valid = vslidateFormData(data);
+    const valid = validateFormData(data);
     setIsFormValid(valid);
-  }, [data, vslidateFormData]);
+  }, [data, validateFormData]);
   if ((categories === null || categories === void 0 ? void 0 : categories.length) < 1) {
     // eslint-disable-next-line
     return jsx(Fragment, {});
@@ -3987,102 +4049,114 @@ const FormStepper = ({
       })
     );
   };
-  const handleEdit = index => {
+  const changePage = index => {
     setPage(index + 1);
   };
-  return jsx(Visible, {
-    visible: visible,
-    children: jsxs("div", {
-      id: `${path || `goa`}-form-stepper`,
-      className: "formStepper",
-      children: [jsxs(GoAFormStepper, {
-        testId: "form-stepper-test",
-        step: step,
-        onChange: step => {
-          setTab(step);
-        },
-        children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
-          return jsx(GoAFormStep, {
-            text: `${CategoryLabels[index]}`,
-            status: 'incomplete'
-          }, `${CategoryLabels[index]}-tab`);
-        }), jsx(GoAFormStep, {
-          text: "Review",
-          status: "incomplete"
-        })]
-      }), jsxs(GoAPages, {
-        current: step,
-        mb: "xl",
-        children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
-          return jsx("div", {
-            "data-testid": `step_${index}-content`,
-            children: renderStepElements(category, index)
-          }, `${CategoryLabels[index]}`);
-        }), jsxs("div", {
-          children: [jsx("h3", {
-            style: {
-              flex: 1
-            },
-            children: "Summary"
-          }), jsx(ReviewItem, {
-            children: categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
-              const categoryLabel = category.label || category.i18n || 'Unknown Category';
-              const requiredFields = getAllRequiredFields(schema);
-              return jsxs(ReviewItemSection, {
-                children: [jsxs(ReviewItemHeader, {
-                  children: [jsx(ReviewItemTitle, {
-                    children: categoryLabel
-                  }), jsx(Anchor, {
-                    onClick: () => handleEdit(index),
-                    children: "Edit"
+  const readOnly = (_d = (_c = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.componentProps) === null || _c === void 0 ? void 0 : _c.readOnly) !== null && _d !== void 0 ? _d : false;
+  return jsx("div", {
+    "data-testid": "form-stepper-test-wrapper",
+    children: jsx(Visible, {
+      visible: visible,
+      children: jsxs("div", {
+        id: `${path || `goa`}-form-stepper`,
+        className: "formStepper",
+        children: [jsxs(GoAFormStepper, {
+          testId: "form-stepper-test",
+          step: step,
+          onChange: step => {
+            setTab(step);
+          },
+          children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
+            return jsx(GoAFormStep, {
+              text: `${CategoryLabels[index]}`,
+              status: 'incomplete'
+            }, `${CategoryLabels[index]}-tab`);
+          }), jsx(GoAFormStep, {
+            text: "Review",
+            status: "incomplete"
+          })]
+        }), jsxs(GoAPages, {
+          current: step,
+          mb: "xl",
+          children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
+            return jsx("div", {
+              "data-testid": `step_${index}-content`,
+              style: {
+                marginTop: '1.5rem'
+              },
+              children: renderStepElements(category, index)
+            }, `${CategoryLabels[index]}`);
+          }), jsxs("div", {
+            children: [jsx("h3", {
+              style: {
+                flex: 1,
+                marginBottom: '1rem'
+              },
+              children: "Summary"
+            }), jsx(ReviewItem, {
+              children: categories.map((category, index) => {
+                const categoryLabel = category.label || category.i18n || 'Unknown Category';
+                const requiredFields = getAllRequiredFields(schema);
+                return jsxs(ReviewItemSection, {
+                  children: [jsxs(ReviewItemHeader, {
+                    children: [jsx(ReviewItemTitle, {
+                      children: categoryLabel
+                    }), jsx(Anchor, {
+                      onClick: () => changePage(index),
+                      children: readOnly ? 'View' : 'Edit'
+                    })]
+                  }), jsx(Grid, {
+                    children: renderFormFields(category.elements, data, requiredFields)
                   })]
-                }), jsx(Grid, {
-                  children: renderFormFields(category.elements, data, requiredFields)
-                })]
-              }, index);
-            })
+                }, index);
+              })
+            })]
           })]
-        })]
-      }), step && step !== 0 && jsxs(GoAGrid, {
-        minChildWidth: "100px",
-        children: [jsx("div", {
-          children: step !== 1 && jsx(GoAButton, {
-            type: "secondary",
-            disabled: disabledCategoryMap[step - 1] || !enabled,
-            onClick: () => prevPage(step, disabledCategoryMap),
-            children: "Previous"
-          })
-        }), jsxs(RightAlignmentDiv, {
-          children: [step !== null && showNextBtn && jsx(GoAButton, {
-            type: "primary",
-            disabled: disabledCategoryMap[step - 1] || !enabled,
-            onClick: () => nextPage(step, disabledCategoryMap),
-            children: "Next"
-          }), !showNextBtn && jsx(GoAButton, {
-            type: "primary",
-            onClick: handleSubmit,
-            disabled: !isFormValid || !enabled,
-            children: "Submit"
+        }), step && step !== 0 && jsxs(GoAGrid, {
+          minChildWidth: "100px",
+          children: [jsx("div", {
+            children: step !== 1 ? jsx(GoAButton, {
+              type: "secondary",
+              disabled: disabledCategoryMap[step - 1] || !enabled,
+              onClick: () => prevPage(step, disabledCategoryMap),
+              children: "Previous"
+            }) : jsx("div", {})
+          }), jsxs(RightAlignmentDiv, {
+            children: [step !== null && showNextBtn && jsx(GoAButton, {
+              type: "primary",
+              disabled: disabledCategoryMap[step - 1] || !enabled,
+              onClick: () => nextPage(step, disabledCategoryMap),
+              children: "Next"
+            }), !showNextBtn && jsx("div", {
+              children: jsx(GoAButton, {
+                type: "primary",
+                onClick: handleSubmit,
+                disabled: !isFormValid || !enabled,
+                children: "Submit"
+              })
+            })]
           })]
-        })]
-      }), jsxs(GoAModal, {
-        testId: "submit-confirmation",
-        open: isOpen,
-        heading: 'Form Submitted',
-        width: "640px",
-        actions: jsx(GoAButtonGroup, {
-          alignment: "end",
-          children: jsx(GoAButton, {
-            type: "primary",
-            testId: "submit-form",
-            onClick: onSubmit,
-            children: "Close"
+        }), jsx(GoAModal, {
+          testId: "submit-confirmation",
+          open: isOpen,
+          heading: 'Form Submitted',
+          width: "640px",
+          actions: jsxs(GoAButtonGroup, {
+            alignment: "end",
+            children: [jsx(GoAButton, {
+              type: "primary",
+              testId: "submit-form",
+              onClick: onSubmit,
+              children: "Close"
+            }), !showNextBtn && jsx(GoAButton, {
+              type: "primary",
+              onClick: handleSubmit,
+              disabled: !isFormValid || !enabled,
+              children: "Submit"
+            })]
           })
-        }),
-        children: [jsx("b", {
-          children: "Submit is a test for preview purposes "
-        }), "(i.e. no actual form is being submitted)"]
-      })]
+        })]
+      })
     })
   });
 };
@@ -4105,38 +4179,6 @@ const categoriesAreValid = uischema => {
 };
 const CategorizationRendererTester = rankWith(2, and(uiTypeIs('Categorization'), categoriesAreValid, optionIs('variant', 'stepper')));
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 let _$3 = t => t,
   _t$3;
 const GoAContextMenuIcon = props => {
@@ -4198,11 +4240,12 @@ const DeleteFileModal = ({
 
 let _$2 = t => t,
   _t$2,
-  _t2$1;
+  _t2$1,
+  _t3$1;
 const DELAY_UPLOAD_TIMEOUT_MS = 200;
 const DELAY_DELETE_TIMEOUT_MS = 80;
 const FileUploader = _a => {
-  var _b;
+  var _b, _c, _d, _e;
   var {
       data,
       path,
@@ -4266,6 +4309,7 @@ const FileUploader = _a => {
     const timeoutId = setTimeout(delayedFunction, 1);
     return () => clearTimeout(timeoutId);
   }, [handleChange, fileList, propertyId]);
+  const readOnly = (_e = (_d = (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.componentProps) === null || _d === void 0 ? void 0 : _d.readOnly) !== null && _e !== void 0 ? _e : false;
   return jsxs(FileUploaderStyle, {
     id: "file-upload",
     className: "FileUploader",
@@ -4275,7 +4319,7 @@ const FileUploader = _a => {
     }) : jsx("div", {
       className: "label",
       children: props.label
-    }), jsx("div", {
+    }), !readOnly && jsx("div", {
       className: "file-upload",
       children: jsx(GoAFileUploadInput, {
         variant: variant,
@@ -4293,43 +4337,61 @@ const FileUploader = _a => {
           })
         })
       }) : jsx("div", {
-        children: fileList && getFile() && jsxs(AttachmentBorder, {
-          children: [jsx("div", {
-            children: getFileName()
-          }), jsxs(GoAContextMenu, {
-            children: [jsx(GoAContextMenuIcon, {
+        children: fileList && getFile() && jsx("div", {
+          children: readOnly ? jsxs(AttachmentBorderDisabled, {
+            children: [getFileName(), ' ', jsx(GoAContextMenuIcon, {
               testId: "download-icon",
               title: "Download",
               type: "download",
               onClick: () => downloadFile(getFile())
-            }), jsx(GoAContextMenuIcon, {
-              "data-testid": "delete-icon",
-              title: "Delete",
-              type: "trash",
-              onClick: () => {
-                setShowFileDeleteConfirmation(true);
+            })]
+          }) : jsxs(AttachmentBorder, {
+            children: [jsx("div", {
+              children: getFileName()
+            }), jsxs(GoAContextMenu, {
+              children: [jsx(GoAContextMenuIcon, {
+                testId: "download-icon",
+                title: "Download",
+                type: "download",
+                onClick: () => downloadFile(getFile())
+              }), jsx(GoAContextMenuIcon, {
+                "data-testid": "delete-icon",
+                title: "Delete",
+                type: "trash",
+                onClick: () => {
+                  setShowFileDeleteConfirmation(true);
+                }
+              })]
+            }), jsx(DeleteFileModal, {
+              isOpen: showFileDeleteConfirmation,
+              title: "Delete file",
+              content: `Delete file ${getFile().filename} ?`,
+              onCancel: () => setShowFileDeleteConfirmation(false),
+              onDelete: () => {
+                setShowFileDeleteConfirmation(false);
+                deleteFile(getFile());
+                const handleFunction = () => {
+                  handleChange(propertyId, '');
+                };
+                setTimeout(handleFunction, DELAY_DELETE_TIMEOUT_MS);
               }
             })]
-          }), jsx(DeleteFileModal, {
-            isOpen: showFileDeleteConfirmation,
-            title: "Delete file",
-            content: `Delete file ${getFile().filename} ?`,
-            onCancel: () => setShowFileDeleteConfirmation(false),
-            onDelete: () => {
-              setShowFileDeleteConfirmation(false);
-              deleteFile(getFile());
-              const handleFunction = () => {
-                handleChange(propertyId, '');
-              };
-              setTimeout(handleFunction, DELAY_DELETE_TIMEOUT_MS);
-            }
-          })]
+          })
         })
       })
     })]
   });
 };
-const AttachmentBorder = styled.div(_t$2 || (_t$2 = _$2`
+const AttachmentBorderDisabled = styled.div(_t$2 || (_t$2 = _$2`
+  display: flex;
+  flex-direction: row;
+  border: var(--goa-border-width-s) solid #dcdcdc;
+  border-radius: var(--goa-border-radius-m);
+  padding: var(--goa-space-xs);
+  width: fit-content;
+  background-color: #f1f1f1;
+`));
+const AttachmentBorder = styled.div(_t2$1 || (_t2$1 = _$2`
   display: flex;
   flex-direction: row;
   border: var(--goa-border-width-s) solid #dcdcdc;
@@ -4338,7 +4400,7 @@ const AttachmentBorder = styled.div(_t$2 || (_t$2 = _$2`
   width: fit-content;
   margin-top: var(--goa-space-2xs);
 `));
-const FileUploaderStyle = styled.div(_t2$1 || (_t2$1 = _$2`
+const FileUploaderStyle = styled.div(_t3$1 || (_t3$1 = _$2`
   .label {
     display: block;
     font-weight: var(--goa-font-weight-bold);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.9.0",
+  "version": "1.10.1",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Context/index.d.ts

@@ -10,14 +10,19 @@ interface FileManagement {
     downloadFile?: (file: File) => void;
     deleteFile?: (file: File) => void;
 }
+interface SubmitManagement {
+    submitForm?: (any: any) => void;
+}
 type Props = {
     children?: React.ReactNode;
     fileManagement?: FileManagement;
+    submit?: SubmitManagement;
     data?: any;
 };
 export declare const JsonFormContext: React.Context<{
     data: Map<string, () => Record<string, any> | string[]>;
     functions: Map<string, () => (file: File, propertyId: string) => void>;
+    submitFunction: Map<string, () => (data: any) => void>;
 }>;
 export declare function ContextProvider(props: Props): JSX.Element | null;
 /**

package/src/lib/Controls/FormStepper/FormStepperControl.d.ts

@@ -5,7 +5,7 @@ import { AjvProps } from '@jsonforms/material-renderers';
 export interface CategorizationStepperLayoutRendererProps extends StatePropsOfLayout, AjvProps, TranslateProps {
     data: any;
 }
-export declare const FormStepper: ({ uischema, data, schema, ajv, path, cells, renderers, config, visible, enabled, t, }: CategorizationStepperLayoutRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormStepper: ({ uischema, data, schema, ajv, path, cells, renderers, config, visible, enabled, t, ...props }: CategorizationStepperLayoutRendererProps) => import("react/jsx-runtime").JSX.Element;
 export declare const flattenObject: (obj: Record<string, string>) => Record<string, string>;
 export declare const FormStepperControl: (props: CategorizationStepperLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => React.JSX.Element;
 export default FormStepper;