@abgov/jsonforms-components 2.1.0 → 2.1.2

package/index.esm.js

@@ -8,7 +8,7 @@ import get$1 from 'lodash/get';
 import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, getControlPath, toDataPath, deriveLabelForUISchemaElement, isEnabled, schemaTypeIs, formatIs, createDefaultValue, or, isObjectArrayControl, isPrimitiveArrayControl, Paths, schemaMatches, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsRendererProps, withJsonFormsEnumProps, withTranslateProps, useJsonForms, JsonFormsDispatch, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import * as _$c from 'lodash';
-import { isEqual, isObject as isObject$f } from 'lodash';
+import { isEqual, isEmpty as isEmpty$1, isObject as isObject$f } from 'lodash';
 import merge from 'lodash/merge';
 import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
@@ -2635,7 +2635,8 @@ const invalidSin = 'Social insurance number is invalid';
  * @param words
  * @returns sentence word string.
  */
-const capitalizeFirstLetter$1 = words => {
+const capitalizeFirstLetter = words => {
+  if (!words) return ''; // Handle empty strings
   const value = words.charAt(0).toUpperCase() + words.slice(1).toLowerCase();
   return value;
 };
@@ -2661,7 +2662,7 @@ const controlScopeMatchesLabel = (scope, label) => {
 const getLabelText = (scope, label) => {
   let labelToUpdate = '';
   if (controlScopeMatchesLabel(scope, label || '') && !areAllUppercase(label)) {
-    labelToUpdate = capitalizeFirstLetter$1(label || '');
+    labelToUpdate = capitalizeFirstLetter(label || '');
   } else {
     labelToUpdate = label || '';
   }
@@ -4390,7 +4391,7 @@ const formatSin = value => {
   return formatVal;
 };
 const GoAInputText = props => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
   const {
     data,
     config,
@@ -4405,14 +4406,15 @@ const GoAInputText = props => {
     isVisited,
     setIsVisited
   } = props;
+  const width = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : '100%';
   const registerCtx = useContext(JsonFormsRegisterContext);
-  const registerConfig = fetchRegisterConfigFromOptions$1((_b = (_a = props.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.register);
+  const registerConfig = fetchRegisterConfigFromOptions$1((_e = (_d = props.uischema) === null || _d === void 0 ? void 0 : _d.options) === null || _e === void 0 ? void 0 : _e.register);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   let registerData = [];
   if (registerConfig) {
     registerData = registerCtx === null || registerCtx === void 0 ? void 0 : registerCtx.selectRegisterData(registerConfig);
   }
-  const autoCompletion = ((_d = (_c = props.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.autoComplete) === true;
+  const autoCompletion = ((_g = (_f = props.uischema) === null || _f === void 0 ? void 0 : _f.options) === null || _g === void 0 ? void 0 : _g.autoComplete) === true;
   const mergedOptions = useMemo(() => {
     const newOptions = [...((registerData === null || registerData === void 0 ? void 0 : registerData.map(d => {
       if (typeof d === 'string') {
@@ -4444,8 +4446,8 @@ const GoAInputText = props => {
   const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
   const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
   const isSinField = schema.title === sinTitle;
-  const autoCapitalize = ((_f = (_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.componentProps) === null || _f === void 0 ? void 0 : _f.autoCapitalize) === true || ((_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.autoCapitalize) === true;
-  const readOnly = (_k = (_j = (_h = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _h === void 0 ? void 0 : _h.componentProps) === null || _j === void 0 ? void 0 : _j.readOnly) !== null && _k !== void 0 ? _k : false;
+  const autoCapitalize = ((_j = (_h = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _h === void 0 ? void 0 : _h.componentProps) === null || _j === void 0 ? void 0 : _j.autoCapitalize) === true || ((_k = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _k === void 0 ? void 0 : _k.autoCapitalize) === true;
+  const readOnly = (_o = (_m = (_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps) === null || _m === void 0 ? void 0 : _m.readOnly) !== null && _o !== void 0 ? _o : false;
   return jsx("div", {
     children: mergedOptions.length > 0 ? jsx(Dropdown, {
       items: mergedOptions,
@@ -4462,11 +4464,11 @@ const GoAInputText = props => {
       type: appliedUiSchemaOptions.format === 'password' ? 'password' : 'text',
       disabled: !enabled,
       value: data,
-      width: '100%',
+      width: width,
       readonly: readOnly,
       maxLength: isSinField ? 11 : '',
       placeholder: placeholder
-    }, (_l = uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps, {
+    }, (_p = uischema.options) === null || _p === void 0 ? void 0 : _p.componentProps, {
       // maxLength={appliedUiSchemaOptions?.maxLength}
       name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
       testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
@@ -4494,7 +4496,7 @@ const GoAInputText = props => {
           value: autoCapitalize ? value.toUpperCase() : value
         });
       }
-    }, (_m = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _m === void 0 ? void 0 : _m.componentProps))
+    }, (_q = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _q === void 0 ? void 0 : _q.componentProps))
   });
 };
 const GoATextControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
@@ -4524,7 +4526,7 @@ const MultiLineText = props => {
   const [textAreaValue, _] = React.useState(data);
   const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
   const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
-  const width = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : '100%';
+  const width = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : '100%';
   const autoCapitalize = ((_e = (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps) === null || _e === void 0 ? void 0 : _e.autoCapitalize) === true || ((_f = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _f === void 0 ? void 0 : _f.autoCapitalize) === true;
   const readOnly = (_j = (_h = (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps) === null || _h === void 0 ? void 0 : _h.readOnly) !== null && _j !== void 0 ? _j : false;
   const textAreaName = `${label || path}-text-area` || '';
@@ -5432,8 +5434,8 @@ let _$6 = t => t,
   _t13$1,
   _t14$1,
   _t15$1,
-  _t16,
-  _t17;
+  _t16$1,
+  _t17$1;
 const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
   display: flex;
   flex-direction: column;
@@ -5524,14 +5526,14 @@ const TableReviewItem = styled.div(_t15$1 || (_t15$1 = _$6`
   border-radius: 5px;
   padding: var(--goa-space-2xl);
 `));
-const TableReviewPageTitleRow = styled.div(_t16 || (_t16 = _$6`
+const TableReviewPageTitleRow = styled.div(_t16$1 || (_t16$1 = _$6`
   margin-top: var(--goa-space-xl);
   display: flex;
   .right {
     margin-left: auto;
   }
 `));
-const TableReviewCategoryLabel = styled.h3(_t17 || (_t17 = _$6`
+const TableReviewCategoryLabel = styled.h3(_t17$1 || (_t17$1 = _$6`
   color: var(--goa-color-text-secondary) !important;
 `));
 
@@ -7206,6 +7208,92 @@ $$8({ global: true, forced: parseInt !== $parseInt }, {
   parseInt: $parseInt
 });
 
+const ADD_DATA_ACTION = 'jsonforms/register/add_data_action';
+const SET_DATA_ACTION = 'jsonforms/register/set_data_action';
+const INCREMENT_ACTION = 'jsonforms/register/increment_action';
+const DELETE_ACTION = 'jsonforms/register/delete_action';
+const initialState = {
+  categories: {}
+};
+
+function objectListReducer(state, action) {
+  switch (action.type) {
+    case ADD_DATA_ACTION:
+      {
+        //ok so we're assuming we're already getting the updated category data
+        const {
+          categories
+        } = state;
+        const {
+          name,
+          category
+        } = action.payload;
+        const newCategories = Object.assign({}, categories);
+        if (!newCategories[name]) {
+          newCategories[name] = {
+            data: category
+          };
+        } else {
+          newCategories[name].data = category;
+        }
+        return Object.assign(Object.assign({}, state), {
+          categories: newCategories
+        });
+      }
+    case SET_DATA_ACTION:
+      {
+        const CategoriesStateData = action.payload;
+        return Object.assign(Object.assign({}, state), {
+          categories: CategoriesStateData
+        });
+      }
+    case INCREMENT_ACTION:
+      {
+        const {
+          categories
+        } = state;
+        const name = action.payload;
+        const newCategories = Object.assign({}, categories);
+        // Assuming you want to increment the count of a category:
+        if (newCategories[name]) {
+          const updatedCategory = Object.assign(Object.assign({}, categories[name]), {
+            count: (categories[name].count || 0) + 1
+          });
+          return Object.assign(Object.assign({}, state), {
+            categories: Object.assign(Object.assign({}, categories), {
+              [name]: updatedCategory
+            })
+          });
+        } else {
+          newCategories[name] = {
+            count: 1,
+            data: {}
+          };
+        }
+        return Object.assign(Object.assign({}, state), {
+          categories: newCategories
+        });
+      }
+    case DELETE_ACTION:
+      {
+        const {
+          name,
+          category
+        } = action.payload;
+        const {
+          categories
+        } = state;
+        const newCategories = Object.assign({}, categories);
+        newCategories[name] = category;
+        return Object.assign(Object.assign({}, state), {
+          categories: newCategories
+        });
+      }
+    default:
+      return state;
+  }
+}
+
 let _$2 = t => t,
   _t$2,
   _t2$2,
@@ -7221,7 +7309,11 @@ let _$2 = t => t,
   _t12,
   _t13,
   _t14,
-  _t15;
+  _t15,
+  _t16,
+  _t17,
+  _t18,
+  _t19;
 const DeleteDialogContent = styled.div(_t$2 || (_t$2 = _$2`
   margin-bottom: var(--goa-space-m);
 `));
@@ -7288,6 +7380,32 @@ const ListContainer = styled.div(_t14 || (_t14 = _$2`
 `));
 const TableTHHeader = styled.th(_t15 || (_t15 = _$2`
   background-color: var(--goa-color-greyscale-100) !important;
+  vertical-align: top;
+`));
+const ObjectArrayWarningIconDiv = styled.div(_t16 || (_t16 = _$2`
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.25rem;
+  font-size: var(--goa-font-size-2);
+  color: var(--goa-color-interactive-error);
+`));
+styled.label(_t17 || (_t17 = _$2`
+  color: var(--goa-color-interactive-error);
+  font-weight: var(--goa-font-weight-regular);
+  font-size: var(--goa-font-size-3);
+  line-height: var(--goa-line-height-1);
+  font-style: normal;
+`));
+styled.div(_t18 || (_t18 = _$2`
+  margin-top: var(--goa-space-m);
+  color: var(--goa-color-interactive-error);
+  font-weight: var(--goa-font-weight-regular);
+  font-size: var(--goa-font-size-2);
+  line-height: var(--goa-line-height-1);
+  font-style: normal;
+`));
+const HilightCellWarning = styled.div(_t19 || (_t19 = _$2`
+  background-color: var(--goa-color-warning-default);
 `));
 
 const DeleteDialog = /*#__PURE__*/React.memo(function DeleteDialog({
@@ -7361,116 +7479,112 @@ const ObjectArrayToolBar = /*#__PURE__*/React.memo(function TableToolbar({
         "aria-label": translations.addAriaLabel,
         onClick: addItem(path, createDefaultValue(schema, rootSchema)),
         type: (_c = (_b = uischema.options) === null || _b === void 0 ? void 0 : _b.addButtonType) !== null && _c !== void 0 ? _c : 'primary',
-        children: ((_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.addButtonText) || capitalizeFirstLetter$1(`Add ${arrayLabel}`)
+        children: ((_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.addButtonText) || capitalizeFirstLetter(`Add ${arrayLabel}`)
       })
     })
   });
 });
 
-const ADD_DATA_ACTION = 'jsonforms/register/add_data_action';
-const SET_DATA_ACTION = 'jsonforms/register/set_data_action';
-const INCREMENT_ACTION = 'jsonforms/register/increment_action';
-const DELETE_ACTION = 'jsonforms/register/delete_action';
-const initialState = {
-  categories: {}
+const extractNestedFields = (properties, propertyKeys) => {
+  const nestedItems = {};
+  propertyKeys.forEach(key => {
+    var _a, _b;
+    if (properties[key].type === 'array') {
+      const propItems = properties[key] && ((_a = properties[key].items) === null || _a === void 0 ? void 0 : _a.properties) || [];
+      const propReqItems = properties[key].items && ((_b = properties[key].items) === null || _b === void 0 ? void 0 : _b.required) || [];
+      nestedItems[key] = {
+        properties: [...Object.keys(propItems)],
+        required: [...Object.keys(propReqItems)]
+      };
+    }
+  });
+  return nestedItems;
 };
-
-function objectListReducer(state, action) {
-  switch (action.type) {
-    case ADD_DATA_ACTION:
-      {
-        //ok so we're assuming we're already getting the updated category data
-        const {
-          categories
-        } = state;
-        const {
-          name,
-          category
-        } = action.payload;
-        const newCategories = Object.assign({}, categories);
-        if (!newCategories[name]) {
-          newCategories[name] = {
-            data: category
-          };
-        } else {
-          newCategories[name].data = category;
-        }
-        return Object.assign(Object.assign({}, state), {
-          categories: newCategories
-        });
-      }
-    case SET_DATA_ACTION:
-      {
-        const CategoriesStateData = action.payload;
-        return Object.assign(Object.assign({}, state), {
-          categories: CategoriesStateData
-        });
-      }
-    case INCREMENT_ACTION:
-      {
-        const {
-          categories
-        } = state;
-        const name = action.payload;
-        const newCategories = Object.assign({}, categories);
-        // Assuming you want to increment the count of a category:
-        if (newCategories[name]) {
-          const updatedCategory = Object.assign(Object.assign({}, categories[name]), {
-            count: (categories[name].count || 0) + 1
-          });
-          return Object.assign(Object.assign({}, state), {
-            categories: Object.assign(Object.assign({}, categories), {
-              [name]: updatedCategory
-            })
-          });
-        } else {
-          newCategories[name] = {
-            count: 1,
-            data: {}
-          };
-        }
-        return Object.assign(Object.assign({}, state), {
-          categories: newCategories
-        });
-      }
-    case DELETE_ACTION:
-      {
-        const {
-          name,
-          category
-        } = action.payload;
-        const {
-          categories
-        } = state;
-        const newCategories = Object.assign({}, categories);
-        newCategories[name] = category;
-        return Object.assign(Object.assign({}, state), {
-          categories: newCategories
-        });
-      }
-    default:
-      return state;
-  }
-}
-
-function extractNames(obj, names = []) {
+/**
+ * Extract Json data schema name attribute and the ui schema label name.
+ * @param obj
+ * @param names
+ * @returns A key value of the data attribute name and the uiSchema label value
+ */
+const extractNames = (obj, names = {}) => {
   if (Array.isArray(obj)) {
     obj.forEach(item => extractNames(item, names));
   } else if (typeof obj === 'object' && obj !== null) {
     const typedObj = obj;
-    if (typeof typedObj.label === 'string') {
-      names.push(typedObj.label);
-    } else if (typeof typedObj.scope === 'string') {
+    if (typeof typedObj.scope === 'string') {
       const parts = typedObj.scope.split('/');
-      names.push(parts[parts.length - 1]);
+      if (typeof typedObj.label === 'string') {
+        names[parts[parts.length - 1]] = typedObj.label;
+      } else if (typeof typedObj.scope === 'string') {
+        const _parts = typedObj.scope.split('/');
+        names[_parts[_parts.length - 1]] = _parts[_parts.length - 1];
+      }
     }
     Object.values(typedObj).forEach(value => extractNames(value, names));
   }
   return names;
-}
-const GenerateRows$1 = (Cell, schema, rowPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data,
-// eslint-disable-next-line
-errors) => {
+};
+const isObjectArrayEmpty = currentData => {
+  const result = isEmpty$1(currentData) || JSON.stringify(currentData) === '[{}]';
+  return result;
+};
+const renderCellColumn = ({
+  currentData,
+  error,
+  errors,
+  index,
+  rowPath,
+  element,
+  isRequired
+}) => {
+  const renderWarningCell = data => {
+    return jsx(HilightCellWarning, {
+      children: jsxs(ObjectArrayWarningIconDiv, {
+        children: [jsx(GoAIcon, {
+          type: "warning",
+          title: "warning",
+          size: "small",
+          theme: "filled",
+          ml: "2xs",
+          mt: "2xs"
+        }), data]
+      })
+    });
+  };
+  if (currentData === undefined && isRequired || error !== '' && error !== undefined) {
+    return renderWarningCell(currentData);
+  } else if (currentData !== undefined && isRequired && error) {
+    return renderWarningCell(currentData);
+  }
+  const path = `/${rowPath}/${index}/${element}/${index === 0 ? index : index - 1}`;
+  const nestedErrors = errors === null || errors === void 0 ? void 0 : errors.filter(e => e.instancePath.includes(path));
+  if (typeof currentData === 'string') {
+    return currentData;
+  } else if (typeof currentData === 'object' || Array.isArray(currentData)) {
+    const result = Object.keys(currentData);
+    if (result.length === 0) {
+      return renderWarningCell();
+    } else if (result.length > 0 && (isObjectArrayEmpty(currentData) || nestedErrors.length > 0)) {
+      return jsx("pre", {
+        children: renderWarningCell(JSON.stringify(currentData, null, 2))
+      });
+    } else if (currentData !== undefined && result.length > 0 && error !== '' && error !== undefined) {
+      const values = Object.values(currentData);
+      if (values && values.length > 0) {
+        return jsx("pre", {
+          children: renderWarningCell(JSON.stringify(values.at(0), null, 2))
+        });
+      }
+    } else {
+      return jsx("pre", {
+        children: JSON.stringify(currentData, null, 2)
+      });
+    }
+  }
+  return null;
+};
+
+const GenerateRows$1 = (Cell, schema, rowPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data, errors) => {
   if ((schema === null || schema === void 0 ? void 0 : schema.type) === 'object') {
     const props = {
       schema,
@@ -7545,12 +7659,8 @@ const ctxToNonEmptyCellProps$1 = (ctx, ownProps) => {
     handleChange: ownProps.handleChange
   };
 };
-function capitalizeFirstLetter(str) {
-  if (!str) return ''; // Handle empty strings
-  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-}
 const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellComponent(props) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const {
     schema,
     enabled,
@@ -7567,14 +7677,29 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
   } = props;
   const properties = (schema === null || schema === void 0 ? void 0 : schema.items) && 'properties' in schema.items && schema.items.properties || {};
   const required = (_a = schema.items) === null || _a === void 0 ? void 0 : _a.required;
+  const propertyKeys = Object.keys(properties);
+  const nestedItems = extractNestedFields(properties, propertyKeys);
   let tableKeys = extractNames((_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.detail);
-  if (tableKeys.length === 0) {
-    tableKeys = Object.keys(properties);
+  if (Object.keys(tableKeys).length === 0) {
+    Object.keys(properties).forEach(item => {
+      tableKeys[item] = item;
+    });
   }
+  if (Object.keys(properties).length !== Object.keys(tableKeys).length) {
+    const tempTableKeys = {};
+    //For nested objects to display only the top level column.
+    Object.keys(properties).forEach(item => {
+      if (Object.keys(tableKeys).includes(item)) {
+        tempTableKeys[item] = tableKeys[item];
+      }
+    });
+    tableKeys = tempTableKeys;
+  }
+  const hasAnyErrors = Array.isArray(errors) ? ((_c = errors === null || errors === void 0 ? void 0 : errors.filter(err => {
+    return err.instancePath.includes(rowPath);
+  })) === null || _c === void 0 ? void 0 : _c.length) > 0 : false;
   return jsxs(NonEmptyCellStyle, {
-    children: [
-    // eslint-disable-next-line
-    (_c = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _c === void 0 ? void 0 : _c.map(element => {
+    children: [(_d = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _d === void 0 ? void 0 : _d.map(element => {
       return jsx(JsonFormsDispatch, {
         "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
         schema: schema,
@@ -7584,99 +7709,120 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
         renderers: isInReview ? GoAReviewRenderers : renderers,
         cells: cells
       }, rowPath);
-    }), Object.keys(properties).length > 0 && jsxs(GoATable, {
-      width: "100%",
-      children: [jsx("thead", {
-        children: jsxs("tr", {
-          children: [tableKeys.map((key, index) => {
-            if (!isInReview) {
-              return jsx("th", {
+    }), Object.keys(properties).length > 0 && jsxs(Fragment, {
+      children: [jsxs(GoATable, {
+        width: "100%",
+        children: [jsx("thead", {
+          children: jsxs("tr", {
+            children: [Object.entries(tableKeys).map(([value, index]) => {
+              var _a;
+              if (!isInReview) {
+                return jsx("th", {
+                  children: jsxs("p", {
+                    children: [convertToSentenceCase(index), (required === null || required === void 0 ? void 0 : required.includes(value)) && jsx(RequiredSpan, {
+                      children: "(required)"
+                    })]
+                  })
+                }, index);
+              }
+              return jsx(TableTHHeader, {
                 children: jsxs("p", {
-                  children: [convertToSentenceCase(key), (required === null || required === void 0 ? void 0 : required.includes(key)) && jsx(RequiredSpan, {
-                    children: "(required)"
+                  children: [`${convertToSentenceCase(index)}`, ((required === null || required === void 0 ? void 0 : required.includes(value)) || ((_a = nestedItems[value]) === null || _a === void 0 ? void 0 : _a.required.length) > 0) && jsxs(RequiredSpan, {
+                    children: [jsx("br", {}), " (required)"]
                   })]
                 })
               }, index);
-            }
-            return jsx(TableTHHeader, {
+            }), isInReview !== true && jsx("th", {
               children: jsx("p", {
-                children: convertToSentenceCase(key)
+                children: "Actions"
               })
-            }, index);
-          }), isInReview !== true && jsx("th", {
-            children: jsx("p", {
-              children: "Actions"
-            })
-          })]
-        }, 0)
-      }), jsx("tbody", {
-        children: range(count || 0).map((num, i) => {
-          // eslint-disable-next-line
-          const errorRow = errors === null || errors === void 0 ? void 0 : errors.find(error => error.instancePath.includes(`/${props.rowPath.replace(/\./g, '/')}/${i}`));
-          return jsxs("tr", {
-            children: [Object.keys(properties).map((element, ix) => {
-              var _a;
-              const dataObject = properties[element];
-              const schemaName = element;
-              const currentData = data && data[num] ? data[num][element] : '';
-              const error = errors === null || errors === void 0 ? void 0 : errors.find(
-              // eslint-disable-next-line
-              e => e.instancePath === `/${props.rowPath.replace(/\./g, '/')}/${i}/${element}`);
-              if ((error === null || error === void 0 ? void 0 : error.message.includes('must NOT have fewer')) && required.find(r => r === schemaName) && (isEmptyBoolean(schema, currentData) || isEmptyNumber(schema, currentData))) {
-                error.message = `${capitalizeFirstLetter(schemaName)} is required`;
-              }
-              return jsx("td", {
-                children: isInReview ? jsx("div", {
-                  "data-testid": `#/properties/${schemaName}-input-${i}-review`,
-                  children: typeof currentData === 'string' ? currentData : jsx("pre", {
-                    children: JSON.stringify(currentData, null, 2)
+            })]
+          }, 0)
+        }), jsx("tbody", {
+          children: range(count || 0).map((num, i) => {
+            const errorRow = errors === null || errors === void 0 ? void 0 : errors.find(error => error.instancePath.includes(`/${props.rowPath.replace(/\./g, '/')}/${i}`));
+            return jsxs("tr", {
+              children: [Object.keys(properties).map((element, ix) => {
+                var _a;
+                const dataObject = properties[element];
+                const schemaName = element;
+                const currentData = data && data[num] ? data[num][element] : '';
+                //Get out of the loop to not render extra blank columns at the end of the table
+                if (ix > 1 && Object.keys(tableKeys).length === ix) return null;
+                const error = (errors === null || errors === void 0 ? void 0 : errors.filter(e => e.instancePath === `/${props.rowPath.replace(/\./g, '/')}/${i}/${element}` || e.instancePath === `/${props.rowPath.replace(/\./g, '/')}/${i}`)).find(y => {
+                  var _a;
+                  return ((_a = y === null || y === void 0 ? void 0 : y.message) === null || _a === void 0 ? void 0 : _a.includes(element)) || y.instancePath.includes(element);
+                });
+                if ((error === null || error === void 0 ? void 0 : error.message.includes('must NOT have fewer')) && required.find(r => r === schemaName) && (isEmptyBoolean(schema, currentData) || isEmptyNumber(schema, currentData))) {
+                  error.message = `${capitalizeFirstLetter(schemaName)} is required`;
+                }
+                if (isInReview === true) {
+                  return jsx("td", {
+                    children: jsx("div", {
+                      "data-testid": `#/properties/${schemaName}-input-${i}-review`,
+                      children: renderCellColumn({
+                        currentData,
+                        error: error === null || error === void 0 ? void 0 : error.message,
+                        isRequired: required === null || required === void 0 ? void 0 : required.includes(tableKeys[element]),
+                        errors: errors !== undefined ? errors : [],
+                        count: count !== undefined ? count : -1,
+                        element,
+                        rowPath,
+                        index: i
+                      })
+                    })
+                  }, ix);
+                }
+                return jsx("td", {
+                  children: jsx(GoAFormItem, {
+                    error: (_a = error === null || error === void 0 ? void 0 : error.message) !== null && _a !== void 0 ? _a : '',
+                    mb: errorRow && !error && '2xl' || 'xs',
+                    children: dataObject.type === 'number' || dataObject.type === 'string' && !dataObject.enum ? jsx(GoAInput, {
+                      error: (error === null || error === void 0 ? void 0 : error.message.length) > 0,
+                      type: dataObject.type === 'number' ? 'number' : 'text',
+                      id: schemaName,
+                      name: schemaName,
+                      value: currentData,
+                      testId: `#/properties/${schemaName}-input-${i}`,
+                      onChange: (name, value) => {
+                        handleChange(rowPath, {
+                          [num]: {
+                            [name]: dataObject.type === 'number' ? parseInt(value) : value
+                          }
+                        });
+                      },
+                      "aria-label": schemaName,
+                      width: "100%"
+                    }) : jsx(GoACallout, {
+                      type: "important",
+                      size: "medium",
+                      testId: "form-support-callout",
+                      heading: "Not supported",
+                      children: "Only string and number are supported inside arrays"
+                    })
                   })
-                }) : jsx(GoAFormItem, {
-                  error: (_a = error === null || error === void 0 ? void 0 : error.message) !== null && _a !== void 0 ? _a : '',
-                  mb: errorRow && !error && '2xl' || 'xs',
-                  children: dataObject.type === 'number' || dataObject.type === 'string' && !dataObject.enum ? jsx(GoAInput, {
-                    error: (error === null || error === void 0 ? void 0 : error.message.length) > 0,
-                    type: dataObject.type === 'number' ? 'number' : 'text',
-                    id: schemaName,
-                    name: schemaName,
-                    value: currentData,
-                    testId: `#/properties/${schemaName}-input-${i}`,
-                    onChange: (name, value) => {
-                      handleChange(rowPath, {
-                        [num]: {
-                          [name]: dataObject.type === 'number' ? parseInt(value) : value
-                        }
-                      });
-                    },
-                    "aria-label": schemaName,
-                    width: "100%"
-                  }) : jsx(GoACallout, {
-                    type: "important",
-                    size: "medium",
-                    testId: "form-support-callout",
-                    heading: "Not supported",
-                    children: "Only string and number are supported inside arrays"
+                }, ix);
+              }), !isInReview && jsx("td", {
+                style: {
+                  alignContent: 'baseLine',
+                  paddingTop: '18px'
+                },
+                children: jsx("div", {
+                  "aria-hidden": "true",
+                  children: jsx(GoAIconButton, {
+                    icon: "trash",
+                    title: "trash button",
+                    testId: "trash-icon-button",
+                    "aria-label": `remove-element-${num}`,
+                    onClick: () => openDeleteDialog(num)
                   })
                 })
-              }, ix);
-            }), jsx("td", {
-              style: {
-                alignContent: 'baseLine',
-                paddingTop: '18px'
-              },
-              children: jsx("div", {
-                "aria-hidden": "true",
-                children: !isInReview && jsx(GoAIconButton, {
-                  icon: "trash",
-                  title: "trash button",
-                  testId: "trash-icon-button",
-                  "aria-label": `remove-element-${num}`,
-                  onClick: () => openDeleteDialog(num)
-                })
-              })
-            })]
-          }, i);
-        })
+              })]
+            }, `${rowPath}-${i}-${num}`);
+          })
+        })]
+      }), hasAnyErrors && isInReview && jsx(GoAFormItem, {
+        error: `There are validation errors for '${capitalizeFirstLetter(rowPath)}'`
       })]
     })]
   });
@@ -7760,7 +7906,6 @@ const ObjectArrayList$1 = ({
     data: data
   }, 0);
 };
-// eslint-disable-next-line
 const ObjectArrayControl = props => {
   var _a, _b, _c;
   const [registers, dispatch] = useReducer(objectListReducer, initialState);
@@ -7866,8 +8011,7 @@ const ObjectArrayControl = props => {
     }
   };
   useEffect(() => {
-    // eslint-disable-next-line
-    const updatedData = Array.isArray(parsedData) ? Object.fromEntries(parsedData.map((item, index) => [index, item])) : {};
+    const updatedData = Object.fromEntries((parsedData || []).map((item, index) => [index, item]));
     const count = Object.keys(updatedData).length;
     const dispatchData = {
       [path]: {
@@ -7881,9 +8025,9 @@ const ObjectArrayControl = props => {
         payload: dispatchData
       });
     }
+    // eslint-disable-next-line
   }, []);
   const controlElement = uischema;
-  // eslint-disable-next-line
   const listTitle = label || ((_a = uischema.options) === null || _a === void 0 ? void 0 : _a.title);
   const isInReview = isStepperReview === true;
   return jsxs(Visible, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.1.0",
+  "version": "2.1.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/ObjectArray/ObjectListControl.d.ts

@@ -1,50 +1,6 @@
 import React from 'react';
-import { ArrayLayoutProps, ControlElement, JsonSchema, JsonFormsRendererRegistryEntry, JsonFormsCellRendererRegistryEntry, ArrayTranslations, Layout, ControlProps } from '@jsonforms/core';
 import { WithBasicDeleteDialogSupport } from './DeleteDialog';
-import { StateData } from './arrayData';
-interface ArrayLayoutExtProps {
-    isStepperReview?: boolean;
-}
-interface HandleChangeProps {
-    handleChange(path: string, value: any): void;
-}
-export type ObjectArrayControlProps = ArrayLayoutProps & ArrayLayoutExtProps & ControlProps;
-export interface EmptyListProps {
-    numColumns: number;
-    translations: ArrayTranslations;
-}
-interface NonEmptyRowComponentProps {
-    propName?: string;
-    schema: JsonSchema;
-    rootSchema?: JsonSchema;
-    rowPath: string;
-    errors?: Record<string, any>;
-    enabled: boolean;
-    renderers?: JsonFormsRendererRegistryEntry[];
-    cells?: JsonFormsCellRendererRegistryEntry[];
-    isValid: boolean;
-    uischema?: ControlElement | Layout;
-    isInReview?: boolean;
-    count?: number;
-    data: StateData | undefined;
-    handleChange(path: string, value: string): void;
-    openDeleteDialog(rowIndex: number): void;
-}
+import { HandleChangeProps, NonEmptyRowComponentProps, NonEmptyRowProps, ObjectArrayControlProps } from './ObjectListControlTypes';
 export declare const NonEmptyCellComponent: React.NamedExoticComponent<NonEmptyRowComponentProps & HandleChangeProps>;
-interface NonEmptyRowProps {
-    childPath: string;
-    schema: JsonSchema;
-    rowIndex: number;
-    showSortButtons: boolean;
-    enabled: boolean;
-    cells?: JsonFormsCellRendererRegistryEntry[];
-    path: string;
-    translations: ArrayTranslations;
-    uischema: ControlElement;
-    isInReview?: boolean;
-    data?: StateData;
-    count: number;
-}
 export declare const NonEmptyList: React.MemoExoticComponent<({ childPath, schema, openDeleteDialog, enabled, cells, uischema, isInReview, data, count, handleChange, }: NonEmptyRowProps & WithBasicDeleteDialogSupport & HandleChangeProps) => import("react/jsx-runtime").JSX.Element>;
 export declare const ObjectArrayControl: (props: ObjectArrayControlProps) => JSX.Element;
-export {};

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

@@ -0,0 +1,109 @@
+import { ArrayLayoutProps, ArrayTranslations, ControlElement, ControlProps, JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry, JsonSchema, Layout } from '@jsonforms/core';
+import { StateData } from './arrayData';
+import { ErrorObject } from 'ajv';
+export type ObjectArrayControlProps = ArrayLayoutProps & ArrayLayoutExtProps & ControlProps;
+export interface ArrayLayoutExtProps {
+    isStepperReview?: boolean;
+}
+export interface DataProperty {
+    type: string;
+    format?: string;
+    maxLength?: number;
+    required?: string[];
+    enum: string[];
+    items?: Record<string, unknown>;
+}
+export interface DataObject {
+    [key: string]: DataProperty;
+}
+export interface NestedItem {
+    properties: string[];
+    required: string[];
+}
+export interface Items {
+    type: string;
+    properties: DataObject;
+}
+export interface HandleChangeProps {
+    handleChange(path: string, value: any): void;
+}
+export interface NonEmptyCellProps extends OwnPropsOfNonEmptyCell {
+    rootSchema?: JsonSchema;
+    errors?: ErrorObject[];
+    enabled: boolean;
+}
+export interface OwnPropsOfNonEmptyCell {
+    rowPath: string;
+    propName?: string;
+    schema: JsonSchema;
+    enabled: boolean;
+    renderers?: JsonFormsRendererRegistryEntry[];
+    cells?: JsonFormsCellRendererRegistryEntry[];
+    uischema?: ControlElement;
+    isInReview?: boolean;
+    data?: StateData;
+    count?: number;
+    handleChange(path: string, value: string): void;
+}
+export interface OwnPropsOfNonEmptyCellWithDialog extends OwnPropsOfNonEmptyCell {
+    openDeleteDialog: (rowIndex: number) => void;
+}
+export interface NonEmptyRowComponentProps {
+    propName?: string;
+    schema: JsonSchema;
+    rootSchema?: JsonSchema;
+    rowPath: string;
+    errors?: ErrorObject[];
+    enabled: boolean;
+    renderers?: JsonFormsRendererRegistryEntry[];
+    cells?: JsonFormsCellRendererRegistryEntry[];
+    isValid: boolean;
+    uischema?: ControlElement | Layout;
+    isInReview?: boolean;
+    count?: number;
+    data: StateData | undefined;
+    handleChange(path: string, value: string): void;
+    openDeleteDialog(rowIndex: number): void;
+}
+export interface NonEmptyRowProps {
+    childPath: string;
+    schema: JsonSchema;
+    rowIndex: number;
+    showSortButtons: boolean;
+    enabled: boolean;
+    cells?: JsonFormsCellRendererRegistryEntry[];
+    path: string;
+    translations: ArrayTranslations;
+    uischema: ControlElement;
+    isInReview?: boolean;
+    data?: StateData;
+    count: number;
+}
+export interface EmptyListProps {
+    numColumns: number;
+    translations: ArrayTranslations;
+}
+export interface TableRowsProp {
+    data: StateData;
+    path: string;
+    schema: JsonSchema;
+    uischema: ControlElement;
+    config?: any;
+    enabled: boolean;
+    cells?: JsonFormsCellRendererRegistryEntry[];
+    translations: ArrayTranslations;
+    count: number;
+    isInReview?: boolean;
+    handleChange: (path: string, value: any) => void;
+}
+export interface RenderCellColumnProps {
+    currentData: string | undefined;
+    error: string | undefined;
+    isRequired: boolean;
+    tableKeys?: string[];
+    errors: ErrorObject[];
+    count: number;
+    rowPath: string;
+    index: number;
+    element: string;
+}

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

@@ -0,0 +1,11 @@
+import { DataObject, NestedItem, RenderCellColumnProps } from './ObjectListControlTypes';
+export declare const extractNestedFields: (properties: DataObject, propertyKeys: string[]) => Record<string, NestedItem>;
+/**
+ * Extract Json data schema name attribute and the ui schema label name.
+ * @param obj
+ * @param names
+ * @returns A key value of the data attribute name and the uiSchema label value
+ */
+export declare const extractNames: (obj: unknown, names?: Record<string, string>) => Record<string, string>;
+export declare const isObjectArrayEmpty: (currentData: string) => boolean;
+export declare const renderCellColumn: ({ currentData, error, errors, index, rowPath, element, isRequired, }: RenderCellColumnProps) => string | import("react/jsx-runtime").JSX.Element | null;

package/src/lib/Controls/ObjectArray/styled-components.d.ts

@@ -14,3 +14,7 @@ export declare const TabName: import("styled-components/dist/types").IStyledComp
 export declare const Trash: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableTHHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never>> & string;
+export declare const ObjectArrayWarningIconDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ObjectArrayRequiredTextLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+export declare const HasErrorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const HilightCellWarning: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;