@abgov/jsonforms-components 1.5.2 → 1.7.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 = [];
@@ -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",
@@ -4056,10 +4061,10 @@ const FormStepper = ({
         actions: jsx(GoAButtonGroup, {
           alignment: "end",
           children: jsx(GoAButton, {
-            type: "secondary",
+            type: "primary",
             testId: "submit-form",
             onClick: onSubmit,
-            children: "Ok"
+            children: "Close"
           })
         }),
         children: [jsx("b", {
@@ -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,9 +4213,11 @@ 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]);
+      const value = ['Loading', Array.isArray(data) ? data[1] : data, file === null || file === void 0 ? void 0 : file.name];
+      handleChange(propertyId, value);
       uploadTrigger(file, propertyId);
     }
   }
@@ -4193,6 +4231,12 @@ 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
@@ -4232,21 +4276,33 @@ const FileUploader = _a => {
           })
         })
       }) : 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, '');
+            }
           })]
         })
       })
@@ -4807,7 +4863,7 @@ const GoAVerticalLayout = withJsonFormsLayoutProps(GoAVerticalLayoutComponent, t
 
 const groupTester = rankWith(1, uiTypeIs('Group'));
 const GoAGroupControlComponent = props => {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   const {
     uischema,
     schema,
@@ -4818,11 +4874,31 @@ const GoAGroupControlComponent = props => {
     visible
   } = props;
   const group = uischema;
-  return jsx(Hidden, {
+  return jsxs(Hidden, {
     xsUp: !visible,
-    children: jsx(GoAContainer, Object.assign({}, (_a = group.options) === null || _a === void 0 ? void 0 : _a.componentProps, {
+    children: [((_b = (_a = group.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.accent) === 'thick' && jsx(GoAContainer, Object.assign({
+      heading: group.label
+    }, (_c = group.options) === null || _c === void 0 ? void 0 : _c.componentProps, {
       children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
-    }))
+    })), (((_e = (_d = group.options) === null || _d === void 0 ? void 0 : _d.componentProps) === null || _e === void 0 ? void 0 : _e.accent) === 'thin' || ((_g = (_f = group.options) === null || _f === void 0 ? void 0 : _f.componentProps) === null || _g === void 0 ? void 0 : _g.accent) === 'filled') && jsxs("div", {
+      children: [group.label && jsx("h3", {
+        children: group.label
+      }), jsx(GoAContainer, Object.assign({}, (_h = group.options) === null || _h === void 0 ? void 0 : _h.componentProps, {
+        children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
+      }))]
+    }), ((_j = group.options) === null || _j === void 0 ? void 0 : _j.componentProps) && !((_l = (_k = group.options) === null || _k === void 0 ? void 0 : _k.componentProps) === null || _l === void 0 ? void 0 : _l.accent) && jsxs("div", {
+      children: [group.label && jsx("h3", {
+        children: group.label
+      }), jsx(GoAContainer, Object.assign({}, (_m = group.options) === null || _m === void 0 ? void 0 : _m.componentProps, {
+        children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
+      }))]
+    }), !((_o = group.options) === null || _o === void 0 ? void 0 : _o.componentProps) && jsxs("div", {
+      children: [group.label && jsx("h3", {
+        children: group.label
+      }), jsx(GoAContainer, {
+        children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
+      })]
+    })]
   });
 };
 const GoAGroupLayoutTester = withIncreasedRank(1, groupTester);
@@ -5098,6 +5174,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 = [
@@ -5221,4 +5303,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.5.2",
+  "version": "1.7.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';