@abgov/jsonforms-components 2.60.15 → 2.60.17

package/index.esm.js

@@ -11758,6 +11758,16 @@ const DeleteDialog = /*#__PURE__*/React.memo(function DeleteDialog({
   }, 1);
 });
 
+const jsonPreviewStyle = {
+  display: 'block',
+  width: '100%',
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  whiteSpace: 'pre-wrap',
+  textAlign: 'left',
+  overflowX: 'auto'
+};
 function prettify(prop) {
   return prop.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^./, c => c.toUpperCase());
 }
@@ -11874,18 +11884,21 @@ const renderCellColumn = ({
         return `${dateObj.year}-${dateObj.month}-${dayValue}`;
       }
       return jsx("pre", {
+        style: jsonPreviewStyle,
         children: JSON.stringify(data, null, 2)
       });
     } else if (result.length === 0) {
       return renderWarningCell();
     } else if (result.length > 0 && (isObjectArrayEmpty(data) || nestedErrors.length > 0)) {
       return jsx("pre", {
+        style: jsonPreviewStyle,
         children: renderWarningCell(JSON.stringify(data, null, 2))
       });
     } else if (data !== undefined && result.length > 0 && error !== '' && error !== undefined) {
       const values = Object.values(data);
       if (values && values.length > 0) {
         return jsx("pre", {
+          style: jsonPreviewStyle,
           children: renderWarningCell(JSON.stringify(values.at(0), null, 2))
         });
       }
@@ -12637,6 +12650,7 @@ const ArrayControlReview = props => {
 const GoAArrayControlRenderer = withJsonFormsControlProps(ArrayControlBase);
 const GoAArrayControlReviewRenderer = withJsonFormsControlProps(ArrayControlReview);
 const PrimitiveArrayControl = props => {
+  var _enumerators$function;
   const {
     data,
     path,
@@ -12648,8 +12662,13 @@ const PrimitiveArrayControl = props => {
     renderers,
     cells
   } = props;
+  const enumerators = useContext(JsonFormContext);
   const rawItems = Array.isArray(data) ? data : [];
   const items = rawItems.filter(item => item !== undefined && item !== null);
+  const deleteTriggerFunction = enumerators == null || (_enumerators$function = enumerators.functions) == null ? void 0 : _enumerators$function.get('delete-file');
+  const deleteTrigger = deleteTriggerFunction && deleteTriggerFunction();
+  const fileListValue = enumerators == null ? void 0 : enumerators.data.get('file-list');
+  const fileList = fileListValue && fileListValue();
   useEffect(() => {
     if (rawItems.length !== items.length) {
       handleChange(path, items.length > 0 ? items : undefined);
@@ -12662,9 +12681,20 @@ const PrimitiveArrayControl = props => {
   const getOptionLabel = option => typeof option === 'string' ? option : option.title || option.const;
   const getOptionDescription = option => typeof option === 'string' ? undefined : option.description;
   const removeItem = index => {
+    const itemSchema = schema == null ? void 0 : schema.items;
+    const removedItem = items[index];
+    const itemPath = composePaths(path, `${index}`);
+    if ((itemSchema == null ? void 0 : itemSchema.format) === 'file-urn' && deleteTrigger && removedItem) {
+      var _fileList$itemPath;
+      const allUploadedFiles = Object.values(fileList || {}).flat() || [];
+      const rowFile = (fileList == null || (_fileList$itemPath = fileList[itemPath]) == null ? void 0 : _fileList$itemPath.find(file => (file == null ? void 0 : file.urn) === removedItem)) || allUploadedFiles.find(file => (file == null ? void 0 : file.urn) === removedItem);
+      if (rowFile != null && rowFile.urn) {
+        deleteTrigger(rowFile, itemPath);
+      }
+    }
     const copy = [...items];
     copy.splice(index, 1);
-    handleChange(path, copy);
+    handleChange(path, copy.length > 0 ? copy : undefined);
   };
   const getPrimitiveArrayOptions = schema => {
     const itemSchema = schema == null ? void 0 : schema.items;
@@ -17579,20 +17609,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",
@@ -17603,7 +17679,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",
@@ -17613,7 +17689,7 @@ const NameInputs = ({
         value: firstName || '',
         onChange: detail => handleInputChange(detail.name, detail.value),
         onBlur: detail => {
-          handleRequiredFieldBlur(detail.name);
+          handleBlur(detail.name);
         },
         width: "100%"
       })
@@ -17635,7 +17711,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",
@@ -17645,7 +17721,7 @@ const NameInputs = ({
         value: lastName || '',
         onChange: detail => handleInputChange(detail.name, detail.value),
         onBlur: detail => {
-          handleRequiredFieldBlur(detail.name);
+          handleBlur(detail.name);
         },
         width: "100%"
       })
@@ -17817,6 +17893,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) || '',
@@ -17824,7 +17902,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,
@@ -17834,7 +17912,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);
@@ -17849,9 +17927,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);
@@ -17869,14 +17947,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;
@@ -17917,64 +17994,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.15",
+  "version": "2.60.17",
   "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-27T19:55:39.353Z",
-  "sourceCommit": "c9005bf394764ce1ad7e3af2c39bff2c9b90f254",
+  "generatedAt": "2026-04-29T21:25:28.694Z",
+  "sourceCommit": "4a8e24eeb967cbbf32d54077d2a3aa489e565b67",
   "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>;