@abgov/jsonforms-components 2.60.16 → 2.60.18

package/index.esm.js

@@ -3786,6 +3786,19 @@ const validateSinWithLuhn = input => {
   }
   return sum % 10 === 0;
 };
+const getSinValidationError = (data, schema) => {
+  const extraSchema = schema;
+  if (!extraSchema || extraSchema.title !== sinTitle || typeof data !== 'string') {
+    return undefined;
+  }
+  if (data.length === 11 && !validateSinWithLuhn(Number(data.replace(/\D/g, '')))) {
+    return data === '' ? '' : invalidSin;
+  }
+  if (data.length > 0 && data.length < 11) {
+    return extraSchema.errorMessage;
+  }
+  return undefined;
+};
 /**
  * Gets the required fields in the If/Then/Else json schema condition.
  * @param props - ControlProps
@@ -3850,13 +3863,9 @@ const checkFieldValidity = (props, rootData) => {
     schema
   } = props;
   const labelToUpdate = getControlLabelText(props);
-  const extraSchema = schema;
-  if (extraSchema && data && (extraSchema == null ? void 0 : extraSchema.title) === sinTitle) {
-    if (data.length === 11 && !validateSinWithLuhn(data)) {
-      return data === '' ? '' : invalidSin;
-    } else if (data.length > 0 && data.length < 11) {
-      return extraSchema.errorMessage;
-    }
+  const sinValidationError = getSinValidationError(data, schema);
+  if (sinValidationError) {
+    return sinValidationError;
   }
   const rootRequired = getRequiredIfThen(props);
   const requiredByCondition = isRequiredBySchema(props.rootSchema, rootData, props.path, {
@@ -10114,6 +10123,10 @@ const GoAInputBaseTableReview = props => {
   if (!activeError && typeof errors === 'string' && errors.trim() !== '') {
     activeError = errors;
   }
+  const sinValidationError = getSinValidationError(data, schema);
+  if (sinValidationError) {
+    activeError = sinValidationError;
+  }
   if (activeError && /\sis required$/i.test(activeError)) {
     activeError = `${labelToUpdate} is required`;
   }
@@ -17609,20 +17622,66 @@ const NameInputs = ({
   handleInputChange,
   data,
   requiredFields,
-  disabled
+  disabled,
+  errors,
+  onFieldBlur
 }) => {
-  var _errors$firstName, _errors$lastName;
-  const [errors, setErrors] = useState({});
+  var _displayedErrors$firs, _displayedErrors$last;
+  const [internalErrors, setInternalErrors] = useState({});
+  const currentValues = {
+    firstName,
+    middleName: middleName || '',
+    lastName
+  };
+  useEffect(() => {
+    const timeout = window.setTimeout(() => {
+      ['firstName', 'middleName', 'lastName'].forEach(field => {
+        var _input$value;
+        const input = document.querySelector(`goa-input[name="${field}"]`);
+        const liveValue = (input == null || (_input$value = input.value) == null ? void 0 : _input$value.trim()) || '';
+        if (liveValue && !currentValues[field]) {
+          handleInputChange(field, liveValue);
+        }
+      });
+    }, 50);
+    return () => window.clearTimeout(timeout);
+  }, [firstName, middleName, lastName, handleInputChange]);
+  useEffect(() => {
+    if (errors) {
+      return;
+    }
+    setInternalErrors(currentErrors => {
+      const nextErrors = Object.assign({}, currentErrors);
+      let hasChanges = false;
+      Object.keys(currentErrors).forEach(name => {
+        const currentValue = (currentValues[name] || '').trim();
+        if (requiredFields != null && requiredFields.includes(name) && currentValue === '') {
+          return;
+        }
+        delete nextErrors[name];
+        hasChanges = true;
+      });
+      return hasChanges ? nextErrors : currentErrors;
+    });
+  }, [errors, firstName, middleName, lastName, requiredFields]);
   // eslint-disable-next-line
   const handleRequiredFieldBlur = (name, updatedData) => {
-    const err = Object.assign({}, errors);
-    if ((!(data != null && data[name]) || (data == null ? void 0 : data[name]) === '') && requiredFields.includes(name) && (true)) {
+    const err = Object.assign({}, internalErrors);
+    if ((!(data != null && data[name]) || (data == null ? void 0 : data[name]) === '') && requiredFields != null && requiredFields.includes(name) && (true)) {
       const modifiedName = name === 'firstName' ? 'First name' : name === 'lastName' ? 'Last name' : '';
       err[name] = `${modifiedName} is required`;
     } else {
       err[name] = '';
     }
-    setErrors(err);
+    setInternalErrors(err);
+  };
+  const displayedErrors = errors != null ? errors : internalErrors;
+  const handleBlur = name => {
+    if (onFieldBlur) {
+      onFieldBlur(name);
+    } else {
+      handleRequiredFieldBlur(name);
+    }
   };
   return jsxs(GoabGrid, {
     minChildWidth: "0ch",
@@ -17633,7 +17692,7 @@ const NameInputs = ({
       testId: "form-item-first-name",
       label: "First name",
       requirement: requiredFields != null && requiredFields.includes('firstName') ? 'required' : undefined,
-      error: (_errors$firstName = errors == null ? void 0 : errors['firstName']) != null ? _errors$firstName : '',
+      error: (_displayedErrors$firs = displayedErrors == null ? void 0 : displayedErrors['firstName']) != null ? _displayedErrors$firs : '',
       children: jsx(GoabInput, {
         type: "text",
         name: "firstName",
@@ -17643,7 +17702,7 @@ const NameInputs = ({
         value: firstName || '',
         onChange: detail => handleInputChange(detail.name, detail.value),
         onBlur: detail => {
-          handleRequiredFieldBlur(detail.name);
+          handleBlur(detail.name);
         },
         width: "100%"
       })
@@ -17665,7 +17724,7 @@ const NameInputs = ({
       testId: "form-item-last-name",
       label: "Last name",
       requirement: requiredFields != null && requiredFields.includes('lastName') ? 'required' : undefined,
-      error: (_errors$lastName = errors == null ? void 0 : errors['lastName']) != null ? _errors$lastName : '',
+      error: (_displayedErrors$last = displayedErrors == null ? void 0 : displayedErrors['lastName']) != null ? _displayedErrors$last : '',
       children: jsx(GoabInput, {
         type: "text",
         name: "lastName",
@@ -17675,7 +17734,7 @@ const NameInputs = ({
         value: lastName || '',
         onChange: detail => handleInputChange(detail.name, detail.value),
         onBlur: detail => {
-          handleRequiredFieldBlur(detail.name);
+          handleBlur(detail.name);
         },
         width: "100%"
       })
@@ -17847,6 +17906,8 @@ handleRequiredFieldBlur) {
   }, [formData]);
 }
 
+const AUTOFILL_FIELDS = ['firstName', 'middleName', 'lastName', 'dateOfBirth'];
+const getRequiredLabel = name => name === 'firstName' ? 'First name' : name === 'lastName' ? 'Last name' : name === 'dateOfBirth' ? 'Date of birth' : name;
 const normalizeNameDobData = value => ({
   firstName: (value == null ? void 0 : value.firstName) || '',
   middleName: (value == null ? void 0 : value.middleName) || '',
@@ -17854,7 +17915,7 @@ const normalizeNameDobData = value => ({
   dateOfBirth: (value == null ? void 0 : value.dateOfBirth) || ''
 });
 const FullNameDobControl = props => {
-  var _schema$required, _errors$firstName, _schema$required2, _schema$required3, _errors$lastName, _errors$dateOfBirth;
+  var _errors$dateOfBirth;
   const {
     data,
     path,
@@ -17864,7 +17925,7 @@ const FullNameDobControl = props => {
     visible,
     uischema
   } = props;
-  const requiredFields = schema.required;
+  const requiredFields = schema.required || [];
   const [errors, setErrors] = useState({});
   const controlRef = useRef(null);
   const formStepperCtx = useContext(JsonFormsStepperContext);
@@ -17879,9 +17940,9 @@ const FullNameDobControl = props => {
   };
   const [formData, setFormData] = useState(normalizeNameDobData(data));
   const updateFormData = updatedData => {
-    updatedData = Object.fromEntries(Object.entries(updatedData).filter(([_, value]) => value !== ''));
-    setFormData(updatedData);
-    handleChange(path, updatedData);
+    const nextData = Object.fromEntries(Object.entries(updatedData).filter(([_, value]) => value !== ''));
+    setFormData(nextData);
+    handleChange(path, nextData);
   };
   useEffect(() => {
     const nextData = normalizeNameDobData(data);
@@ -17899,14 +17960,13 @@ const FullNameDobControl = props => {
     const err = Object.assign({}, errors);
     const liveInputValue = (_ref = (_ref2 = (_updatedData$name = updatedData == null ? void 0 : updatedData[name]) != null ? _updatedData$name : data == null ? void 0 : data[name]) != null ? _ref2 : (_document$querySelect = document.querySelector(`goa-input[name="${name}"]`)) == null ? void 0 : _document$querySelect.value) != null ? _ref : '';
     if (requiredFields.includes(name) && liveInputValue.trim() === '') {
-      const modifiedName = name === 'firstName' ? 'First name' : name === 'lastName' ? 'Last name' : name === 'dateOfBirth' ? 'Date of birth' : name;
-      err[name] = `${modifiedName} is required`;
+      err[name] = `${getRequiredLabel(name)} is required`;
     } else {
       delete err[name];
     }
     setErrors(err);
   };
-  useSyncAutofillFields(['firstName', 'middleName', 'lastName', 'dateOfBirth'], formData, updateFormData, handleRequiredFieldBlur);
+  useSyncAutofillFields(AUTOFILL_FIELDS, formData, updateFormData, handleRequiredFieldBlur);
   useEffect(() => {
     var _controlRef$current$q, _controlRef$current, _host$shadowRoot;
     const host = (_controlRef$current$q = (_controlRef$current = controlRef.current) == null ? void 0 : _controlRef$current.querySelector('goa-input[type="date"]')) != null ? _controlRef$current$q : null;
@@ -17947,64 +18007,16 @@ const FullNameDobControl = props => {
     visible: visible,
     children: jsxs("div", {
       ref: controlRef,
-      children: [jsxs(GoabGrid, {
-        minChildWidth: "0ch",
-        gap: "s",
-        mb: "m",
-        children: [jsx(GoabFormItem, {
-          label: "First name",
-          requirement: schema != null && (_schema$required = schema.required) != null && _schema$required.includes('firstName') ? 'required' : undefined,
-          error: (_errors$firstName = errors == null ? void 0 : errors['firstName']) != null ? _errors$firstName : '',
-          testId: "form-item-first-name",
-          children: jsx(GoabInput, {
-            disabled: !enabled,
-            type: "text",
-            name: "firstName",
-            testId: "name-form-first-name",
-            ariaLabel: 'name-form-first-name',
-            value: formData.firstName,
-            onChange: detail => {
-              handleInputChange(detail.name, detail.value);
-            },
-            onBlur: detail => {
-              handleRequiredFieldBlur(detail.name);
-            },
-            width: "100%"
-          })
-        }), jsx(GoabFormItem, {
-          label: "Middle name",
-          requirement: schema != null && (_schema$required2 = schema.required) != null && _schema$required2.includes('middleName') ? 'required' : undefined,
-          children: jsx(GoabInput, {
-            type: "text",
-            name: "middleName",
-            disabled: !enabled,
-            testId: "name-form-middle-name",
-            ariaLabel: 'name-form-middle-name',
-            value: formData.middleName || '',
-            onChange: detail => handleInputChange(detail.name, detail.value),
-            width: "100%"
-          })
-        }), jsx(GoabFormItem, {
-          label: "Last name",
-          requirement: schema != null && (_schema$required3 = schema.required) != null && _schema$required3.includes('lastName') ? 'required' : undefined,
-          error: (_errors$lastName = errors == null ? void 0 : errors['lastName']) != null ? _errors$lastName : '',
-          testId: "form-item-last-name",
-          children: jsx(GoabInput, {
-            type: "text",
-            name: "lastName",
-            disabled: !enabled,
-            testId: "name-form-last-name",
-            ariaLabel: 'name-form-last-name',
-            value: formData.lastName || '',
-            onChange: detail => {
-              handleInputChange(detail.name, detail.value);
-            },
-            onBlur: detail => {
-              handleRequiredFieldBlur(detail.name);
-            },
-            width: "100%"
-          })
-        })]
+      children: [jsx(NameInputs, {
+        firstName: formData.firstName,
+        middleName: formData.middleName,
+        lastName: formData.lastName,
+        handleInputChange: handleInputChange,
+        data: formData,
+        disabled: !enabled,
+        requiredFields: requiredFields,
+        errors: errors,
+        onFieldBlur: handleRequiredFieldBlur
       }), jsx(GoabGrid, {
         minChildWidth: "0ch",
         gap: "s",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.60.16",
+  "version": "2.60.18",
   "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/renderer-catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-04-27T20:33:20.640Z",
-  "sourceCommit": "39950b0288e24ea3e4d895bf4bbe2b79c542625f",
+  "generatedAt": "2026-04-30T19:54:34.313Z",
+  "sourceCommit": "4b89cb1336839f443d768c9688ad888bab4924e3",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 33,
   "renderers": [

package/src/lib/Controls/FullName/FullNameInputs.d.ts

@@ -5,8 +5,10 @@ interface NameInputsProps {
     lastName: string;
     isStepperReview?: boolean;
     disabled?: boolean;
-    data: any;
-    requiredFields: string[];
+    data?: any;
+    requiredFields?: string[];
+    errors?: Record<string, string>;
+    onFieldBlur?: (name: string) => void;
     handleInputChange: (field: string, value: string) => void;
 }
 export declare const NameInputs: React.FC<NameInputsProps>;

package/src/lib/util/stringUtils.d.ts

@@ -32,6 +32,7 @@ export declare const isNilOrEmptyString: (value: string | null | undefined) => b
  */
 export declare const isNilOrEmptyValue: (value: unknown, includeEmptyArray?: boolean) => boolean;
 export declare const validateSinWithLuhn: (input: number) => boolean;
+export declare const getSinValidationError: (data: unknown, schema?: JsonSchema) => string | undefined;
 /**
  * Gets the required fields in the If/Then/Else json schema condition.
  * @param props - ControlProps