@abgov/jsonforms-components 2.44.1 → 2.44.2

package/index.esm.js

@@ -3177,7 +3177,6 @@ const checkFieldValidity = props => {
     errors: ajvErrors,
     required,
     label,
-    uischema,
     schema
   } = props;
   const labelToUpdate = label;
@@ -3561,7 +3560,8 @@ styled.div(_t$c || (_t$c = _$b`
 `));
 const Visible = styled.div(_t2$7 || (_t2$7 = _$b`
   display: ${0};
-`), p => p.visible ? 'initial' : 'none');
+  width: 100%;
+`), p => p.visible ? 'block' : 'none');
 
 const ADD_REGISTER_DATA_ACTION = 'jsonforms/register/data/add';
 const ADD_NO_ANONYMOUS_ACTION = 'jsonforms/register/no_anonymous';
@@ -5189,16 +5189,21 @@ let _$a = t => t,
   _t5$4,
   _t6$3,
   _t7$2,
-  _t8$2;
+  _t8$2,
+  _t9$2,
+  _t0$2,
+  _t1$2,
+  _t10$2;
 const FormFieldWrapper = styled.div(_t$b || (_t$b = _$a`
   margin-bottom: var(--goa-space-l);
 `));
 const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$a`
-  display: inline-flex;
+  display: flex;
   align-items: flex-start;
-  gap: 0.25rem;
-  font-size: var(--goa-font-size-2);
-  color: var(--goa-color-interactive-error);
+  gap: var(--goa-space-2xs);
+  font: var(--goa-form-item-message-typography);
+  color: var(--goa-form-item-error-message-color);
+  margin-top: var(--goa-form-item-message-margin-top);
 `));
 const RequiredTextLabel = styled.label(_t3$5 || (_t3$5 = _$a`
   color: var(--goa-color-greyscale-700);
@@ -5219,15 +5224,39 @@ const PageReviewValueCol = styled.td(_t5$4 || (_t5$4 = _$a`
   text-align: left;
   vertical-align: top;
 `));
+const PageReviewContainer = styled.td(_t6$3 || (_t6$3 = _$a`
+  padding: 12px 0px;
+  border-bottom: 1px solid #ccc;
+  width: 100%;
+  vertical-align: top;
+`));
+const ReviewHeader = styled.div(_t7$2 || (_t7$2 = _$a`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`));
+const ReviewLabel = styled.div(_t8$2 || (_t8$2 = _$a`
+  font-weight: var(--goa-font-weight-bold);
+  font-size: var(--goa-font-size-4);
+  line-height: var(--goa-line-height-3);
+  color: var(--goa-color-text-default);
+`));
+const ReviewValue = styled.div(_t9$2 || (_t9$2 = _$a`
+  margin-top: var(--goa-space-m);
+  color: var(--goa-color-text-default);
+  font-size: var(--goa-font-size-4);
+  line-height: var(--goa-line-height-3);
+`));
 //Check and unchecked are different heights otherwise
-const CheckboxWrapper = styled.div(_t6$3 || (_t6$3 = _$a`
+const CheckboxWrapper = styled.div(_t0$2 || (_t0$2 = _$a`
   min-height: 28px;
 `));
-styled.h4(_t7$2 || (_t7$2 = _$a`
+styled.h4(_t1$2 || (_t1$2 = _$a`
   margin: 0 0 0.25rem 0;
   fontsize: larger;
 `));
-styled.h4(_t8$2 || (_t8$2 = _$a`
+styled.h4(_t10$2 || (_t10$2 = _$a`
   border-bottom: 1px solid #ddd;
 `));
 
@@ -6306,14 +6335,14 @@ const stepperReducer = (state, action) => {
         } = action.payload;
         ajv.validate(schema, data);
         const newCategories = state.categories.map(cat => {
-          var _ajv$errors;
           // ✅ compare against cat.id, not the index
           if (cat.id !== id) {
             return cat;
           }
+          const filteredErrors = ajv.errors && ajv.errors.filter(error => (error == null ? void 0 : error.data) != null);
           const status = getStepStatus({
             scopes: cat.scopes,
-            errors: (_ajv$errors = ajv.errors) != null ? _ajv$errors : [],
+            errors: filteredErrors != null ? filteredErrors : [],
             schema
           });
           return Object.assign({}, cat, {
@@ -6354,7 +6383,7 @@ const stepperReducer = (state, action) => {
 };
 
 const createStepperContextInitData = props => {
-  var _ajv$errors, _uischema$options, _uischema$options2, _categorization$eleme;
+  var _uischema$options, _uischema$options2, _categorization$eleme;
   const {
     uischema,
     data,
@@ -6364,18 +6393,18 @@ const createStepperContextInitData = props => {
     path
   } = props;
   const categorization = uischema;
+  const filteredErrors = ajv.errors && ajv.errors.filter(error => (error == null ? void 0 : error.data) != null);
   // run validation once, capture errors
   const valid = ajv.validate(schema, data || {});
-  (_ajv$errors = ajv.errors) != null ? _ajv$errors : [];
   const isPage = (uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.variant) === 'pages';
   const isCacheStatus = (_uischema$options2 = uischema.options) == null ? void 0 : _uischema$options2.cacheStatus;
   isCacheStatus && getIsVisitFromLocalStorage() || [];
   const categories = (_categorization$eleme = categorization.elements) == null ? void 0 : _categorization$eleme.map((c, id) => {
-    var _ajv$errors2, _deriveLabelForUISche;
+    var _deriveLabelForUISche;
     const scopes = pickPropertyValues(c, 'scope', 'ListWithDetail');
     const status = getStepStatus({
       scopes,
-      errors: (_ajv$errors2 = ajv.errors) != null ? _ajv$errors2 : [],
+      errors: filteredErrors != null ? filteredErrors : [],
       schema
     });
     return {
@@ -8254,7 +8283,7 @@ const GoInputBaseReview = props => jsx(GoAInputBaseControl, Object.assign({}, pr
 const GoAInputBaseReviewControl = withJsonFormsControlProps(GoInputBaseReview);
 
 const GoAInputBaseTableReview = props => {
-  var _uischema$options3;
+  var _uischema$options, _jsonForms$core, _activeError, _activeError2, _uischema$options4;
   const {
     data,
     uischema,
@@ -8263,23 +8292,28 @@ const GoAInputBaseTableReview = props => {
     path,
     errors,
     enabled,
-    cells
+    cells,
+    required
   } = props;
   const context = useContext(JsonFormsStepperContext);
   const jsonForms = useJsonForms();
-  const labelToUpdate = convertToSentenceCase(getLabelText(uischema.scope, label || ''));
+  let labelToUpdate = (_uischema$options = uischema.options) != null && _uischema$options.reviewLabel ? uischema.options.reviewLabel : convertToSentenceCase(getLabelText(uischema.scope, label || ''));
+  if (labelToUpdate === '') {
+    const scopeName = uischema.scope ? getLastSegmentFromPointer(uischema.scope) : '';
+    labelToUpdate = convertToSentenceCase(scopeName);
+  }
   let reviewText = data;
   const isBoolean = typeof data === 'boolean';
   if (isBoolean) {
-    var _uischema$options, _uischema$options2;
+    var _uischema$options2, _uischema$options3;
     let checkboxLabel = '';
-    if ((_uischema$options = uischema.options) != null && (_uischema$options = _uischema$options.text) != null && _uischema$options.trim()) {
+    if ((_uischema$options2 = uischema.options) != null && (_uischema$options2 = _uischema$options2.text) != null && _uischema$options2.trim()) {
       checkboxLabel = uischema.options.text.trim();
     } else if (uischema.scope && uischema.scope.startsWith('#/')) {
       const fallbackLabel = getLastSegmentFromPointer(uischema.scope);
       checkboxLabel = fallbackLabel.charAt(0).toUpperCase() + fallbackLabel.slice(1);
     }
-    if (((_uischema$options2 = uischema.options) == null ? void 0 : _uischema$options2.radio) === true) {
+    if (((_uischema$options3 = uischema.options) == null ? void 0 : _uischema$options3.radio) === true) {
       reviewText = data ? `Yes` : `No`;
     } else {
       if (label !== '' || typeof label === 'boolean') {
@@ -8289,34 +8323,76 @@ const GoAInputBaseTableReview = props => {
       }
     }
   }
+  // Helper to extract errors manually from global state, bypassing "touched" filter
+  const normalizePath = p => p.replace(/\[(\d+)\]/g, '.$1').replace(/^\./, '').replace(/\//g, '.');
+  const findMatchingError = currentErrors => {
+    if (!currentErrors) return undefined;
+    const normalizedPropPath = normalizePath(path || '');
+    for (const e of currentErrors) {
+      var _e$params2;
+      const errorPath = normalizePath(e.dataPath || e.instancePath || '');
+      if (errorPath === normalizedPropPath) {
+        return e.message;
+      }
+      if (e.keyword === 'required') {
+        var _e$params;
+        const missing = (_e$params = e.params) == null ? void 0 : _e$params.missingProperty;
+        if (missing) {
+          const missingPath = errorPath ? `${errorPath}.${missing}` : missing;
+          if (missingPath === normalizedPropPath) {
+            return e.message;
+          }
+        }
+      }
+      if (e.keyword === 'errorMessage' && (_e$params2 = e.params) != null && _e$params2.errors) {
+        const nested = findMatchingError(e.params.errors);
+        if (nested) return e.message;
+      }
+    }
+    return undefined;
+  };
+  let activeError = findMatchingError((_jsonForms$core = jsonForms.core) == null ? void 0 : _jsonForms$core.errors);
+  if (required && (data === undefined || data === null || data === '') && !activeError) {
+    activeError = `${labelToUpdate} is required`;
+  } else if ((_activeError = activeError) != null && _activeError.includes('is a required property') || (_activeError2 = activeError) != null && _activeError2.includes('must have required property')) {
+    activeError = `${labelToUpdate} is required`;
+  }
   // eslint-disable-next-line
-  const stepId = (_uischema$options3 = uischema.options) == null ? void 0 : _uischema$options3.stepId;
-  return jsxs("tr", {
+  const stepId = (_uischema$options4 = uischema.options) == null ? void 0 : _uischema$options4.stepId;
+  return jsx("tr", {
     "data-testid": `input-base-table-${label}-row`,
-    children: [jsx(PageReviewNameCol, {
-      children: labelToUpdate && jsx("strong", {
-        children: labelToUpdate
-      })
-    }), jsx(PageReviewValueCol, {
-      children: typeof reviewText === 'string' || typeof reviewText === 'number' ? jsx("div", {
-        children: reviewText
-      }) : jsx(JsonFormsDispatch, {
-        "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
-        schema: schema,
-        uischema: uischema,
-        enabled: enabled,
-        renderers: jsonForms.renderers,
-        cells: cells
-      })
-    }), jsx("td", {
-      className: "goa-table-number-col",
-      children: stepId !== undefined && jsx(GoabButton, {
-        type: "tertiary",
-        size: "compact",
-        onClick: () => context == null ? void 0 : context.goToPage(stepId),
-        children: "Change"
-      })
-    })]
+    children: jsxs(PageReviewContainer, {
+      colSpan: 3,
+      children: [jsxs(ReviewHeader, {
+        children: [jsxs(ReviewLabel, {
+          children: [labelToUpdate, required && jsx(RequiredTextLabel, {
+            children: " (required)"
+          })]
+        }), stepId !== undefined && jsx(GoabButton, {
+          type: "tertiary",
+          size: "compact",
+          onClick: () => context == null ? void 0 : context.goToPage(stepId),
+          children: "Change"
+        })]
+      }), jsxs(ReviewValue, {
+        children: [typeof reviewText === 'string' || typeof reviewText === 'number' ? jsx("div", {
+          "data-testid": `review-value-${label}`,
+          children: reviewText
+        }) : jsx(JsonFormsDispatch, {
+          "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
+          schema: schema,
+          uischema: uischema,
+          enabled: enabled,
+          renderers: jsonForms.renderers,
+          cells: cells
+        }), activeError && jsxs(WarningIconDiv, {
+          children: [jsx(GoabIcon, {
+            type: "warning",
+            size: "small"
+          }), activeError]
+        })]
+      })]
+    })
   });
 };
 const GoAInputBaseTableReviewControl = withJsonFormsControlProps(GoAInputBaseTableReview);
@@ -9125,28 +9201,48 @@ const FullNameControlReview = props => {
   var _props$uischema, _props$data, _props$data2, _props$data3, _props$data4;
   const context = useContext(JsonFormsStepperContext);
   const stepId = (_props$uischema = props.uischema) == null || (_props$uischema = _props$uischema.options) == null ? void 0 : _props$uischema.stepId;
-  const renderRow = (label, value, testId) => jsxs("tr", {
-    children: [jsx(PageReviewNameCol, {
-      children: jsx("strong", {
-        children: label
-      })
-    }), jsx(PageReviewValueCol, {
-      children: jsx("div", {
-        "data-testid": testId,
-        children: value
-      })
-    }), jsx("td", {
-      className: "goa-table-width-limit",
-      children: jsx(GoabButton, {
-        type: "tertiary",
-        size: "compact",
-        onClick: () => context == null ? void 0 : context.goToPage(stepId),
-        children: "Change"
-      })
-    })]
+  const {
+    label,
+    errors,
+    required
+  } = props;
+  const renderRow = (label, value, testId) => jsx("tr", {
+    children: jsxs(PageReviewContainer, {
+      colSpan: 3,
+      children: [jsxs(ReviewHeader, {
+        children: [jsx(ReviewLabel, {
+          children: label
+        }), jsx(GoabButton, {
+          type: "tertiary",
+          size: "compact",
+          onClick: () => context == null ? void 0 : context.goToPage(stepId),
+          children: "Change"
+        })]
+      }), jsx(ReviewValue, {
+        children: jsx("div", {
+          "data-testid": testId,
+          children: value
+        })
+      })]
+    })
   });
   return jsxs(Fragment, {
-    children: [renderRow('First name', (_props$data = props.data) == null ? void 0 : _props$data.firstName, `firstName-control-${props.id}`), ((_props$data2 = props.data) == null ? void 0 : _props$data2.middleName) && renderRow('Middle name', (_props$data3 = props.data) == null ? void 0 : _props$data3.middleName, `middleName-control-${props.id}`), renderRow('Last name', (_props$data4 = props.data) == null ? void 0 : _props$data4.lastName, `lastName-control-${props.id}`)]
+    children: [jsx("tr", {
+      "data-testid": "full-name-header",
+      children: jsxs(PageReviewContainer, {
+        colSpan: 3,
+        children: [jsxs(ReviewLabel, {
+          children: [label, required && jsx(RequiredTextLabel, {
+            children: " (required)"
+          })]
+        }), errors && jsxs(WarningIconDiv, {
+          children: [jsx(GoabIcon, {
+            type: "warning",
+            size: "small"
+          }), errors != null && errors.includes('is a required property') ? `${label} is required` : errors]
+        })]
+      })
+    }), renderRow('First name', (_props$data = props.data) == null ? void 0 : _props$data.firstName, `firstName-control-${props.id}`), ((_props$data2 = props.data) == null ? void 0 : _props$data2.middleName) && renderRow('Middle name', (_props$data3 = props.data) == null ? void 0 : _props$data3.middleName, `middleName-control-${props.id}`), renderRow('Last name', (_props$data4 = props.data) == null ? void 0 : _props$data4.lastName, `lastName-control-${props.id}`)]
   });
 };
 const GoAInputBaseFullNameControlReview = withJsonFormsAllOfProps(FullNameControlReview);
@@ -9673,9 +9769,10 @@ const renderCellColumn = ({
     });
   };
   if (data === undefined && isRequired || error !== '' && error !== undefined) {
-    return renderWarningCell(data);
+    const message = error || (isRequired && data === undefined ? 'Required' : data);
+    return renderWarningCell(message);
   } else if (data !== undefined && isRequired && error) {
-    return renderWarningCell(data);
+    return renderWarningCell(error);
   }
   const path = `/${rowPath}/${index}/${element}/${index === 0 ? index : index - 1}`;
   const nestedErrors = errors == null ? void 0 : errors.filter(e => e.instancePath.includes(path));
@@ -9685,6 +9782,10 @@ const renderCellColumn = ({
   } else if (typeof data === 'object' || Array.isArray(data)) {
     const result = Object.keys(data);
     if (!isRequired && nestedErrors.length === 0) {
+      if ('year' in data && 'month' in data && 'day' in data) {
+        const dateObj = data;
+        return `${dateObj.year}-${dateObj.month}-${dateObj.day}`;
+      }
       return jsx("pre", {
         children: JSON.stringify(data, null, 2)
       });
@@ -9761,8 +9862,11 @@ const EmptyList$1 = ({
   numColumns,
   noDataMessage,
   translations
-}) => jsx(GoabGrid, {
-  minChildWidth: "30ch",
+}) => jsx("div", {
+  style: {
+    width: '100%',
+    padding: '1rem 0'
+  },
   children: jsx(TextCenter, {
     children: jsx("b", {
       children: noDataMessage
@@ -9814,6 +9918,11 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
     properties && Object.keys(properties).forEach(item => {
       if (Object.keys(tableKeys).includes(item)) {
         tempTableKeys[item] = tableKeys[item];
+      } else {
+        // If the property is not in the tableKeys (e.g. it was a nested object in the UI schema),
+        // we still need a header for it to maintain alignment.
+        // Use the property title from the schema, or capitalize the property name.
+        tempTableKeys[item] = properties[item].title || capitalizeFirstLetter(item);
       }
     });
     tableKeys = tempTableKeys;
@@ -9864,6 +9973,10 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
             }, 0)
           }), jsx("tbody", {
             children: range(count || 0).map((num, i) => {
+              // Skip rendering empty rows in review mode
+              if (isInReview === true && (data === undefined || data[num] === undefined || Object.keys(data[num]).length === 0)) {
+                return null;
+              }
               const errorRow = errors == null ? void 0 : errors.find(error => error.instancePath.includes(`/${props.rowPath.replace(/\./g, '/')}/${i}`));
               return jsxs("tr", {
                 children: [Object.keys(properties).map((element, ix) => {
@@ -9889,7 +10002,7 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
                           display: 'block'
                         },
                         children: renderCellColumn({
-                          data: currentData ? String(currentData) : undefined,
+                          data: currentData !== '' && currentData !== null && currentData !== undefined ? currentData : undefined,
                           error: error == null ? void 0 : error.message,
                           isRequired: (_required$includes = required == null ? void 0 : required.includes(tableKeys[element])) != null ? _required$includes : false,
                           errors: errors !== undefined ? errors : [],
@@ -10008,7 +10121,11 @@ const NonEmptyRowComponent$1 = ({
   handleChange
 }) => {
   return jsx("div", {
-    children: enabled ? jsx(GoabContainer, {
+    children: enabled ? isInReview ? jsx("div", {
+      children: jsx("div", {
+        children: GenerateRows$1(NonEmptyCell$1, schema, childPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data)
+      })
+    }) : jsx(GoabContainer, {
       children: jsx("div", {
         children: jsx("div", {
           children: GenerateRows$1(NonEmptyCell$1, schema, childPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data)
@@ -10062,11 +10179,12 @@ const ObjectArrayList$1 = ({
   }, 0);
 };
 const ObjectArrayControl = props => {
-  var _uischema$options5, _registers$categories, _registers$categories2;
+  var _uischema$options5, _registers$categories3, _registers$categories4;
   const [registers, dispatch] = useReducer(objectListReducer, initialState);
   const [open, setOpen] = useState(false);
   const [rowData, setRowData] = useState(0);
   const [maxItemsError, setMaxItemsError] = useState('');
+  const context = useContext(JsonFormsStepperContext);
   const {
       label,
       path,
@@ -10197,22 +10315,70 @@ const ObjectArrayControl = props => {
   const listTitle = label || ((_uischema$options5 = uischema.options) == null ? void 0 : _uischema$options5.title);
   const isInReview = isStepperReview === true;
   const isListWithDetail = controlElement.type === 'ListWithDetail';
-  return jsxs(Visible, {
+  if (isInReview) {
+    var _uischema$options6, _registers$categories, _registers$categories2;
+    return jsx("tr", {
+      children: jsxs(PageReviewContainer, {
+        colSpan: 3,
+        children: [listTitle ? isListWithDetail && additionalProps.required && (data === null || data === undefined) ? jsx("b", {
+          children: jsxs(ListWithDetailWarningIconDiv, {
+            children: [jsx(GoabIcon, {
+              type: "warning",
+              title: "warning",
+              size: "small",
+              theme: "filled",
+              ml: "2xs",
+              mt: "2xs"
+            }), listTitle, " is required."]
+          })
+        }) : jsxs(ReviewHeader, {
+          style: {
+            width: '100%',
+            display: 'grid',
+            gridTemplateColumns: '1fr auto',
+            alignItems: 'center'
+          },
+          children: [jsxs(ReviewLabel, {
+            children: [listTitle, " ", jsx("span", {
+              children: additionalProps.required && '(required)'
+            }), maxItemsError && jsx("span", {
+              style: {
+                color: 'red',
+                marginLeft: '1rem'
+              },
+              children: maxItemsError
+            })]
+          }), ((_uischema$options6 = uischema.options) == null ? void 0 : _uischema$options6.stepId) !== undefined && jsx(GoabButton, {
+            type: "tertiary",
+            size: "compact",
+            onClick: () => {
+              var _uischema$options7;
+              return context == null ? void 0 : context.goToPage((_uischema$options7 = uischema.options) == null ? void 0 : _uischema$options7.stepId);
+            },
+            children: "Change"
+          })]
+        }) : null, jsx(ObjectArrayList$1, Object.assign({
+          path: path,
+          schema: schema,
+          uischema: uischema,
+          enabled: enabled,
+          openDeleteDialog: openDeleteDialog,
+          translations: {},
+          count: ((_registers$categories = registers.categories[path]) == null ? void 0 : _registers$categories.count) || Object.keys(data || []).length,
+          data: data || ((_registers$categories2 = registers.categories[path]) == null ? void 0 : _registers$categories2.data),
+          cells: cells,
+          config: config,
+          isInReview: isInReview,
+          handleChange: handleChangeWithData
+        }, additionalProps))]
+      })
+    });
+  }
+  const content = jsxs(Visible, {
     visible: visible,
     "data-testid": "jsonforms-object-list-wrapper",
     children: [jsxs(ToolBarHeader, {
-      children: [isInReview ? listTitle ? isListWithDetail && additionalProps.required && (data === null || data === undefined) ? jsx("b", {
-        children: jsxs(ListWithDetailWarningIconDiv, {
-          children: [jsx(GoabIcon, {
-            type: "warning",
-            title: "warning",
-            size: "small",
-            theme: "filled",
-            ml: "2xs",
-            mt: "2xs"
-          }), listTitle, " is required."]
-        })
-      }) : jsxs("b", {
+      children: [listTitle && jsxs(ObjectArrayTitle, {
         children: [listTitle, " ", jsx("span", {
           children: additionalProps.required && '(required)'
         }), maxItemsError && jsx("span", {
@@ -10222,17 +10388,7 @@ const ObjectArrayControl = props => {
           },
           children: maxItemsError
         })]
-      }) : null : listTitle && jsxs(ObjectArrayTitle, {
-        children: [listTitle, " ", jsx("span", {
-          children: additionalProps.required && '(required)'
-        }), maxItemsError && jsx("span", {
-          style: {
-            color: 'red',
-            marginLeft: '1rem'
-          },
-          children: maxItemsError
-        })]
-      }), !isInReview && jsx(ObjectArrayToolBar, {
+      }), jsx(ObjectArrayToolBar, {
         errors: errors,
         label: label,
         addItem: (a, b) => () => addItem(a, b),
@@ -10251,8 +10407,8 @@ const ObjectArrayControl = props => {
         enabled: enabled,
         openDeleteDialog: openDeleteDialog,
         translations: {},
-        count: ((_registers$categories = registers.categories[path]) == null ? void 0 : _registers$categories.count) || Object.keys(data || []).length,
-        data: data || ((_registers$categories2 = registers.categories[path]) == null ? void 0 : _registers$categories2.data),
+        count: ((_registers$categories3 = registers.categories[path]) == null ? void 0 : _registers$categories3.count) || Object.keys(data || []).length,
+        data: data || ((_registers$categories4 = registers.categories[path]) == null ? void 0 : _registers$categories4.data),
         cells: cells,
         config: config,
         isInReview: isInReview,
@@ -10266,6 +10422,7 @@ const ObjectArrayControl = props => {
       })]
     })]
   });
+  return content;
 };
 
 const ArrayControl = props => {
@@ -10298,16 +10455,14 @@ const ArrayControlReview = props => {
   const {
     visible
   } = props;
-  return jsx(Visible, {
-    visible: visible,
-    children: jsx(ObjectArrayControl, Object.assign({
-      arraySchema: {}
-    }, props, {
-      addItem: () => () => {},
-      isStepperReview: true,
-      enabled: true
-    }))
-  });
+  if (!visible) return null;
+  return jsx(ObjectArrayControl, Object.assign({
+    arraySchema: {}
+  }, props, {
+    addItem: () => () => {},
+    isStepperReview: true,
+    enabled: true
+  }));
 };
 const GoAArrayControlRenderer = withJsonFormsControlProps(ArrayControlBase);
 const GoAArrayControlReviewRenderer = withJsonFormsControlProps(ArrayControlReview);
@@ -10831,7 +10986,6 @@ const LeftTab = ({
         children: [jsx(TabName, {
           children: name
         }), enabled ? jsx(Trash, {
-          role: "trash button",
           children: jsx(GoabIconButton, {
             disabled: !enabled,
             icon: "trash",
@@ -11479,8 +11633,10 @@ const AddressLoopUpControlTableReview = props => {
   const {
     data,
     schema,
-    uischema
+    uischema,
+    path
   } = props;
+  const jsonForms = useJsonForms();
   // eslint-disable-next-line
   const stepId = (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.stepId;
   const formStepperCtx = useContext(JsonFormsStepperContext);
@@ -11526,36 +11682,80 @@ const AddressLoopUpControlTableReview = props => {
     label: 'Yukon'
   }];
   const provinceLabel = isAlbertaAddress ? 'Alberta' : ((_provinces$find = provinces.find(p => p.value === (data == null ? void 0 : data.subdivisionCode))) == null ? void 0 : _provinces$find.label) || (data == null ? void 0 : data.subdivisionCode);
-  const renderRow = (label, value) => jsxs("tr", {
-    children: [jsx(PageReviewNameCol, {
-      children: label
-    }), jsx(PageReviewNameCol, {
-      children: value
-    }), jsx("td", {
-      className: "goa-table-width-limit",
-      children: jsx(GoabButton, {
-        type: "tertiary",
-        size: "compact",
-        onClick: () => formStepperCtx == null ? void 0 : formStepperCtx.goToPage(stepId),
-        children: "Change"
+  const getError = propName => {
+    var _findMatchingError, _jsonForms$core;
+    const normalizePath = p => p.replace(/\[(\d+)\]/g, '.$1').replace(/^\./, '').replace(/\//g, '.');
+    // We need to return the message of the MATCHED error, but findError above returns boolean (mostly) or message if I refactor.
+    // Let's refactor to return the error object or message.
+    const findMatchingError = errors => {
+      if (!errors) return undefined;
+      for (const e of errors) {
+        var _e$params, _e$params2;
+        const rawErrorPath = e.dataPath || e.instancePath || '';
+        const errorPath = normalizePath(rawErrorPath);
+        const currentPath = normalizePath(path || '');
+        const dotPath = currentPath ? `${currentPath}.${propName}` : propName;
+        if (e.keyword === 'errorMessage' && (_e$params = e.params) != null && _e$params.errors) {
+          const nested = findMatchingError(e.params.errors);
+          if (nested) return e; // Return the wrapper error (contains the custom message)
+        }
+        if (errorPath === dotPath) return e;
+        const isRequiredError = e.keyword === 'required';
+        const missingProperty = (_e$params2 = e.params) == null ? void 0 : _e$params2.missingProperty;
+        if (isRequiredError && missingProperty === propName) {
+          if (errorPath === currentPath) return e;
+        }
+      }
+      return undefined;
+    };
+    return (_findMatchingError = findMatchingError((_jsonForms$core = jsonForms.core) == null ? void 0 : _jsonForms$core.errors)) == null ? void 0 : _findMatchingError.message;
+  };
+  const isRequired = propName => {
+    var _schema$required;
+    return schema == null || (_schema$required = schema.required) == null ? void 0 : _schema$required.includes(propName);
+  };
+  const renderRow = (label, value, propName, showButton = true) => {
+    var _error, _error2;
+    let error = getError(propName);
+    const required = isRequired(propName);
+    if (required && !value && !error) {
+      error = `${label} is required`;
+    }
+    return jsx("tr", {
+      children: jsxs(PageReviewContainer, {
+        colSpan: 3,
+        children: [jsxs(ReviewHeader, {
+          children: [jsxs(ReviewLabel, {
+            children: [label, required && jsx(RequiredTextLabel, {
+              children: " (required)"
+            })]
+          }), showButton && jsx(GoabButton, {
+            type: "tertiary",
+            size: "compact",
+            onClick: () => formStepperCtx == null ? void 0 : formStepperCtx.goToPage(stepId),
+            children: "Change"
+          })]
+        }), jsxs(ReviewValue, {
+          children: [value, error && jsxs(WarningIconDiv, {
+            children: [jsx(GoabIcon, {
+              type: "warning",
+              size: "small"
+            }), (_error = error) != null && _error.includes('is a required property') || (_error2 = error) != null && _error2.includes('required property') ? `${label} is required` : error]
+          })]
+        })]
       })
-    })]
-  });
+    });
+  };
   return jsxs(Fragment, {
-    children: [jsxs("tr", {
+    children: [jsx("tr", {
       "data-testid": "address-lookup-table-review",
-      children: [jsx(PageReviewNameCol, {
-        children: jsx("strong", {
+      children: jsx(PageReviewContainer, {
+        colSpan: 3,
+        children: jsx(ReviewLabel, {
           children: `${isAlbertaAddress ? 'Alberta' : 'Canada'} postal address`
         })
-      }), jsx("td", {
-        style: {
-          verticalAlign: 'top'
-        }
-      }), jsx("td", {
-        className: "goa-table-width-limit"
-      })]
-    }), renderRow('Address line 1', data == null ? void 0 : data.addressLine1), (data == null ? void 0 : data.addressLine2) && renderRow('Address line 2', data.addressLine2), renderRow('City', data == null ? void 0 : data.municipality), renderRow('Postal Code', data == null ? void 0 : data.postalCode), renderRow('Province', provinceLabel), renderRow('Country', 'Canada')]
+      })
+    }), renderRow('Address line 1', data == null ? void 0 : data.addressLine1, 'addressLine1'), (data == null ? void 0 : data.addressLine2) && renderRow('Address line 2', data.addressLine2, 'addressLine2'), renderRow('City', data == null ? void 0 : data.municipality, 'municipality'), renderRow('Postal Code', data == null ? void 0 : data.postalCode, 'postalCode'), renderRow('Province', provinceLabel, 'subdivisionCode'), renderRow('Country', 'Canada', 'country', false)]
   });
 };
 
@@ -12167,10 +12367,10 @@ const GoABaseTableReviewRenderers$1 = [
   renderer: GoAInputBaseTableReviewControl
 }, {
   tester: GoAArrayControlTester,
-  renderer: GoAInputBaseTableReviewControl
+  renderer: GoAArrayControlReviewRenderer
 }, {
   tester: GoAListWithDetailsTester,
-  renderer: GoAInputBaseTableReviewControl
+  renderer: GoAArrayControlReviewRenderer
 }, {
   tester: FullNameDobTester,
   renderer: GoAInputBaseTableReviewControl
@@ -12189,6 +12389,9 @@ const GoABaseTableReviewRenderers$1 = [
 }, {
   tester: HelpContentTester,
   renderer: EmptyHelpContentRenderer
+}, {
+  tester: GoACalloutControlTester,
+  renderer: CalloutReviewControl
 }];
 [
 // controls
@@ -12236,10 +12439,10 @@ const GoABaseTableReviewRenderers$1 = [
   renderer: GoAInputBaseReviewControl
 }, {
   tester: GoAArrayControlTester,
-  renderer: GoAInputBaseTableReviewControl // Array might still need table or custom grid
+  renderer: GoAArrayControlReviewRenderer // Array might still need table or custom grid
 }, {
   tester: GoAListWithDetailsTester,
-  renderer: GoAInputBaseTableReviewControl // List with details is complex
+  renderer: GoAArrayControlReviewRenderer // List with details is complex
 }, {
   tester: AddressLookUpTester,
   renderer: withJsonFormsControlProps(AddressLookUpControlReview)
@@ -12255,6 +12458,9 @@ const GoABaseTableReviewRenderers$1 = [
 }, {
   tester: HelpContentTester,
   renderer: EmptyHelpContentRenderer
+}, {
+  tester: GoACalloutControlTester,
+  renderer: CalloutReviewControl
 }];
 const FormStepperReviewer = props => {
   var _uischema$options$com, _uischema$options, _componentProps$readO;
@@ -12275,43 +12481,61 @@ const FormStepperReviewer = props => {
   return jsx(ReviewItem, {
     children: categories.map((category, categoryIndex) => {
       const categoryLabel = category.label || category.i18n || 'Unknown Category';
+      const hasVisibleContent = element => {
+        if (!isVisible(element, data, '', ajv, undefined)) {
+          return false;
+        }
+        if (element.type === 'HelpContent' || element.type === 'Callout') {
+          return false;
+        }
+        if (element.elements && Array.isArray(element.elements)) {
+          return element.elements.some(child => hasVisibleContent(child));
+        }
+        return true;
+      };
+      const elementsToRender = category.elements
+      //eslint-disable-next-line
+      .filter(field => {
+        var _field$rule;
+        if (!hasVisibleContent(field)) {
+          return false;
+        }
+        const conditionProps = (_field$rule = field.rule) == null ? void 0 : _field$rule.condition;
+        /* istanbul ignore next */
+        if (conditionProps && data) {
+          var _conditionProps$scope;
+          const canHideControlParts = conditionProps == null || (_conditionProps$scope = conditionProps.scope) == null ? void 0 : _conditionProps$scope.split('/');
+          const canHideControl = canHideControlParts && canHideControlParts[(canHideControlParts == null ? void 0 : canHideControlParts.length) - 1];
+          const isHidden = getProperty(data, canHideControl);
+          if (!isHidden) {
+            return field;
+          }
+          return false;
+        }
+        return true;
+      }).map(e => {
+        const layout = e;
+        if (rescopeMaps.some(scope => {
+          var _layout$elements;
+          return (_layout$elements = layout.elements) == null ? void 0 : _layout$elements.map(el => {
+            const element = el;
+            return element.scope;
+          }).includes(scope);
+        })) {
+          return layout.elements;
+        } else {
+          return e;
+        }
+      }).flat();
+      if (elementsToRender.length === 0) {
+        return null;
+      }
       return jsxs(ReviewItemSection, {
         children: [jsx(ReviewItemHeader, {
           children: jsx(ReviewItemTitle, {
             children: categoryLabel
           })
-        }), category.elements
-        //eslint-disable-next-line
-        .filter(field => {
-          var _field$rule;
-          // [TODO] we need to double check why we cannot hide the elements at the element level
-          const conditionProps = (_field$rule = field.rule) == null ? void 0 : _field$rule.condition;
-          /* istanbul ignore next */
-          if (conditionProps && data) {
-            var _conditionProps$scope;
-            const canHideControlParts = conditionProps == null || (_conditionProps$scope = conditionProps.scope) == null ? void 0 : _conditionProps$scope.split('/');
-            const canHideControl = canHideControlParts && canHideControlParts[(canHideControlParts == null ? void 0 : canHideControlParts.length) - 1];
-            const isHidden = getProperty(data, canHideControl);
-            if (!isHidden) {
-              return field;
-            }
-          } else {
-            return field;
-          }
-        }).map(e => {
-          const layout = e;
-          if (rescopeMaps.some(scope => {
-            var _layout$elements;
-            return (_layout$elements = layout.elements) == null ? void 0 : _layout$elements.map(el => {
-              const element = el;
-              return element.scope;
-            }).includes(scope);
-          })) {
-            return layout.elements;
-          } else {
-            return e;
-          }
-        }).flat().map((element, elementIndex) => {
+        }), elementsToRender.map((element, elementIndex) => {
           const stepperElement = Object.assign({}, element);
           stepperElement.options = Object.assign({}, stepperElement.options, {
             stepId: categoryIndex

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.44.1",
+  "version": "2.44.2",
   "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/Inputs/style-component.d.ts

@@ -3,6 +3,10 @@ export declare const WarningIconDiv: import("styled-components/dist/types").ISty
 export declare const RequiredTextLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
 export declare const PageReviewNameCol: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
 export declare const PageReviewValueCol: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
+export declare const PageReviewContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
+export declare const ReviewHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ReviewLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ReviewValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CheckboxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const H4Large: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
 export declare const Row: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;

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

@@ -4,6 +4,6 @@ export type CombinedProps = ControlProps & ArrayLayoutProps;
 export declare const ArrayControl: (props: CombinedProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoAArrayControlTester: RankedTester;
 export declare const ArrayControlBase: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ArrayControlReview: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ArrayControlReview: (props: ControlProps) => import("react/jsx-runtime").JSX.Element | null;
 export declare const GoAArrayControlRenderer: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
 export declare const GoAArrayControlReviewRenderer: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;