@abgov/jsonforms-components 2.67.4 → 2.67.6

package/index.esm.js

@@ -5974,7 +5974,6 @@ const NoneGivenText = styled.span(_t1$2 || (_t1$2 = _$a`
 `));
 const NoneGivenTableText = styled.span(_t10$2 || (_t10$2 = _$a`
   padding-top: var(--goa-space-l);
-  padding-left: var(--goa-space-m);
   color: var(--goa-color-greyscale-700);
   font-style: italic;
 `));
@@ -7363,12 +7362,12 @@ const InnerGoAInputText = props => {
     setLocalValue(isSinField && typeof data === 'string' ? formatSinForDisplay(data) : data);
   }, [data, isSinField]);
   useEffect(() => {
-    if (typeof handleChange === 'function' && hasDefault && !manualInput) {
+    if (typeof handleChange === 'function' && hasDefault && data === undefined && !manualInput) {
       handleChange(props.path, schema.default);
       setLocalValue(schema.default);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [schema.default]);
+  }, [schema.default, data]);
   /* istanbul ignore next */
   useEffect(() => {
     const dataForInput = isSinField && typeof data === 'string' ? formatSinForDisplay(data) : data;
@@ -10037,7 +10036,7 @@ class ListWithDetailControl extends React.Component {
         children: [listTitle && jsx(MarginTop, {
           children: jsxs(ObjectArrayTitle, {
             children: [listTitle, " ", jsx("span", {
-              children: additionalProps.required && '(required)'
+              children: additionalProps.required && ' (required)'
             }), this.state.maxItemsError && jsx("span", {
               style: {
                 color: 'red',
@@ -10521,11 +10520,12 @@ const GoAEmailInput = props => {
   splitErrors[splintIndex] = `${primaryLabel} is required`;
   const finalErrors = splitErrors.join('\n');
   useEffect(() => {
-    if (typeof handleChange === 'function' && (schema == null ? void 0 : schema.default) !== undefined) {
+    if (typeof handleChange === 'function' && (schema == null ? void 0 : schema.default) !== undefined && data === undefined) {
       handleChange(props.path, schema.default);
+      setLocalValue(schema.default);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [schema.default]);
+  }, [schema.default, data]);
   return jsx(Visible, {
     visible: visible,
     children: jsx(JsonFormRegisterProvider, {
@@ -11951,7 +11951,7 @@ const jsonPreviewStyle = {
   overflowX: 'auto'
 };
 function prettify(prop) {
-  return prop.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^./, c => c.toUpperCase());
+  return prop.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^./, c => c.toUpperCase()).trim();
 }
 /**
  * Extract Json data schema name attribute and the ui schema label name.
@@ -12038,13 +12038,12 @@ const renderCellColumn = ({
 }) => {
   const renderWarningCell = error => {
     return jsxs(HilightCellWarning, {
-      children: [renderNoneGivenText(data), jsxs(ObjectArrayWarningIconDiv, {
+      children: [renderNoneGivenText(data), error && jsxs(ObjectArrayWarningIconDiv, {
         children: [jsx(GoabIcon, {
           type: "warning",
           title: "warning",
           size: "small",
           theme: "filled",
-          ml: "2xs",
           mt: "2xs"
         }), error ? error : '']
       })]
@@ -12053,6 +12052,8 @@ const renderCellColumn = ({
   if (data === undefined && isRequired || error !== '' && error !== undefined) {
     const message = error || (isRequired && data === undefined ? 'Required' : data);
     return renderWarningCell(message);
+  } else if (data === undefined && !isRequired) {
+    return renderWarningCell('');
   } else if (data !== undefined && isRequired && error) {
     return renderWarningCell(error);
   }
@@ -12104,6 +12105,29 @@ const renderCellColumn = ({
   }
   return null;
 };
+const createHumanizeError = (error, schema, uischema) => {
+  let humanMessage;
+  if (error) {
+    try {
+      humanMessage = humanizeAjvError(error, schema, uischema);
+      if (typeof humanMessage === 'string' && (humanMessage.includes('must have required property') || humanMessage.includes(REQUIRED_PROPERTY_ERROR))) {
+        const propertyMatch = humanMessage.match(/'([^']+)'/);
+        if (propertyMatch && propertyMatch[1]) {
+          humanMessage = prettify(propertyMatch[1]) + ' is required';
+        }
+      }
+    } catch (err) {
+      const raw = error.message;
+      const propertyMatch = raw == null ? void 0 : raw.match(/'([^']+)'/);
+      if (propertyMatch && propertyMatch[1]) {
+        humanMessage = prettify(propertyMatch[1]) + ' is required';
+      } else {
+        humanMessage = raw;
+      }
+    }
+  }
+  return humanMessage;
+};
 
 const _excluded$4 = ["label", "path", "schema", "rootSchema", "uischema", "errors", "visible", "enabled", "cells", "data", "config", "isStepperReview", "handleChange", "removeItems"];
 const GenerateRows = (Cell, schema, rowPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data, errors) => {
@@ -12268,7 +12292,6 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
                 return e.instancePath === fieldPath || e.instancePath === rowPathMatch && msg.includes(key) || e.instancePath === rowPathMatch && requiredProperty === key;
               });
               const isEmptyValue = value === undefined || value === null || value === '';
-              if (isEmptyValue && !isRequiredField && !fieldError) return null;
               let reviewError = '';
               if (fieldError) {
                 const raw = fieldError.message || '';
@@ -12280,7 +12303,7 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
                 style: {
                   display: 'flex',
                   marginBottom: '0.5rem',
-                  alignItems: 'center'
+                  alignItems: 'flex-start'
                 },
                 "data-testid": `#/properties/${key}-input-${i}-row`,
                 children: [jsxs("strong", {
@@ -12319,7 +12342,7 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
                 const currentProperty = properties[value];
                 return jsx("th", {
                   children: jsxs("p", {
-                    children: [(currentProperty == null ? void 0 : currentProperty.title) || index, (required == null ? void 0 : required.includes(value)) && jsx(RequiredSpan, {
+                    children: [(currentProperty == null ? void 0 : currentProperty.title) || index, ' ', (required == null ? void 0 : required.includes(value)) && jsx(RequiredSpan, {
                       children: "(required)"
                     })]
                   })
@@ -12345,30 +12368,8 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
                     var _y$message;
                     return (y == null || (_y$message = y.message) == null ? void 0 : _y$message.includes(element)) || y.instancePath.includes(element);
                   });
-                  function prettify(prop) {
-                    return prop.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^./, c => c.toUpperCase());
-                  }
                   // Create a human-friendly error message for rendering
-                  let humanMessage;
-                  if (error) {
-                    try {
-                      humanMessage = humanizeAjvError(error, schema, uischema);
-                      if (typeof humanMessage === 'string' && (humanMessage.includes('must have required property') || humanMessage.includes(REQUIRED_PROPERTY_ERROR))) {
-                        const propertyMatch = humanMessage.match(/'([^']+)'/);
-                        if (propertyMatch && propertyMatch[1]) {
-                          humanMessage = prettify(propertyMatch[1]) + ' is required';
-                        }
-                      }
-                    } catch (err) {
-                      const raw = error.message;
-                      const propertyMatch = raw == null ? void 0 : raw.match(/'([^']+)'/);
-                      if (propertyMatch && propertyMatch[1]) {
-                        humanMessage = prettify(propertyMatch[1]) + ' is required';
-                      } else {
-                        humanMessage = raw;
-                      }
-                    }
-                  }
+                  let humanMessage = createHumanizeError(error, schema, uischema);
                   if (error != null && (_error$message = error.message) != null && _error$message.includes('must NOT have fewer') && required.find(r => r === schemaName) && (isEmptyBoolean(schema, currentData) || isEmptyNumber(schema, currentData))) {
                     humanMessage = `${capitalizeFirstLetter(schemaName)} is required`;
                   }
@@ -12715,7 +12716,7 @@ const ObjectArrayControl = props => {
             alignItems: 'center'
           },
           children: [jsxs(ReviewLabel, {
-            children: [listTitle, " ", jsx("span", {
+            children: [listTitle, jsx("span", {
               children: additionalProps.required && '(required)'
             }), maxItemsError && jsx("span", {
               style: {
@@ -12755,7 +12756,7 @@ const ObjectArrayControl = props => {
     "data-testid": "jsonforms-object-list-wrapper",
     children: [jsxs(ToolBarHeader, {
       children: [listTitle && jsxs(ObjectArrayTitle, {
-        children: [listTitle, " ", jsx("span", {
+        children: [listTitle, jsx("span", {
           children: additionalProps.required && '(required)'
         }), maxItemsError && jsx("span", {
           style: {

package/package.json

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

package/renderer-catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-06-18T23:02:38.773Z",
-  "sourceCommit": "a11893a6b14d54431cea0c80f6b76541409ac67b",
+  "generatedAt": "2026-06-23T21:16:03.119Z",
+  "sourceCommit": "a83b527a2f034d3e3d4699630165799b4f644517",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 33,
   "renderers": [

package/src/lib/Controls/ObjectArray/ObjectListControlUtils.d.ts

@@ -1,5 +1,8 @@
 import { DataObject, NestedItem, RenderCellColumnProps } from './ObjectListControlTypes';
+import { ErrorObject } from 'ajv';
+import { JsonSchema, UISchemaElement } from '@jsonforms/core';
 export declare const extractNestedFields: (properties: DataObject, propertyKeys: string[]) => Record<string, NestedItem>;
+export declare function prettify(prop: string): string;
 /**
  * Extract Json data schema name attribute and the ui schema label name.
  * @param obj
@@ -15,3 +18,4 @@ export interface TableProps {
 export declare const isObjectArrayEmpty: (currentData: string) => boolean;
 export declare const renderNoneGivenText: (data: string | undefined) => string | import("react/jsx-runtime").JSX.Element;
 export declare const renderCellColumn: ({ data, error, errors, index, rowPath, element, isRequired, }: RenderCellColumnProps) => string | import("react/jsx-runtime").JSX.Element | null;
+export declare const createHumanizeError: (error: ErrorObject, schema: JsonSchema, uischema: UISchemaElement) => string | undefined;