@abgov/jsonforms-components 1.42.5 → 1.42.6

package/index.esm.js

@@ -3684,7 +3684,7 @@ const GoAInputBaseControl = props => {
           error: modifiedErrors,
           testId: `${isStepperReview === true && 'review-base-'}${path}`,
           label: (props === null || props === void 0 ? void 0 : props.noLabel) === true ? '' : labelToUpdate,
-          helpText: typeof ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.help) === 'string' ? (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help : '',
+          helpText: typeof ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.help) === 'string' && !isStepperReview ? (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help : '',
           children: jsx(InnerComponent, Object.assign({}, modifiedProps))
         })
       })
@@ -5673,7 +5673,7 @@ const FormStepper = props => {
     const categoryLabels = [...allCategories.elements.map(category => category.label), summaryLabel];
     const visibleLabels = [...visibleCategoryLabels, summaryLabel];
     const newPage = mapToVisibleStep(page, categoryLabels, visibleLabels);
-    const pageStatus = getCompletionStatus(inputStatuses, page);
+    const pageStatus = getCompletionStatus(inputStatuses, page, true);
     const statuses = [...stepStatuses];
     statuses[page - 1] = pageStatus ? pageStatus : 'incomplete';
     setStepStatuses(statuses);
@@ -8202,7 +8202,7 @@ const AddressViews = ({
       gap: "s",
       children: [jsx(GoAFormItem, {
         error: ((_a = data === null || data === void 0 ? void 0 : data.addressLine1) === null || _a === void 0 ? void 0 : _a.length) === 0 ? 'addressLine1 is required' : '',
-        label: `${isAlbertaAddress ? 'Alberta p' : 'Canada p'}ostal address`,
+        label: `${isAlbertaAddress ? 'Alberta' : 'Canada'} postal address`,
         children: jsx("p", {
           children: data === null || data === void 0 ? void 0 : data.addressLine1
         })
@@ -8258,11 +8258,9 @@ const AddressLookUpControlReview = props => {
     schema
   } = props;
   const isAlbertaAddress = ((_b = (_a = schema === null || schema === void 0 ? void 0 : schema.properties) === null || _a === void 0 ? void 0 : _a.subdivisionCode) === null || _b === void 0 ? void 0 : _b.const) === 'AB';
-  return jsx("div", {
-    children: jsx(AddressViews, {
-      data: data,
-      isAlbertaAddress: isAlbertaAddress
-    })
+  return jsx(AddressViews, {
+    data: data,
+    isAlbertaAddress: isAlbertaAddress
   });
 };
 
@@ -8378,30 +8376,44 @@ const NameInputs = ({
 };
 
 const FullNameReviewControl = props => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const requiredFields = props.schema.required;
+  const [errors, setErrors] = useState({});
+  useEffect(() => {
+    var _a, _b;
+    const err = {};
+    if ((requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('firstName')) && !((_a = props.data) === null || _a === void 0 ? void 0 : _a.firstName)) {
+      err['firstName'] = `First name is required`;
+    }
+    if ((requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('lastName')) && !((_b = props.data) === null || _b === void 0 ? void 0 : _b.lastName)) {
+      err['lastName'] = `Last name is required`;
+    }
+    setErrors(err);
+  }, [props.data, requiredFields]);
   return jsxs(GoAGrid, {
     minChildWidth: "0ch",
     gap: "s",
     children: [jsx(GoAFormItem, {
       label: "First Name",
       requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('firstName')) ? 'required' : undefined,
+      error: (_a = errors === null || errors === void 0 ? void 0 : errors['firstName']) !== null && _a !== void 0 ? _a : '',
       children: jsx("div", {
         "data-testid": `firstName-control-${props.id}`,
-        children: (_a = props.data) === null || _a === void 0 ? void 0 : _a.firstName
+        children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.firstName
       })
     }), jsx(GoAFormItem, {
       label: "Middle Name",
       children: jsx("div", {
         "data-testid": `middleName-control-${props.id}`,
-        children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.middleName
+        children: (_c = props.data) === null || _c === void 0 ? void 0 : _c.middleName
       })
     }), jsx(GoAFormItem, {
       label: "Last Name",
       requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('lastName')) ? 'required' : undefined,
+      error: (_d = errors === null || errors === void 0 ? void 0 : errors['lastName']) !== null && _d !== void 0 ? _d : '',
       children: jsx("div", {
         "data-testid": `lastName-control-${props.id}`,
-        children: (_c = props.data) === null || _c === void 0 ? void 0 : _c.lastName
+        children: (_e = props.data) === null || _e === void 0 ? void 0 : _e.lastName
       })
     })]
   });
@@ -8492,6 +8504,7 @@ const FullNameDobControl = props => {
   };
   const [formData, setFormData] = useState(data || defaultNameAndDob);
   const updateFormData = updatedData => {
+    updatedData = Object.fromEntries(Object.entries(updatedData).filter(([_, value]) => value !== ''));
     handleChange(path, updatedData);
   };
   const handleInputChange = (field, value) => {
@@ -8500,7 +8513,6 @@ const FullNameDobControl = props => {
     });
     setFormData(updatedData);
     updateFormData(updatedData);
-    handleRequiredFieldBlur(field, updatedData);
   };
   const handleDobChange = (field, value) => {
     const updatedData = Object.assign(Object.assign({}, formData), {
@@ -8537,7 +8549,6 @@ const FullNameDobControl = props => {
           value: formData.firstName || '',
           onChange: (name, value) => {
             handleInputChange(name, value);
-            handleRequiredFieldBlur(name);
           },
           onBlur: name => {
             /* istanbul ignore next */
@@ -8604,8 +8615,23 @@ const FullNameDobControl = props => {
 };
 
 const FullNameDobReviewControl = props => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g;
   const requiredFields = props.schema.required;
+  const [errors, setErrors] = useState({});
+  useEffect(() => {
+    var _a, _b, _c;
+    const err = {};
+    if ((requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('firstName')) && !((_a = props.data) === null || _a === void 0 ? void 0 : _a.firstName)) {
+      err['firstName'] = `First name is required`;
+    }
+    if ((requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('lastName')) && !((_b = props.data) === null || _b === void 0 ? void 0 : _b.lastName)) {
+      err['lastName'] = `Last name is required`;
+    }
+    if ((requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('dateOfBirth')) && !((_c = props.data) === null || _c === void 0 ? void 0 : _c.dateOfBirth)) {
+      err['dateOfBirth'] = `Date of birth is required`;
+    }
+    setErrors(err);
+  }, [props.data, requiredFields]);
   return jsxs(Fragment, {
     children: [jsxs(GoAGrid, {
       minChildWidth: "0ch",
@@ -8613,22 +8639,24 @@ const FullNameDobReviewControl = props => {
       children: [jsx(GoAFormItem, {
         label: "First name",
         requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('firstName')) ? 'required' : undefined,
+        error: (_a = errors === null || errors === void 0 ? void 0 : errors['firstName']) !== null && _a !== void 0 ? _a : '',
         children: jsx("div", {
           "data-testid": `firstName-control-${props.id}`,
-          children: (_a = props.data) === null || _a === void 0 ? void 0 : _a.firstName
+          children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.firstName
         })
       }), jsx(GoAFormItem, {
         label: "Middle name",
         children: jsx("div", {
           "data-testid": `middleName-control-${props.id}`,
-          children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.middleName
+          children: (_c = props.data) === null || _c === void 0 ? void 0 : _c.middleName
         })
       }), jsx(GoAFormItem, {
         label: "Last name",
         requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('lastName')) ? 'required' : undefined,
+        error: (_d = errors === null || errors === void 0 ? void 0 : errors['lastName']) !== null && _d !== void 0 ? _d : '',
         children: jsx("div", {
           "data-testid": `lastName-control-${props.id}`,
-          children: (_c = props.data) === null || _c === void 0 ? void 0 : _c.lastName
+          children: (_e = props.data) === null || _e === void 0 ? void 0 : _e.lastName
         })
       })]
     }), jsx(GoAGrid, {
@@ -8637,9 +8665,10 @@ const FullNameDobReviewControl = props => {
       children: jsx(GoAFormItem, {
         label: "Date of birth",
         requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('dateOfBirth')) ? 'required' : undefined,
+        error: (_f = errors === null || errors === void 0 ? void 0 : errors['dateOfBirth']) !== null && _f !== void 0 ? _f : '',
         children: jsx("div", {
           "data-testid": `dob-control-${props.id}`,
-          children: (_d = props.data) === null || _d === void 0 ? void 0 : _d.dateOfBirth
+          children: (_g = props.data) === null || _g === void 0 ? void 0 : _g.dateOfBirth
         })
       })
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.42.5",
+  "version": "1.42.6",
   "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",