@abgov/jsonforms-components 2.4.1 → 2.4.3

package/index.esm.js

@@ -7,7 +7,7 @@ import axios from 'axios';
 import get$1 from 'lodash/get';
 import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, getControlPath, toDataPath, deriveLabelForUISchemaElement, isEnabled, schemaTypeIs, formatIs, createDefaultValue, or, isObjectArrayControl, isPrimitiveArrayControl, Paths, schemaMatches, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsRendererProps, withJsonFormsEnumProps, withTranslateProps, JsonFormsDispatch, useJsonForms, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsAllOfProps, withJsonFormsCellProps } from '@jsonforms/react';
-import * as _$c from 'lodash';
+import * as _$b from 'lodash';
 import { isEqual, isEmpty as isEmpty$1, isObject as isObject$f } from 'lodash';
 import merge from 'lodash/merge';
 import isEmpty from 'lodash/isEmpty';
@@ -3499,16 +3499,16 @@ const onChangeForNumericControl = props => {
   }
 };
 
-let _$b = t => t,
+let _$a = t => t,
   _t$b,
   _t2$7;
-styled.div(_t$b || (_t$b = _$b`
+styled.div(_t$b || (_t$b = _$a`
   height: 70vh;
   overflow-y: auto;
   padding-left: var(--goa-space-2xs);
   padding-right: var(--goa-space-2xs);
 `));
-const Visible = styled.div(_t2$7 || (_t2$7 = _$b`
+const Visible = styled.div(_t2$7 || (_t2$7 = _$a`
   display: ${0};
 `), p => p.visible ? 'initial' : 'none');
 
@@ -4299,7 +4299,7 @@ const JsonFormRegisterProvider = ({
   });
 };
 
-let _$a = t => t,
+let _$9 = t => t,
   _t$a,
   _t2$6,
   _t3$5,
@@ -4308,42 +4308,42 @@ let _$a = t => t,
   _t6$3,
   _t7$2,
   _t8$2;
-const FormFieldWrapper = styled.div(_t$a || (_t$a = _$a`
+const FormFieldWrapper = styled.div(_t$a || (_t$a = _$9`
   margin-bottom: var(--goa-space-l);
 `));
-const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$a`
+const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$9`
   display: inline-flex;
   align-items: flex-start;
   gap: 0.25rem;
   font-size: var(--goa-font-size-2);
   color: var(--goa-color-interactive-error);
 `));
-const RequiredTextLabel = styled.label(_t3$5 || (_t3$5 = _$a`
+const RequiredTextLabel = styled.label(_t3$5 || (_t3$5 = _$9`
   color: var(--goa-color-greyscale-700);
   font-weight: var(--goa-font-weight-regular);
   font-size: var(--goa-font-size-2);
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-const PageReviewNameCol = styled.td(_t4$5 || (_t4$5 = _$a`
+const PageReviewNameCol = styled.td(_t4$5 || (_t4$5 = _$9`
   width: 5%;
   padding-top: var(--goa-space-s);
   padding-bottom: var(--goa-space-s);
   padding-right: var(--goa-space-m);
 `));
-const PageReviewValueCol = styled.td(_t5$3 || (_t5$3 = _$a`
+const PageReviewValueCol = styled.td(_t5$3 || (_t5$3 = _$9`
   width: 20%;
   text-align: left;
 `));
 //Check and unchecked are different heights otherwise
-const CheckboxWrapper = styled.div(_t6$3 || (_t6$3 = _$a`
+const CheckboxWrapper = styled.div(_t6$3 || (_t6$3 = _$9`
   height: 28px;
 `));
-styled.h4(_t7$2 || (_t7$2 = _$a`
+styled.h4(_t7$2 || (_t7$2 = _$9`
   margin: 0 0 0.25rem 0;
   fontsize: larger;
 `));
-styled.h4(_t8$2 || (_t8$2 = _$a`
+styled.h4(_t8$2 || (_t8$2 = _$9`
   border-bottom: 1px solid #ddd;
 `));
 
@@ -4568,12 +4568,12 @@ const SPACE_KEY = ' ';
 const ALT_KEY = 'Alt';
 const SHIFT_KEY = 'Shift';
 
-let _$9 = t => t,
+let _$8 = t => t,
   _t$9,
   _t2$5,
   _t3$4,
   _t4$4;
-const GoADropdownTextbox = styled.div(_t$9 || (_t$9 = _$9`
+const GoADropdownTextbox = styled.div(_t$9 || (_t$9 = _$8`
   border-radius: var(--goa-space-2xs);
   box-shadow: ${0};
   &:hover {
@@ -4584,11 +4584,11 @@ const GoADropdownTextbox = styled.div(_t$9 || (_t$9 = _$9`
     box-shadow: ${0};
   }
 `), p => p.isOpen ? `0 0 0 3px var(--goa-color-interactive-focus)` : '', p => p.isOpen ? `0 0 0 3px var(--goa-color-interactive-focus) !important` : '');
-const GoADropdownListContainerWrapper = styled.div(_t2$5 || (_t2$5 = _$9`
+const GoADropdownListContainerWrapper = styled.div(_t2$5 || (_t2$5 = _$8`
   position: relative;
   display: ${0};
 `), p => !(p === null || p === void 0 ? void 0 : p.isOpen) && 'none');
-const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$9`
+const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$8`
   border: solid 1px var(--goa-color-greyscale-200);
   border-radius: var(--goa-space-2xs);
   background: var(--goa-color-greyscale-white);
@@ -4612,7 +4612,7 @@ const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$9`
     scrollbar-color: #a8a8a8 var(--goa-color-greyscale-100) !important;
   }
 `), p => p.optionListMaxHeight || '272px');
-const GoADropdownListOption = styled.div(_t4$4 || (_t4$4 = _$9`
+const GoADropdownListOption = styled.div(_t4$4 || (_t4$4 = _$8`
   padding: var(--goa-space-2xs) var(--goa-space-s);
   text-overflow: ellipsis;
   color: ${0} !important;
@@ -5679,7 +5679,7 @@ const BooleanRadioControl = props => jsx(GoAInputBaseControl, Object.assign({},
 const GoABooleanRadioControlTester = rankWith(3, and(isBooleanControl, optionIs('radio', true)));
 const GoABooleanRadioControl = withJsonFormsControlProps(BooleanRadioControl);
 
-let _$8 = t => t,
+let _$7 = t => t,
   _t$8;
 const Checkboxes = ({
   children,
@@ -5692,7 +5692,7 @@ const Checkboxes = ({
     children: children
   });
 };
-const CheckBoxGroupDiv = styled.div(_t$8 || (_t$8 = _$8`
+const CheckBoxGroupDiv = styled.div(_t$8 || (_t$8 = _$7`
   .horizontal {
     display: flex;
     flex-direction: row;
@@ -5892,7 +5892,7 @@ const GoAInputBaseTableReview = props => {
 };
 const GoAInputBaseTableReviewControl = withJsonFormsControlProps(GoAInputBaseTableReview);
 
-let _$7 = t => t,
+let _$6 = t => t,
   _t$7;
 const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
   return elements.map((child, index) => jsx(JsonFormsDispatch, {
@@ -5972,13 +5972,13 @@ const ReviewLayoutRenderer = ({
     }
   }
 };
-const ReviewGrid = styled.div(_t$7 || (_t$7 = _$7`
+const ReviewGrid = styled.div(_t$7 || (_t$7 = _$6`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, calc(50% - 8px)));
   gap: 16px;
 `));
 
-let _$6 = t => t,
+let _$5 = t => t,
   _t$6,
   _t2$4,
   _t3$3,
@@ -6001,7 +6001,7 @@ let _$6 = t => t,
   _t20$1,
   _t21,
   _t22;
-const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
+const ReviewItem = styled.div(_t$6 || (_t$6 = _$5`
   display: flex;
   flex-direction: column;
   border: var(--goa-border-width-s) solid grey;
@@ -6012,7 +6012,7 @@ const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
     display: none;
   }
 `));
-const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$6`
+const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$5`
   background-color: #f1f1f1;
   margin-bottom: var(--goa-space-m);
   padding: var(--goa-space-m);
@@ -6023,18 +6023,18 @@ const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$6`
     max-width: 1600px;
   }
 `));
-const ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$6`
+const ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$5`
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--goa-space-xl);
 `));
-const ReviewItemTitle = styled.div(_t4$3 || (_t4$3 = _$6`
+const ReviewItemTitle = styled.div(_t4$3 || (_t4$3 = _$5`
   font-size: var(--goa-space-l);
   line-height: var(--goa-space-xl);
   font-weight: 300;
 `));
-const Anchor = styled.div(_t5$2 || (_t5$2 = _$6`
+const Anchor = styled.div(_t5$2 || (_t5$2 = _$5`
   color: #0070c4;
   text-decoration: underline;
   outline: none;
@@ -6045,20 +6045,20 @@ const Anchor = styled.div(_t5$2 || (_t5$2 = _$6`
     background-color: #e6f7ff;
   }
 `));
-styled.div(_t6$2 || (_t6$2 = _$6`
+styled.div(_t6$2 || (_t6$2 = _$5`
   margin-left: var(--goa-space-m);
 `));
-styled.div(_t7$1 || (_t7$1 = _$6`
+styled.div(_t7$1 || (_t7$1 = _$5`
   margin-bottom: var(--goa-space-m);
 `));
-styled.div(_t8$1 || (_t8$1 = _$6`
+styled.div(_t8$1 || (_t8$1 = _$5`
   margin: var(--goa-space-s);
   width: 100%;
 `));
-styled.h3(_t9$1 || (_t9$1 = _$6`
+styled.h3(_t9$1 || (_t9$1 = _$5`
   text-transform: capitalize;
 `));
-const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$6`
+const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$5`
   @media screen and (max-width: 767px) {
     margin-bottom: var(--goa-space-l);
   }
@@ -6068,57 +6068,57 @@ const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$6`
     margin-bottom: var(--goa-space-l);
   }
 `));
-const FormStepperSummaryH3 = styled.h3(_t11$1 || (_t11$1 = _$6`
+const FormStepperSummaryH3 = styled.h3(_t11$1 || (_t11$1 = _$5`
   flex: 1;
   margin-bottom: var(--goa-space-m);
   font-size: var(--goa-font-size-7);
   line-height: var(--goa-line-height-4);
   font-weight: var(--goa-font-weight-regular);
 `));
-const PageRenderPadding = styled.div(_t12$1 || (_t12$1 = _$6`
+const PageRenderPadding = styled.div(_t12$1 || (_t12$1 = _$5`
   margin-top: var(--goa-space-2xl);
 `));
-const PageBorder = styled.h3(_t13$1 || (_t13$1 = _$6`
+const PageBorder = styled.h3(_t13$1 || (_t13$1 = _$5`
   padding: var(--goa-space-3xl);
 `));
-const TableReviewItemSection = styled.div(_t14$1 || (_t14$1 = _$6`
+const TableReviewItemSection = styled.div(_t14$1 || (_t14$1 = _$5`
   .element-style {
     max-width: 1600px;
   }
 `));
-const TableReviewItem = styled.div(_t15$1 || (_t15$1 = _$6`
+const TableReviewItem = styled.div(_t15$1 || (_t15$1 = _$5`
   border: 1px solid #dcdcdc;
   border-radius: 5px;
   padding: var(--goa-space-2xl);
 `));
-const TableReviewPageTitleRow = styled.div(_t16$1 || (_t16$1 = _$6`
+const TableReviewPageTitleRow = styled.div(_t16$1 || (_t16$1 = _$5`
   margin-top: var(--goa-space-xl);
   display: flex;
   justify-content: space-between;
 `));
-const TableReviewCategoryLabel = styled.h3(_t17$1 || (_t17$1 = _$6`
+const TableReviewCategoryLabel = styled.h3(_t17$1 || (_t17$1 = _$5`
   color: var(--goa-color-text-secondary) !important;
   margin-bottom: var(--goa-space-l);
 `));
-const CategoryStatus = styled.td(_t18$1 || (_t18$1 = _$6`
+const CategoryStatus = styled.td(_t18$1 || (_t18$1 = _$5`
   width: var(--goa-space-xl);
   padding-right: var(--goa-space-xl);
 `));
-const TocPageRef = styled.td(_t19$1 || (_t19$1 = _$6`
+const TocPageRef = styled.td(_t19$1 || (_t19$1 = _$5`
   padding-left: var(--goa-space-xl);
 `));
-const TocTitle = styled.h1(_t20$1 || (_t20$1 = _$6`
+const TocTitle = styled.h1(_t20$1 || (_t20$1 = _$5`
   padding: 0;
   margin: 0;
   padding-left: var(--goa-space-xl);
   padding-bottom: var(--goa-space-3xl);
 `));
-const TocSubtitle = styled.h2(_t21 || (_t21 = _$6`
+const TocSubtitle = styled.h2(_t21 || (_t21 = _$5`
   padding: 0;
   margin: 0;
   padding-left: var(--goa-space-xl);
 `));
-const CompletionStatus = styled.div(_t22 || (_t22 = _$6`
+const CompletionStatus = styled.div(_t22 || (_t22 = _$5`
   padding: 0;
   margin: 0;
   padding-left: var(--goa-space-xl);
@@ -6434,7 +6434,7 @@ const pickPropertyValues = (obj, property, endWithType) => {
     var _a;
     if (key === property) {
       values.push(obj[key]);
-    } else if (_$c.isObject(obj[key])) {
+    } else if (_$b.isObject(obj[key])) {
       // if the object type is equal to end type, we are not going to continue the recursive approach
       if (endWithType && ((_a = obj[key]) === null || _a === void 0 ? void 0 : _a.type) === endWithType) {
         if (property in obj[key]) {
@@ -6443,7 +6443,7 @@ const pickPropertyValues = (obj, property, endWithType) => {
       } else {
         values = [...values, ...pickPropertyValues(obj[key], property, endWithType)];
       }
-    } else if (_$c.isArray(obj[key])) {
+    } else if (_$b.isArray(obj[key])) {
       const nextValues = obj[key].map(function (arrayObj) {
         return pickPropertyValues(arrayObj, property, endWithType);
       });
@@ -7331,9 +7331,9 @@ const FormStepperPageReviewer = props => {
 };
 withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperPageReviewer)));
 
-let _$5 = t => t,
+let _$4 = t => t,
   _t$5;
-const BackButtonWrapper = styled.span(_t$5 || (_t$5 = _$5`
+const BackButtonWrapper = styled.span(_t$5 || (_t$5 = _$4`
   .back-link::before {
     content: '';
     display: inline-block;
@@ -7585,7 +7585,7 @@ const CategorizationPagesRendererTester = rankWith(2, and(uiTypeIs('Categorizati
   return ((_a = uischema.options) === null || _a === void 0 ? void 0 : _a.variant) === 'pages';
 }));
 
-let _$4 = t => t,
+let _$3 = t => t,
   _t$4;
 const GoAContextMenuIcon = props => {
   return jsx(GoAIconButton, {
@@ -7597,7 +7597,7 @@ const GoAContextMenuIcon = props => {
     disabled: props.disabled
   });
 };
-const GoAContextMenu = styled.div(_t$4 || (_t$4 = _$4`
+const GoAContextMenu = styled.div(_t$4 || (_t$4 = _$3`
   display: flex;
   align-items: center;
   background-color: #fff;
@@ -7644,7 +7644,7 @@ const DeleteFileModal = ({
   });
 };
 
-let _$3 = t => t,
+let _2 = t => t,
   _t$3,
   _t2$3,
   _t3$2,
@@ -7657,7 +7657,7 @@ const FileUploaderReview = props => {
   }));
 };
 const FileUploader = _a => {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
   var {
       data,
       path,
@@ -7685,7 +7685,8 @@ const FileUploader = _a => {
   } = props;
   const propertyId = i18nKeyPrefix;
   const variant = ((_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.variant) || 'button';
-  const [showFileDeleteConfirmation, setShowFileDeleteConfirmation] = useState(false);
+  const multiFileUploader = variant === 'dragdrop';
+  const [deleteHide, setDeleteHide] = useState(false);
   function uploadFile(file) {
     if (uploadTrigger) {
       uploadTrigger(file, propertyId);
@@ -7693,6 +7694,7 @@ const FileUploader = _a => {
         const value = ['Loading', Array.isArray(data) ? data[1] : file === null || file === void 0 ? void 0 : file.name];
         handleChange(propertyId, value);
       };
+      setDeleteHide(false);
       setTimeout(handleFunction, DELAY_UPLOAD_TIMEOUT_MS);
     }
   }
@@ -7706,11 +7708,12 @@ const FileUploader = _a => {
       deleteTrigger(file, propertyId);
     }
   }
-  function getFileName() {
-    return fileList && fileList[props.i18nKeyPrefix].filename;
+  function getFileName(index) {
+    var _a;
+    return fileList && fileList[props.i18nKeyPrefix] && ((_a = fileList[props.i18nKeyPrefix][index]) === null || _a === void 0 ? void 0 : _a.filename);
   }
-  function getFile() {
-    return fileList && fileList[props.i18nKeyPrefix];
+  function getFile(index) {
+    return fileList && fileList[props.i18nKeyPrefix] && fileList[props.i18nKeyPrefix][index];
   }
   useEffect(() => {
     // UseEffect is required because not having it causes a react update error, but
@@ -7732,6 +7735,55 @@ const FileUploader = _a => {
   }
   const helpText = (_p = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _p === void 0 ? void 0 : _p.help;
   const sentenceCaseLabel = convertToSentenceCase(label);
+  const DownloadFileWidget = ({
+    index
+  }) => {
+    var _a;
+    const [showFileDeleteConfirmation, setShowFileDeleteConfirmation] = useState(false);
+    return jsx("div", {
+      children: readOnly && index ? jsxs(AttachmentBorderDisabled, {
+        children: [getFileName(index), jsx(GoAContextMenuIcon, {
+          testId: "download-icon",
+          title: "Download",
+          type: "download",
+          onClick: () => downloadFile(getFile(index))
+        })]
+      }) : jsxs(AttachmentBorder, {
+        children: [jsx("div", {
+          children: getFileName(index)
+        }), jsxs(GoAContextMenu, {
+          children: [jsx(GoAContextMenuIcon, {
+            testId: "download-icon",
+            title: "Download",
+            type: "download",
+            onClick: () => downloadFile(getFile(index))
+          }), jsx(GoAContextMenuIcon, {
+            "data-testid": "delete-icon",
+            title: "Delete",
+            type: "trash",
+            onClick: () => {
+              setShowFileDeleteConfirmation(true);
+            }
+          })]
+        }), jsx(DeleteFileModal, {
+          isOpen: showFileDeleteConfirmation,
+          title: "Delete file",
+          content: `Delete file ${(_a = getFile(index)) === null || _a === void 0 ? void 0 : _a.filename} ?`,
+          onCancel: () => setShowFileDeleteConfirmation(false),
+          onDelete: () => {
+            setShowFileDeleteConfirmation(false);
+            deleteFile(getFile(index));
+            setDeleteHide(true);
+            const handleFunction = () => {
+              handleChange(propertyId, '');
+            };
+            setTimeout(handleFunction, DELAY_DELETE_TIMEOUT_MS);
+          }
+        })]
+      })
+    });
+  };
+  const fileListLength = fileList && ((_q = fileList[props.i18nKeyPrefix]) === null || _q === void 0 ? void 0 : _q.length) || 0;
   return jsxs(FileUploaderStyle, {
     className: "FileUploader",
     children: [required ? jsx(GoAFormItem, {
@@ -7762,57 +7814,23 @@ const FileUploader = _a => {
           })
         })
       }) : jsx("div", {
-        children: fileList && getFile() && jsx("div", {
-          children: readOnly ? jsxs(AttachmentBorderDisabled, {
-            children: [getFileName(), ' ', jsx(GoAContextMenuIcon, {
-              testId: "download-icon",
-              title: "Download",
-              type: "download",
-              onClick: () => downloadFile(getFile())
-            })]
-          }) : 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);
-              }
-            })]
-          })
+        children: multiFileUploader ? fileList && (fileList[props.i18nKeyPrefix] || []).map((_, index) => {
+          return jsx(DownloadFileWidget, {
+            index: index
+          });
+        }) : fileList && !deleteHide && getFile(fileListLength - 1) && fileListLength >= 0 && jsx(DownloadFileWidget, {
+          index: fileListLength - 1
         })
       })
     })]
   });
 };
-const HelpText = styled.div(_t$3 || (_t$3 = _$3`
+const HelpText = styled.div(_t$3 || (_t$3 = _2`
   margin-top: var(--goa-space-xs);
   font-size: var(--goa-font-size-3);
   color: var(--goa-color-text-secondary);
 `));
-const AttachmentBorderDisabled = styled.div(_t2$3 || (_t2$3 = _$3`
+const AttachmentBorderDisabled = styled.div(_t2$3 || (_t2$3 = _2`
   display: flex;
   flex-direction: row;
   border: var(--goa-border-width-s) solid #dcdcdc;
@@ -7821,7 +7839,7 @@ const AttachmentBorderDisabled = styled.div(_t2$3 || (_t2$3 = _$3`
   width: fit-content;
   background-color: #f1f1f1;
 `));
-const AttachmentBorder = styled.div(_t3$2 || (_t3$2 = _$3`
+const AttachmentBorder = styled.div(_t3$2 || (_t3$2 = _2`
   display: flex;
   flex-direction: row;
   border: var(--goa-border-width-s) solid #dcdcdc;
@@ -7830,7 +7848,7 @@ const AttachmentBorder = styled.div(_t3$2 || (_t3$2 = _$3`
   width: fit-content;
   margin-top: var(--goa-space-2xs);
 `));
-const FileUploaderStyle = styled.div(_t4$2 || (_t4$2 = _$3`
+const FileUploaderStyle = styled.div(_t4$2 || (_t4$2 = _2`
   margin-bottom: var(--goa-space-l);
   .label {
     display: block;
@@ -9605,6 +9623,22 @@ const formatPostalCode = value => {
   }
   return value;
 };
+function detectPostalCodeType(input) {
+  const cleaned = input.toUpperCase().replace(/[^A-Z0-9]/g, '');
+  const fullPostal = /^[A-Z]\d[A-Z]\d[A-Z]\d$/;
+  const partialPostal = /^[A-Z]\d[A-Z]?\d?[A-Z]?\d?$/;
+  if (fullPostal.test(cleaned)) return 'full';
+  if (partialPostal.test(cleaned)) return 'partial';
+  return 'none';
+}
+function formatPostalCodeIfNeeded(input) {
+  const cleaned = input.trim().toUpperCase().replace(/[^A-Z0-9]/g, '');
+  const type = detectPostalCodeType(cleaned);
+  if (type === 'none') return input;
+  const before = cleaned.slice(0, 3);
+  const after = cleaned.slice(3);
+  return `${before} ${after}`;
+}
 
 let _ = t => t,
   _t,
@@ -9948,7 +9982,7 @@ const AddressLookUpControl = props => {
       if (searchTerm.length > 2 && dropdownSelected === false) {
         setLoading(true);
         setOpen(true);
-        yield fetchAddressSuggestions(formUrl, searchTerm, isAlbertaAddress).then(response => {
+        yield fetchAddressSuggestions(formUrl, formatPostalCodeIfNeeded(searchTerm), isAlbertaAddress).then(response => {
           const suggestions = filterSuggestionsWithoutAddressCount(response);
           if (isAlbertaAddress) {
             setSuggestions(filterAlbertaAddresses(suggestions));
@@ -10148,7 +10182,7 @@ const AddressViews = ({
         gap: "s",
         children: [jsx(GoAFormItem, {
           label: "Address line 1",
-          error: (data === null || data === void 0 ? void 0 : data.addressLine1) === undefined ? 'addressLine1 is required' : '',
+          error: (data === null || data === void 0 ? void 0 : data.addressLine1) === undefined ? 'Address line 1 is required' : '',
           requirement: "required",
           children: jsx(TextWrap, {
             children: data === null || data === void 0 ? void 0 : data.addressLine1
@@ -10163,14 +10197,14 @@ const AddressViews = ({
         minChildWidth: "0ch",
         gap: "s",
         children: [jsx(GoAFormItem, {
-          error: (data === null || data === void 0 ? void 0 : data.municipality) === undefined ? 'city is required' : '',
+          error: (data === null || data === void 0 ? void 0 : data.municipality) === undefined ? 'City is required' : '',
           label: "City",
           requirement: "required",
           children: jsx(TextWrap, {
             children: data === null || data === void 0 ? void 0 : data.municipality
           })
         }), jsx(GoAFormItem, {
-          error: (data === null || data === void 0 ? void 0 : data.postalCode) === undefined ? 'postalCode is required' : '',
+          error: (data === null || data === void 0 ? void 0 : data.postalCode) === undefined ? 'Postal code is required' : '',
           label: "Postal Code",
           requirement: "required",
           children: jsx(TextWrap, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "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/Controls/AddressLookup/utils.d.ts

@@ -8,3 +8,5 @@ export declare const handlePostalCodeValidation: (validatePc: boolean, message:
     [x: string]: string;
 };
 export declare const formatPostalCode: (value: string) => string;
+export declare function detectPostalCodeType(input: string): 'full' | 'partial' | 'none';
+export declare function formatPostalCodeIfNeeded(input: string): string;