@abgov/jsonforms-components 1.6.0 → 1.8.0

package/index.esm.js

@@ -1,6 +1,6 @@
 import { withAjvProps, materialSliderControlTester, MaterialSliderControl, materialObjectControlTester, MaterialObjectRenderer, materialAllOfControlTester, MaterialAllOfRenderer, materialAnyOfControlTester, MaterialAnyOfRenderer, materialOneOfControlTester, MaterialOneOfRenderer, materialOneOfRadioGroupControlTester, MaterialOneOfRadioGroupControl, materialOneOfEnumControlTester, MaterialOneOfEnumControl, materialHorizontalLayoutTester, materialVerticalLayoutTester, materialArrayLayoutTester, MaterialArrayLayout, materialAnyOfStringOrEnumControlTester, MaterialAnyOfStringOrEnumControl, materialEnumArrayRendererTester, MaterialEnumArrayRenderer, materialBooleanCellTester, MaterialBooleanCell, materialBooleanToggleCellTester, MaterialBooleanToggleCell, materialEnumCellTester, MaterialEnumCell, materialOneOfEnumCellTester, MaterialOneOfEnumCell } from '@jsonforms/material-renderers';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { GoAFormItem, GoACallout, GoAInputDate, GoAInput, GoATextArea, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAGrid, GoAContainer, GoADetails } from '@abgov/react-components';
+import { GoAFormItem, GoACallout, GoAInputDate, GoAInput, GoATextArea, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAFormStepper, GoAFormStep, GoAPages, GoAGrid, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADetails } from '@abgov/react-components';
 import { Hidden, Typography, FormHelperText } from '@mui/material';
 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';
@@ -12,6 +12,7 @@ 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';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -3669,7 +3670,8 @@ let _$4 = t => t,
   _t6,
   _t7,
   _t8,
-  _t9;
+  _t9,
+  _t10;
 const ReviewItem = styled.div(_t$4 || (_t$4 = _$4`
   display: flex;
   flex-direction: column;
@@ -3715,6 +3717,10 @@ const ListWithDetail = styled.div(_t8 || (_t8 = _$4`
 const ListWithDetailHeading = styled.h3(_t9 || (_t9 = _$4`
   text-transform: capitalize;
 `));
+const RightAlignmentDiv = styled.div(_t10 || (_t10 = _$4`
+  margin-left: auto;
+  margin-right: 0;
+`));
 
 const getAllRequiredFields = schema => {
   const requiredFields = [];
@@ -3813,7 +3819,7 @@ requiredFields) => elements.map((element, index) => {
   const clonedElement = JSON.parse(JSON.stringify(element));
   const lastSegment = (_a = clonedElement.scope) === null || _a === void 0 ? void 0 : _a.split('/').pop();
   if (clonedElement.type === 'Control' && clonedElement.scope) {
-    const label = resolveLabelFromScope(clonedElement.scope);
+    const label = clonedElement.label ? clonedElement.label : resolveLabelFromScope(clonedElement.scope);
     if (!label) return null;
     const value = getFormFieldValue(clonedElement.scope, data ? data : {}).toString();
     const asterisk = requiredFields.indexOf(lastSegment) !== -1 ? ' *' : '';
@@ -4025,28 +4031,27 @@ const FormStepper = ({
             })
           })]
         })]
-      }), step && step !== 0 && jsxs("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        },
-        children: [step !== 1 ? jsx(GoAButton, {
-          type: "secondary",
-          disabled: disabledCategoryMap[step - 1] || !enabled,
-          onClick: () => prevPage(step, disabledCategoryMap),
-          children: "Previous"
-        }) : jsx("div", {}), step !== null && showNextBtn && jsx(GoAButton, {
-          type: "primary",
-          disabled: disabledCategoryMap[step - 1] || !enabled,
-          onClick: () => nextPage(step, disabledCategoryMap),
-          children: "Next"
-        }), !showNextBtn && jsx("div", {
-          children: jsx(GoAButton, {
+      }), 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"
-          })
+          })]
         })]
       }), jsxs(GoAModal, {
         testId: "submit-confirmation",
@@ -4148,6 +4153,37 @@ const GoAContextMenu = styled.div(_t$3 || (_t$3 = _$3`
   }
 `));
 
+const DeleteFileModal = ({
+  isOpen,
+  title,
+  content,
+  onDelete,
+  onCancel
+}) => {
+  return jsx(GoAModal, {
+    testId: "delete-confirmation",
+    open: isOpen,
+    heading: title,
+    width: "640px",
+    actions: jsxs(GoAButtonGroup, {
+      alignment: "end",
+      children: [jsx(GoAButton, {
+        type: "secondary",
+        testId: "delete-cancel",
+        onClick: onCancel,
+        children: "Cancel"
+      }), jsx(GoAButton, {
+        type: "primary",
+        variant: "destructive",
+        testId: "delete-confirm",
+        onClick: onDelete,
+        children: "Delete"
+      })]
+    }),
+    children: content
+  });
+};
+
 let _$2 = t => t,
   _t$2,
   _t2$1;
@@ -4177,10 +4213,15 @@ const FileUploader = _a => {
   } = props;
   const propertyId = i18nKeyPrefix;
   const variant = ((_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.variant) || 'button';
+  const [showFileDeleteConfirmation, setShowFileDeleteConfirmation] = useState(false);
   function uploadFile(file) {
     if (uploadTrigger) {
-      handleChange(propertyId, ['Loading', Array.isArray(data) ? data[1] : data, file === null || file === void 0 ? void 0 : file.name]);
       uploadTrigger(file, propertyId);
+      const handleFunction = () => {
+        const value = ['Loading', Array.isArray(data) ? data[1] : file === null || file === void 0 ? void 0 : file.name];
+        handleChange(propertyId, value);
+      };
+      setTimeout(handleFunction, 1);
     }
   }
   function downloadFile(file) {
@@ -4193,18 +4234,24 @@ const FileUploader = _a => {
       deleteTrigger(file, propertyId);
     }
   }
+  function getFileName() {
+    return fileList && fileList[props.i18nKeyPrefix].filename;
+  }
+  function getFile() {
+    return fileList && fileList[props.i18nKeyPrefix];
+  }
   useEffect(() => {
     // UseEffect is required because not having it causes a react update error, but
     // it doesn't function correctly within jsonforms unless there is a minor delay here
     const delayedFunction = () => {
-      var _a, _b;
-      if (fileList && Array.isArray(data) && data[1] !== ((_a = fileList[propertyId]) === null || _a === void 0 ? void 0 : _a.urn)) {
-        handleChange(propertyId, fileList && ((_b = fileList[propertyId]) === null || _b === void 0 ? void 0 : _b.urn));
+      var _a;
+      if (fileList) {
+        handleChange(propertyId, fileList && ((_a = fileList[propertyId]) === null || _a === void 0 ? void 0 : _a.urn));
       }
     };
     const timeoutId = setTimeout(delayedFunction, 1);
     return () => clearTimeout(timeoutId);
-  }, [data, handleChange, fileList, propertyId]);
+  }, [handleChange, fileList, propertyId]);
   return jsxs(FileUploaderStyle, {
     id: "file-upload",
     className: "FileUploader",
@@ -4227,26 +4274,38 @@ const FileUploader = _a => {
           className: "align-center",
           children: jsx(GoACircularProgress, {
             visible: true,
-            message: `Uploading ${data[2]}`,
+            message: `Uploading ${data[1]}`,
             size: "large"
           })
         })
       }) : jsx("div", {
-        children: fileList && fileList[props.i18nKeyPrefix] && jsxs(AttachmentBorder, {
+        children: fileList && getFile() && jsxs(AttachmentBorder, {
           children: [jsx("div", {
-            children: fileList && fileList[props.i18nKeyPrefix].filename
+            children: getFileName()
           }), jsxs(GoAContextMenu, {
             children: [jsx(GoAContextMenuIcon, {
               testId: "download-icon",
               title: "Download",
               type: "download",
-              onClick: () => downloadFile(fileList && fileList[props.i18nKeyPrefix])
+              onClick: () => downloadFile(getFile())
             }), jsx(GoAContextMenuIcon, {
               "data-testid": "delete-icon",
               title: "Delete",
               type: "trash",
-              onClick: () => deleteFile(fileList && fileList[props.i18nKeyPrefix])
+              onClick: () => {
+                setShowFileDeleteConfirmation(true);
+              }
             })]
+          }), jsx(DeleteFileModal, {
+            isOpen: showFileDeleteConfirmation,
+            title: "Delete file",
+            content: `Delete file ${getFile().filename} ?`,
+            onCancel: () => setShowFileDeleteConfirmation(false),
+            onDelete: () => {
+              setShowFileDeleteConfirmation(false);
+              deleteFile(getFile());
+              handleChange(propertyId, '');
+            }
           })]
         })
       })
@@ -5118,6 +5177,12 @@ const GoAErrorControlTester = rankWith(1000, (uischema, schema, context) => {
 });
 var GoAErrorControl = withJsonFormsControlProps(ErrorControl);
 
+const ajv = new Ajv({
+  allErrors: true,
+  verbose: true
+});
+ajv.addFormat('file-urn', /^urn:[a-zA-Z0-9.-]+(:[a-zA-Z0-9.-]+)*$/);
+
 const countries = ['Argentina', 'Brazil', 'Canada', 'Denmark', 'Egypt', 'France', 'Greece', 'India', 'Japan', 'Kenya'];
 addData('countries', countries);
 const GoABaseRenderers = [
@@ -5241,4 +5306,4 @@ const GoACells = [{
   cell: MaterialOneOfEnumCell
 }, ...InputCells];
 
-export { ContextProvider, GoABaseRenderers, GoACells, GoARenderers, JsonFormContext, addData, addDataByOptions, addDataByUrl, getAllData, getData };
+export { ContextProvider, GoABaseRenderers, GoACells, GoARenderers, JsonFormContext, addData, addDataByOptions, addDataByUrl, ajv, getAllData, getData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "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",
@@ -10,7 +10,8 @@
     "@jsonforms/material-renderers": "^3.1.0",
     "@jsonforms/react": "^3.1.0",
     "@mui/material": "^5.15.10",
-    "react": "^18.0.0"
+    "react": "^18.0.0",
+    "ajv": "^6.12.6"
   },
   "dependencies": {
     "axios": "^1.6.7",

package/src/index.d.ts

@@ -1,5 +1,6 @@
 import { JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry } from '@jsonforms/core';
 export * from './lib/Context';
+export * from './lib/common';
 export declare const GoABaseRenderers: JsonFormsRendererRegistryEntry[];
 export declare const GoARenderers: JsonFormsRendererRegistryEntry[];
 export declare const GoACells: JsonFormsCellRendererRegistryEntry[];

package/src/lib/Controls/FileUploader/DeleteFileModal.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface deleteModalProps {
+    title: string;
+    content?: string | JSX.Element;
+    isOpen: boolean;
+    onDelete: () => void;
+    onCancel: () => void;
+}
+export declare const DeleteFileModal: ({ isOpen, title, content, onDelete, onCancel }: deleteModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/Controls/FileUploader/FileUploaderControl.d.ts

@@ -1,4 +1,3 @@
 import { WithClassname, ControlProps } from '@jsonforms/core';
-type FileUploaderLayoutRendererProps = ControlProps & WithClassname;
+export type FileUploaderLayoutRendererProps = ControlProps & WithClassname;
 export declare const FileUploader: ({ data, path, handleChange, uischema, ...props }: FileUploaderLayoutRendererProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/lib/Controls/FormStepper/styled-components.d.ts

@@ -7,3 +7,4 @@ export declare const ReviewListItem: import("styled-components").StyledComponent
 export declare const ReviewListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ListWithDetail: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ListWithDetailHeading: import("styled-components").StyledComponent<"h3", any, {}, never>;
+export declare const RightAlignmentDiv: import("styled-components").StyledComponent<"div", any, {}, never>;

package/src/lib/common/Ajv.d.ts

@@ -0,0 +1,2 @@
+import Ajv from 'ajv';
+export declare const ajv: Ajv.Ajv;

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

@@ -0,0 +1 @@
+export * from './Ajv';