@abgov/jsonforms-components 2.0.0 → 2.1.1

package/index.esm.js

@@ -1,11 +1,11 @@
 import * as runtime from 'react/jsx-runtime';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useRef, useCallback } from 'react';
-import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAIcon, GoAButton, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAModal, GoAButtonGroup, GoATable, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
+import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAIcon, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoATable, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
-import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getControlPath, toDataPath, deriveLabelForUISchemaElement, isEnabled, getAjv, isVisible, schemaTypeIs, formatIs, createDefaultValue, or, isObjectArrayControl, isPrimitiveArrayControl, Paths, schemaMatches, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
+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';
@@ -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 || '';
   }
@@ -3803,8 +3804,7 @@ let _$a = t => t,
   _t3$5,
   _t4$5,
   _t5$3,
-  _t6$3,
-  _t7$2;
+  _t6$3;
 const FormFieldWrapper = styled.div(_t$a || (_t$a = _$a`
   margin-bottom: var(--goa-space-l);
 `));
@@ -3823,7 +3823,7 @@ const RequiredTextLabel = styled.label(_t3$5 || (_t3$5 = _$a`
   font-style: normal;
 `));
 const PageReviewNameCol = styled.td(_t4$5 || (_t4$5 = _$a`
-  width: 70%;
+  width: 80%;
   padding-top: var(--goa-space-s);
   padding-bottom: var(--goa-space-s);
   padding-right: var(--goa-space-m);
@@ -3832,11 +3832,8 @@ const PageReviewValueCol = styled.td(_t5$3 || (_t5$3 = _$a`
   width: 20%;
   text-align: left;
 `));
-const PageReviewActionCol = styled.td(_t6$3 || (_t6$3 = _$a`
-  width: 10%;
-`));
 //Check and unchecked are different heights otherwise
-const CheckboxWrapper = styled.div(_t7$2 || (_t7$2 = _$a`
+const CheckboxWrapper = styled.div(_t6$3 || (_t6$3 = _$a`
   height: 28px;
 `));
 
@@ -5297,470 +5294,128 @@ const GoInputBaseReview = props => jsx(GoAInputBaseControl, Object.assign({}, pr
 }));
 const GoInputBaseReviewControl = withJsonFormsControlProps(GoInputBaseReview);
 
-// eslint-disable-next-line
-const getProperty = (obj, propName) => {
-  if (obj[propName] !== undefined) return obj[propName];
-  for (const key in obj) {
-    if (typeof obj[key] === 'object' && obj[key] !== null) {
-      const result = getProperty(obj[key], propName);
-      if (result !== undefined) return result;
-    }
-  }
-};
-// eslint-disable-next-line
-const pickPropertyValues = (obj, property, endWithType) => {
-  let values = [];
-  Object.keys(obj).forEach(function (key) {
-    var _a;
-    if (key === property) {
-      values.push(obj[key]);
-    } else if (_$c.isObject(obj[key])) {
-      // if the object type is equal to end type, we are not going to continue the recursive approach
-      if (endWithType && ((_a = obj[key]) === null || _a === void 0 ? void 0 : _a.type) === endWithType) {
-        if (property in obj[key]) {
-          values.push(obj[key][property]);
-        }
+const GoAInputBaseTableReview = props => {
+  var _a, _b, _c;
+  const {
+    data,
+    uischema,
+    label
+  } = props;
+  const labelToUpdate = convertToSentenceCase(getLabelText(uischema.scope, label || ''));
+  let reviewText = data;
+  const isBoolean = typeof data === 'boolean';
+  if (isBoolean) {
+    const checkboxLabel = ((_b = (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.trim()) || convertToSentenceCase(getLastSegmentFromPointer(uischema.scope));
+    if (((_c = uischema.options) === null || _c === void 0 ? void 0 : _c.radio) === true) {
+      reviewText = data ? `Yes` : `No`;
+    } else {
+      if (label !== '' || typeof label === 'boolean') {
+        reviewText = data ? `Yes` : `No`;
       } else {
-        values = [...values, ...pickPropertyValues(obj[key], property, endWithType)];
+        reviewText = data ? `Yes (${checkboxLabel.trim()})` : `No (${checkboxLabel.trim()})`;
       }
-    } else if (_$c.isArray(obj[key])) {
-      const nextValues = obj[key].map(function (arrayObj) {
-        return pickPropertyValues(arrayObj, property, endWithType);
-      });
-      values = [...values, ...nextValues];
     }
+  }
+  return jsxs("tr", {
+    "data-testid": `input-base-table-${label}-row`,
+    children: [jsx(PageReviewNameCol, {
+      children: jsx("strong", {
+        children: labelToUpdate
+      })
+    }), jsx(PageReviewValueCol, {
+      children: reviewText
+    })]
   });
-  return values;
 };
+const GoAInputBaseTableReviewControl = withJsonFormsControlProps(GoAInputBaseTableReview);
 
-const isErrorPathIncluded = (errorPaths, path) => {
-  return errorPaths.some(ePath => {
-    /**
-     *  case A: errorPaths: [name] path: [name]
-     *
-     *  case B: errorPath: [name] path: [name.firstName]
-     * */
-    return ePath === path || path.startsWith(ePath + '.');
-  });
+let _$7 = t => t,
+  _t$7;
+const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
+  return elements.map((child, index) => jsx("div", {
+    children: jsx(JsonFormsDispatch, {
+      uischema: child,
+      schema: schema,
+      path: path,
+      enabled: enabled,
+      renderers: renderers,
+      cells: cells
+    }, path)
+  }, index));
 };
-function isNumber(value) {
-  return value != null && value !== '' && !isNaN(Number(value.toString()));
-}
-const getIncompletePaths = (ajv, scopes) => {
-  var _a;
-  const requiredErrorPaths = (_a = ajv === null || ajv === void 0 ? void 0 : ajv.errors) === null || _a === void 0 ? void 0 : _a.filter(e => e.keyword === 'required' || e.keyword === 'minLength').map(e => {
-    return getControlPath(e);
+const withAjvProps = Component => function WithAjvProps(props) {
+  const ctx = useJsonForms();
+  const ajv = getAjv({
+    jsonforms: Object.assign({}, ctx)
   });
-  const _scopes = scopes.map(scope => toDataPath(scope)).filter(path => requiredErrorPaths && isErrorPathIncluded(requiredErrorPaths, path));
-  return _scopes;
+  return jsx(Component, Object.assign({}, props, {
+    ajv: ajv
+  }));
 };
-const subErrorInParent = (error, paths) => {
-  /*
-    Detect is there sub error in an object array.
-    For example: error with instance path /roadmap/0/when belongs to /roadmap
-  */
-  const errorPaths = error.instancePath.split('/');
-  if (errorPaths.length < 2) return false;
-  // For case /roadmap/0
-  if (errorPaths.length > 1 && isNumber(errorPaths[errorPaths.length - 1])) {
-    const parentPath = errorPaths.slice(0, errorPaths.length - 1).join('/');
-    return paths.includes(parentPath);
-  }
-  // For case /roadmap/0/when
-  if (errorPaths.length > 2 && isNumber(errorPaths[errorPaths.length - 2])) {
-    const parentPath = errorPaths.slice(0, errorPaths.length - 2).join('/');
-    return paths.includes(parentPath);
+const LayoutRenderer = ({
+  elements,
+  schema,
+  path,
+  enabled,
+  direction,
+  renderers,
+  cells,
+  visible,
+  width
+}) => {
+  if (isEmpty(elements)) {
+    return null;
+  } else {
+    if (direction === 'row') {
+      return jsx(Visible, {
+        visible: visible,
+        children: jsx(GoAGrid, {
+          minChildWidth: width || '10ch',
+          children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
+        })
+      });
+    } else {
+      return jsx(Visible, {
+        visible: visible,
+        children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
+      });
+    }
   }
-  return false;
 };
-const getErrorsInScopes = (errors, scopes) => {
-  return errors.filter(e => {
-    // transfer scope #properties/value to data path /value
-    const dataPaths = scopes.map(s => '/' + toDataPath(s));
-    return dataPaths.includes(e.instancePath) || subErrorInParent(e, dataPaths);
-  });
+const ReviewLayoutRenderer = ({
+  elements,
+  schema,
+  path,
+  enabled,
+  direction,
+  renderers,
+  cells,
+  visible,
+  width
+}) => {
+  if (isEmpty(elements)) {
+    return null;
+  } else {
+    if (direction === 'row') {
+      return jsx(Visible, {
+        visible: visible,
+        children: jsx(ReviewGrid, {
+          children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
+        })
+      });
+    } else {
+      return jsx(Visible, {
+        visible: visible,
+        children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
+      });
+    }
+  }
 };
-
-const stepperReducer = (state, action) => {
-  var _a, _b;
-  const {
-    activeId,
-    categories
-  } = state;
-  const lastId = categories[categories.length - 1].id;
-  switch (action.type) {
-    case 'update/uischema':
-      {
-        return Object.assign({}, action.payload.state);
-      }
-    case 'page/next':
-      {
-        state.activeId += 1;
-        if (activeId === lastId) {
-          state.isOnReview = true;
-          state.hasNextButton = false;
-          state.hasPrevButton = false;
-        } else {
-          state.hasNextButton = true;
-          state.hasPrevButton = true;
-          state.isOnReview = false;
-        }
-        state.categories[activeId].isVisited = true;
-        return Object.assign({}, state);
-      }
-    case 'page/prev':
-      {
-        state.categories[activeId].isVisited = true;
-        if (activeId > 0) {
-          state.activeId -= 1;
-          state.hasPrevButton = state.activeId !== 0;
-          state.hasNextButton = true;
-          state.isOnReview = false;
-        }
-        return Object.assign({}, state);
-      }
-    case 'page/to/index':
-      {
-        const {
-          id
-        } = action.payload;
-        state.activeId = id;
-        if (id > lastId) {
-          state.isOnReview = true;
-          state.hasNextButton = false;
-          state.hasPrevButton = true;
-          return Object.assign({}, state);
-        } else {
-          state.categories[id].isVisited = true;
-          state.hasNextButton = id <= lastId;
-          state.hasPrevButton = id !== 0;
-          state.isOnReview = false;
-          state.maxReachedStep = Math.max(state.maxReachedStep, activeId);
-          return Object.assign({}, state);
-        }
-      }
-    case 'update/category':
-      {
-        const {
-          id,
-          ajv,
-          errors
-        } = action.payload;
-        if (id === state.categories.length) {
-          return Object.assign({}, state);
-        }
-        /*
-          ctx.core.errors only includes required errors when the fields are touched. In this case, we still ajv to figure out the required errors at the very beginning.
-         */
-        const incompletePaths = getIncompletePaths(ajv, ((_a = state.categories[id]) === null || _a === void 0 ? void 0 : _a.scopes) || []);
-        const errorsInCategory = getErrorsInScopes(errors, ((_b = state.categories[id]) === null || _b === void 0 ? void 0 : _b.scopes) || []);
-        state.categories[id].isCompleted = (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0;
-        state.categories[id].isValid = errorsInCategory.length === 0;
-        state.categories[id].isVisited = true;
-        return Object.assign({}, state);
-      }
-    case 'validate/form':
-      {
-        const {
-          errors
-        } = action.payload;
-        state.isValid = errors.length === 0;
-        return Object.assign({}, state);
-      }
-    case 'toggle/category/review-link':
-      {
-        const {
-          id
-        } = action.payload;
-        state.categories[id].showReviewPageLink = !state.categories[id].showReviewPageLink;
-        return Object.assign({}, state);
-      }
-    default:
-      return state;
-  }
-};
-
-const createStepperContextInitData = props => {
-  var _a;
-  const {
-    uischema,
-    data,
-    schema,
-    ajv,
-    t,
-    visible,
-    path
-  } = props;
-  const categorization = uischema;
-  const valid = ajv.validate(schema, data || {});
-  const categories = (_a = categorization.elements) === null || _a === void 0 ? void 0 : _a.map((c, id) => {
-    const scopes = pickPropertyValues(c, 'scope', 'ListWithDetail');
-    const incompletePaths = getIncompletePaths(ajv, scopes);
-    return {
-      id,
-      label: deriveLabelForUISchemaElement(c, t),
-      scopes,
-      isVisited: false,
-      isCompleted: (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0,
-      isValid: (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0,
-      uischema: c,
-      showReviewPageLink: props.withBackReviewBtn || false,
-      isEnabled: isEnabled(c, data, '', ajv),
-      visible
-    };
-  });
-  const activeId = (props === null || props === void 0 ? void 0 : props.activeId) || 0;
-  return {
-    categories: categories,
-    activeId,
-    hasNextButton: activeId !== (categories === null || categories === void 0 ? void 0 : categories.length),
-    hasPrevButton: activeId > 0 && activeId !== (categories === null || categories === void 0 ? void 0 : categories.length),
-    path,
-    isOnReview: activeId === (categories === null || categories === void 0 ? void 0 : categories.length),
-    isValid: valid === true,
-    maxReachedStep: 0
-  };
-};
-const JsonFormsStepperContext = /*#__PURE__*/createContext(undefined);
-const JsonFormsStepperContextProvider = ({
-  children,
-  StepperProps
-}) => {
-  var _a;
-  const ctx = useJsonForms();
-  const {
-    schema,
-    ajv
-  } = StepperProps;
-  const [stepperState, dispatch] = useReducer(stepperReducer, createStepperContextInitData(StepperProps));
-  const stepperDispatch = (StepperProps === null || StepperProps === void 0 ? void 0 : StepperProps.customDispatch) || dispatch;
-  const context = useMemo(() => {
-    return {
-      isProvided: true,
-      stepperDispatch,
-      selectStepperState: () => {
-        return stepperState;
-      },
-      selectIsDisabled: () => {
-        var _a;
-        const category = (_a = stepperState.categories) === null || _a === void 0 ? void 0 : _a[stepperState.activeId];
-        return category === undefined ? false : !(category === null || category === void 0 ? void 0 : category.isEnabled);
-      },
-      selectIsActive: id => {
-        return id === stepperState.activeId;
-      },
-      selectPath: () => {
-        return stepperState.path;
-      },
-      selectCategory: id => {
-        return stepperState.categories[id];
-      },
-      validatePage: id => {
-        var _a;
-        stepperDispatch({
-          type: 'update/category',
-          payload: {
-            errors: (_a = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _a === void 0 ? void 0 : _a.errors,
-            id,
-            ajv
-          }
-        });
-      },
-      goToPage: (id, updateCategoryId) => {
-        var _a, _b, _c;
-        ajv.validate(schema, ((_a = ctx.core) === null || _a === void 0 ? void 0 : _a.data) || {});
-        if (stepperState.isOnReview !== true) {
-          for (let i = 0; i < id; i++) {
-            stepperDispatch({
-              type: 'update/category',
-              payload: {
-                errors: (_b = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _b === void 0 ? void 0 : _b.errors,
-                id: i,
-                ajv
-              }
-            });
-          }
-        }
-        stepperDispatch({
-          type: 'validate/form',
-          payload: {
-            errors: (_c = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _c === void 0 ? void 0 : _c.errors
-          }
-        });
-        stepperDispatch({
-          type: 'page/to/index',
-          payload: {
-            id
-          }
-        });
-      },
-      toggleShowReviewLink: id => {
-        stepperDispatch({
-          type: 'toggle/category/review-link',
-          payload: {
-            id
-          }
-        });
-      }
-    };
-  }, [stepperDispatch, stepperState, (_a = ctx.core) === null || _a === void 0 ? void 0 : _a.errors]);
-  useEffect(() => {
-    if ((context === null || context === void 0 ? void 0 : context.isProvided) === true) {
-      /* The block is used to cache the state for the tenant web app review editor  */
-      stepperDispatch({
-        type: 'update/uischema',
-        payload: {
-          state: createStepperContextInitData(Object.assign(Object.assign({}, StepperProps), {
-            activeId: stepperState === null || stepperState === void 0 ? void 0 : stepperState.activeId
-          }))
-        }
-      });
-      context.goToPage(stepperState.maxReachedStep);
-      context.goToPage(stepperState.activeId);
-    }
-  }, [JSON.stringify(StepperProps.uischema), JSON.stringify(StepperProps.schema)]);
-  return jsx(JsonFormsStepperContext.Provider, {
-    value: context,
-    children: children
-  });
-};
-
-const GoAInputBaseTableReview = props => {
-  var _a, _b, _c, _d;
-  const {
-    data,
-    uischema,
-    label
-  } = props;
-  const labelToUpdate = convertToSentenceCase(getLabelText(uischema.scope, label || ''));
-  const categoryIndex = (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.categoryIndex;
-  const formStepperCtx = useContext(JsonFormsStepperContext);
-  let reviewText = data;
-  const isBoolean = typeof data === 'boolean';
-  if (isBoolean) {
-    const checkboxLabel = ((_c = (_b = uischema.options) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.trim()) || convertToSentenceCase(getLastSegmentFromPointer(uischema.scope));
-    if (((_d = uischema.options) === null || _d === void 0 ? void 0 : _d.radio) === true) {
-      reviewText = data ? `Yes` : `No`;
-    } else {
-      if (label !== '' || typeof label === 'boolean') {
-        reviewText = data ? `Yes` : `No`;
-      } else {
-        reviewText = data ? `Yes (${checkboxLabel.trim()})` : `No (${checkboxLabel.trim()})`;
-      }
-    }
-  }
-  return jsxs("tr", {
-    "data-testid": `input-base-table-${label}-row`,
-    children: [jsx(PageReviewNameCol, {
-      children: jsx("strong", {
-        children: labelToUpdate
-      })
-    }), jsx(PageReviewValueCol, {
-      children: reviewText
-    }), jsx(PageReviewActionCol, {
-      children: jsx(GoAButton, {
-        type: "tertiary",
-        testId: `page-review-change-${label}-btn`,
-        onClick: () => {
-          if (formStepperCtx) {
-            formStepperCtx.toggleShowReviewLink(categoryIndex);
-            formStepperCtx.goToPage(categoryIndex);
-          }
-        },
-        children: "Change"
-      })
-    })]
-  });
-};
-const GoAInputBaseTableReviewControl = withJsonFormsControlProps(GoAInputBaseTableReview);
-
-let _$7 = t => t,
-  _t$7;
-const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
-  return elements.map((child, index) => jsx("div", {
-    children: jsx(JsonFormsDispatch, {
-      uischema: child,
-      schema: schema,
-      path: path,
-      enabled: enabled,
-      renderers: renderers,
-      cells: cells
-    }, path)
-  }, index));
-};
-const withAjvProps = Component => function WithAjvProps(props) {
-  const ctx = useJsonForms();
-  const ajv = getAjv({
-    jsonforms: Object.assign({}, ctx)
-  });
-  return jsx(Component, Object.assign({}, props, {
-    ajv: ajv
-  }));
-};
-const LayoutRenderer = ({
-  elements,
-  schema,
-  path,
-  enabled,
-  direction,
-  renderers,
-  cells,
-  visible,
-  width
-}) => {
-  if (isEmpty(elements)) {
-    return null;
-  } else {
-    if (direction === 'row') {
-      return jsx(Visible, {
-        visible: visible,
-        children: jsx(GoAGrid, {
-          minChildWidth: width || '10ch',
-          children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
-        })
-      });
-    } else {
-      return jsx(Visible, {
-        visible: visible,
-        children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
-      });
-    }
-  }
-};
-const ReviewLayoutRenderer = ({
-  elements,
-  schema,
-  path,
-  enabled,
-  direction,
-  renderers,
-  cells,
-  visible,
-  width
-}) => {
-  if (isEmpty(elements)) {
-    return null;
-  } else {
-    if (direction === 'row') {
-      return jsx(Visible, {
-        visible: visible,
-        children: jsx(ReviewGrid, {
-          children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
-        })
-      });
-    } else {
-      return jsx(Visible, {
-        visible: visible,
-        children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
-      });
-    }
-  }
-};
-const ReviewGrid = styled.div(_t$7 || (_t$7 = _$7`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, calc(50% - 8px)));
-  gap: 16px;
-`));
+const ReviewGrid = styled.div(_t$7 || (_t$7 = _$7`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, calc(50% - 8px)));
+  gap: 16px;
+`));
 
 let _$6 = t => t,
   _t$6,
@@ -5778,7 +5433,8 @@ let _$6 = t => t,
   _t13$1,
   _t14$1,
   _t15$1,
-  _t16;
+  _t16$1,
+  _t17$1;
 const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
   display: flex;
   flex-direction: column;
@@ -5869,7 +5525,14 @@ const TableReviewItem = styled.div(_t15$1 || (_t15$1 = _$6`
   border-radius: 5px;
   padding: var(--goa-space-2xl);
 `));
-const TableReviewCategoryLabel = styled.h3(_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$1 || (_t17$1 = _$6`
   color: var(--goa-color-text-secondary) !important;
 `));
 
@@ -6170,101 +5833,429 @@ $$a({ target: 'Array', proto: true }, {
     A.length = flattenIntoArray(A, O, O, sourceLen, 0, depthArg === undefined ? 1 : toIntegerOrInfinity(depthArg));
     return A;
   }
-});
-
-// this method was added to unscopables after implementation
-// in popular engines, so it's moved to a separate module
-var addToUnscopables = addToUnscopables$4;
-
-// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables('flat');
+});
+
+// this method was added to unscopables after implementation
+// in popular engines, so it's moved to a separate module
+var addToUnscopables = addToUnscopables$4;
+
+// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
+addToUnscopables('flat');
+
+// eslint-disable-next-line
+const getProperty = (obj, propName) => {
+  if (obj[propName] !== undefined) return obj[propName];
+  for (const key in obj) {
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      const result = getProperty(obj[key], propName);
+      if (result !== undefined) return result;
+    }
+  }
+};
+// eslint-disable-next-line
+const pickPropertyValues = (obj, property, endWithType) => {
+  let values = [];
+  Object.keys(obj).forEach(function (key) {
+    var _a;
+    if (key === property) {
+      values.push(obj[key]);
+    } else if (_$c.isObject(obj[key])) {
+      // if the object type is equal to end type, we are not going to continue the recursive approach
+      if (endWithType && ((_a = obj[key]) === null || _a === void 0 ? void 0 : _a.type) === endWithType) {
+        if (property in obj[key]) {
+          values.push(obj[key][property]);
+        }
+      } else {
+        values = [...values, ...pickPropertyValues(obj[key], property, endWithType)];
+      }
+    } else if (_$c.isArray(obj[key])) {
+      const nextValues = obj[key].map(function (arrayObj) {
+        return pickPropertyValues(arrayObj, property, endWithType);
+      });
+      values = [...values, ...nextValues];
+    }
+  });
+  return values;
+};
+
+const FormStepperReviewer = props => {
+  var _a, _b, _c;
+  const {
+    uischema,
+    data,
+    schema,
+    ajv,
+    cells,
+    enabled,
+    navigationFunc
+  } = props;
+  const componentProps = (_b = (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) !== null && _b !== void 0 ? _b : {};
+  const readOnly = (_c = componentProps === null || componentProps === void 0 ? void 0 : componentProps.readOnly) !== null && _c !== void 0 ? _c : false;
+  const categorization = uischema;
+  const categories = categorization.elements.filter(category => isVisible(category, data, '', ajv));
+  const rescopeMaps = ['#/properties/albertaAddress', '#/properties/canadianAddress', '#/properties/sin'];
+  return jsx(ReviewItem, {
+    children: categories.map((category, index) => {
+      const categoryLabel = category.label || category.i18n || 'Unknown Category';
+      const testId = `${categoryLabel}-review-link`;
+      return jsxs(ReviewItemSection, {
+        children: [jsxs(ReviewItemHeader, {
+          children: [jsx(ReviewItemTitle, {
+            children: categoryLabel
+          }), navigationFunc && jsx(Anchor, {
+            onClick: () => {
+              navigationFunc(index);
+            },
+            "data-testid": testId,
+            onKeyDown: e => {
+              if (!readOnly && (e.key === ' ' || e.key === 'Enter')) {
+                e.preventDefault();
+                navigationFunc(index);
+              }
+            },
+            children: readOnly ? 'View' : 'Edit'
+          })]
+        }), jsx(GoAGrid, {
+          minChildWidth: "100%",
+          children: category.elements.filter(field => {
+            var _a, _b;
+            // [TODO] we need to double check why we cannot hide the elements at the element level
+            const conditionProps = (_a = field.rule) === null || _a === void 0 ? void 0 : _a.condition;
+            /* istanbul ignore next */
+            if (conditionProps && data) {
+              const canHideControlParts = (_b = conditionProps === null || conditionProps === void 0 ? void 0 : conditionProps.scope) === null || _b === void 0 ? void 0 : _b.split('/');
+              const canHideControl = canHideControlParts && canHideControlParts[(canHideControlParts === null || canHideControlParts === void 0 ? 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 _a;
+              return (_a = layout.elements) === null || _a === void 0 ? void 0 : _a.map(el => {
+                const element = el;
+                return element.scope;
+              }).includes(scope);
+            })) {
+              return layout.elements;
+            } else {
+              return e;
+            }
+          }).flat().map((element, index) => {
+            return jsx("div", {
+              className: "element-style",
+              children: jsx(JsonFormsDispatch, {
+                "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
+                schema: schema,
+                uischema: element,
+                enabled: enabled,
+                renderers: GoAReviewRenderers,
+                cells: cells
+              })
+            }, `form-stepper-category-${index}`);
+          })
+        })]
+      }, index);
+    })
+  });
+};
+const FormStepperReviewControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperReviewer)));
+
+const isErrorPathIncluded = (errorPaths, path) => {
+  return errorPaths.some(ePath => {
+    /**
+     *  case A: errorPaths: [name] path: [name]
+     *
+     *  case B: errorPath: [name] path: [name.firstName]
+     * */
+    return ePath === path || path.startsWith(ePath + '.');
+  });
+};
+function isNumber(value) {
+  return value != null && value !== '' && !isNaN(Number(value.toString()));
+}
+const getIncompletePaths = (ajv, scopes) => {
+  var _a;
+  const requiredErrorPaths = (_a = ajv === null || ajv === void 0 ? void 0 : ajv.errors) === null || _a === void 0 ? void 0 : _a.filter(e => e.keyword === 'required' || e.keyword === 'minLength').map(e => {
+    return getControlPath(e);
+  });
+  const _scopes = scopes.map(scope => toDataPath(scope)).filter(path => requiredErrorPaths && isErrorPathIncluded(requiredErrorPaths, path));
+  return _scopes;
+};
+const subErrorInParent = (error, paths) => {
+  /*
+    Detect is there sub error in an object array.
+    For example: error with instance path /roadmap/0/when belongs to /roadmap
+  */
+  const errorPaths = error.instancePath.split('/');
+  if (errorPaths.length < 2) return false;
+  // For case /roadmap/0
+  if (errorPaths.length > 1 && isNumber(errorPaths[errorPaths.length - 1])) {
+    const parentPath = errorPaths.slice(0, errorPaths.length - 1).join('/');
+    return paths.includes(parentPath);
+  }
+  // For case /roadmap/0/when
+  if (errorPaths.length > 2 && isNumber(errorPaths[errorPaths.length - 2])) {
+    const parentPath = errorPaths.slice(0, errorPaths.length - 2).join('/');
+    return paths.includes(parentPath);
+  }
+  return false;
+};
+const getErrorsInScopes = (errors, scopes) => {
+  return errors.filter(e => {
+    // transfer scope #properties/value to data path /value
+    const dataPaths = scopes.map(s => '/' + toDataPath(s));
+    return dataPaths.includes(e.instancePath) || subErrorInParent(e, dataPaths);
+  });
+};
+
+const stepperReducer = (state, action) => {
+  var _a, _b;
+  const {
+    activeId,
+    categories
+  } = state;
+  const lastId = categories[categories.length - 1].id;
+  switch (action.type) {
+    case 'update/uischema':
+      {
+        return Object.assign({}, action.payload.state);
+      }
+    case 'page/next':
+      {
+        state.activeId += 1;
+        if (activeId === lastId) {
+          state.isOnReview = true;
+          state.hasNextButton = false;
+          state.hasPrevButton = false;
+        } else {
+          state.hasNextButton = true;
+          state.hasPrevButton = true;
+          state.isOnReview = false;
+        }
+        state.categories[activeId].isVisited = true;
+        return Object.assign({}, state);
+      }
+    case 'page/prev':
+      {
+        state.categories[activeId].isVisited = true;
+        if (activeId > 0) {
+          state.activeId -= 1;
+          state.hasPrevButton = state.activeId !== 0;
+          state.hasNextButton = true;
+          state.isOnReview = false;
+        }
+        return Object.assign({}, state);
+      }
+    case 'page/to/index':
+      {
+        const {
+          id
+        } = action.payload;
+        state.activeId = id;
+        if (id > lastId) {
+          state.isOnReview = true;
+          state.hasNextButton = false;
+          state.hasPrevButton = true;
+          return Object.assign({}, state);
+        } else {
+          state.categories[id].isVisited = true;
+          state.hasNextButton = id <= lastId;
+          state.hasPrevButton = id !== 0;
+          state.isOnReview = false;
+          state.maxReachedStep = Math.max(state.maxReachedStep, activeId);
+          return Object.assign({}, state);
+        }
+      }
+    case 'update/category':
+      {
+        const {
+          id,
+          ajv,
+          errors
+        } = action.payload;
+        if (id === state.categories.length) {
+          return Object.assign({}, state);
+        }
+        /*
+          ctx.core.errors only includes required errors when the fields are touched. In this case, we still ajv to figure out the required errors at the very beginning.
+         */
+        const incompletePaths = getIncompletePaths(ajv, ((_a = state.categories[id]) === null || _a === void 0 ? void 0 : _a.scopes) || []);
+        const errorsInCategory = getErrorsInScopes(errors, ((_b = state.categories[id]) === null || _b === void 0 ? void 0 : _b.scopes) || []);
+        state.categories[id].isCompleted = (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0;
+        state.categories[id].isValid = errorsInCategory.length === 0;
+        state.categories[id].isVisited = true;
+        return Object.assign({}, state);
+      }
+    case 'validate/form':
+      {
+        const {
+          errors
+        } = action.payload;
+        state.isValid = errors.length === 0;
+        return Object.assign({}, state);
+      }
+    case 'toggle/category/review-link':
+      {
+        const {
+          id
+        } = action.payload;
+        state.categories[id].showReviewPageLink = !state.categories[id].showReviewPageLink;
+        return Object.assign({}, state);
+      }
+    default:
+      return state;
+  }
+};
 
-const FormStepperReviewer = props => {
-  var _a, _b, _c;
+const createStepperContextInitData = props => {
+  var _a;
   const {
     uischema,
     data,
     schema,
     ajv,
-    cells,
-    enabled,
-    navigationFunc
+    t,
+    visible,
+    path
   } = props;
-  const componentProps = (_b = (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) !== null && _b !== void 0 ? _b : {};
-  const readOnly = (_c = componentProps === null || componentProps === void 0 ? void 0 : componentProps.readOnly) !== null && _c !== void 0 ? _c : false;
   const categorization = uischema;
-  const categories = categorization.elements.filter(category => isVisible(category, data, '', ajv));
-  const rescopeMaps = ['#/properties/albertaAddress', '#/properties/canadianAddress', '#/properties/sin'];
-  return jsx(ReviewItem, {
-    children: categories.map((category, index) => {
-      const categoryLabel = category.label || category.i18n || 'Unknown Category';
-      const testId = `${categoryLabel}-review-link`;
-      return jsxs(ReviewItemSection, {
-        children: [jsxs(ReviewItemHeader, {
-          children: [jsx(ReviewItemTitle, {
-            children: categoryLabel
-          }), navigationFunc && jsx(Anchor, {
-            onClick: () => {
-              navigationFunc(index);
-            },
-            "data-testid": testId,
-            onKeyDown: e => {
-              if (!readOnly && (e.key === ' ' || e.key === 'Enter')) {
-                e.preventDefault();
-                navigationFunc(index);
-              }
-            },
-            children: readOnly ? 'View' : 'Edit'
-          })]
-        }), jsx(GoAGrid, {
-          minChildWidth: "100%",
-          children: category.elements.filter(field => {
-            var _a, _b;
-            // [TODO] we need to double check why we cannot hide the elements at the element level
-            const conditionProps = (_a = field.rule) === null || _a === void 0 ? void 0 : _a.condition;
-            /* istanbul ignore next */
-            if (conditionProps && data) {
-              const canHideControlParts = (_b = conditionProps === null || conditionProps === void 0 ? void 0 : conditionProps.scope) === null || _b === void 0 ? void 0 : _b.split('/');
-              const canHideControl = canHideControlParts && canHideControlParts[(canHideControlParts === null || canHideControlParts === void 0 ? void 0 : canHideControlParts.length) - 1];
-              const isHidden = getProperty(data, canHideControl);
-              if (!isHidden) {
-                return field;
+  const valid = ajv.validate(schema, data || {});
+  const categories = (_a = categorization.elements) === null || _a === void 0 ? void 0 : _a.map((c, id) => {
+    const scopes = pickPropertyValues(c, 'scope', 'ListWithDetail');
+    const incompletePaths = getIncompletePaths(ajv, scopes);
+    return {
+      id,
+      label: deriveLabelForUISchemaElement(c, t),
+      scopes,
+      isVisited: false,
+      isCompleted: (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0,
+      isValid: (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0,
+      uischema: c,
+      showReviewPageLink: props.withBackReviewBtn || false,
+      isEnabled: isEnabled(c, data, '', ajv),
+      visible
+    };
+  });
+  const activeId = (props === null || props === void 0 ? void 0 : props.activeId) || 0;
+  return {
+    categories: categories,
+    activeId,
+    hasNextButton: activeId !== (categories === null || categories === void 0 ? void 0 : categories.length),
+    hasPrevButton: activeId > 0 && activeId !== (categories === null || categories === void 0 ? void 0 : categories.length),
+    path,
+    isOnReview: activeId === (categories === null || categories === void 0 ? void 0 : categories.length),
+    isValid: valid === true,
+    maxReachedStep: 0
+  };
+};
+const JsonFormsStepperContext = /*#__PURE__*/createContext(undefined);
+const JsonFormsStepperContextProvider = ({
+  children,
+  StepperProps
+}) => {
+  var _a;
+  const ctx = useJsonForms();
+  const {
+    schema,
+    ajv
+  } = StepperProps;
+  const [stepperState, dispatch] = useReducer(stepperReducer, createStepperContextInitData(StepperProps));
+  const stepperDispatch = (StepperProps === null || StepperProps === void 0 ? void 0 : StepperProps.customDispatch) || dispatch;
+  const context = useMemo(() => {
+    return {
+      isProvided: true,
+      stepperDispatch,
+      selectStepperState: () => {
+        return stepperState;
+      },
+      selectIsDisabled: () => {
+        var _a;
+        const category = (_a = stepperState.categories) === null || _a === void 0 ? void 0 : _a[stepperState.activeId];
+        return category === undefined ? false : !(category === null || category === void 0 ? void 0 : category.isEnabled);
+      },
+      selectIsActive: id => {
+        return id === stepperState.activeId;
+      },
+      selectPath: () => {
+        return stepperState.path;
+      },
+      selectCategory: id => {
+        return stepperState.categories[id];
+      },
+      validatePage: id => {
+        var _a;
+        stepperDispatch({
+          type: 'update/category',
+          payload: {
+            errors: (_a = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _a === void 0 ? void 0 : _a.errors,
+            id,
+            ajv
+          }
+        });
+      },
+      goToPage: (id, updateCategoryId) => {
+        var _a, _b, _c;
+        ajv.validate(schema, ((_a = ctx.core) === null || _a === void 0 ? void 0 : _a.data) || {});
+        if (stepperState.isOnReview !== true) {
+          for (let i = 0; i < id; i++) {
+            stepperDispatch({
+              type: 'update/category',
+              payload: {
+                errors: (_b = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _b === void 0 ? void 0 : _b.errors,
+                id: i,
+                ajv
               }
-            } else {
-              return field;
-            }
-          }).map(e => {
-            const layout = e;
-            if (rescopeMaps.some(scope => {
-              var _a;
-              return (_a = layout.elements) === null || _a === void 0 ? void 0 : _a.map(el => {
-                const element = el;
-                return element.scope;
-              }).includes(scope);
-            })) {
-              return layout.elements;
-            } else {
-              return e;
-            }
-          }).flat().map((element, index) => {
-            return jsx("div", {
-              className: "element-style",
-              children: jsx(JsonFormsDispatch, {
-                "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
-                schema: schema,
-                uischema: element,
-                enabled: enabled,
-                renderers: GoAReviewRenderers,
-                cells: cells
-              })
-            }, `form-stepper-category-${index}`);
-          })
-        })]
-      }, index);
-    })
+            });
+          }
+        }
+        stepperDispatch({
+          type: 'validate/form',
+          payload: {
+            errors: (_c = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _c === void 0 ? void 0 : _c.errors
+          }
+        });
+        stepperDispatch({
+          type: 'page/to/index',
+          payload: {
+            id
+          }
+        });
+      },
+      toggleShowReviewLink: id => {
+        stepperDispatch({
+          type: 'toggle/category/review-link',
+          payload: {
+            id
+          }
+        });
+      }
+    };
+  }, [stepperDispatch, stepperState, (_a = ctx.core) === null || _a === void 0 ? void 0 : _a.errors]);
+  useEffect(() => {
+    if ((context === null || context === void 0 ? void 0 : context.isProvided) === true) {
+      /* The block is used to cache the state for the tenant web app review editor  */
+      stepperDispatch({
+        type: 'update/uischema',
+        payload: {
+          state: createStepperContextInitData(Object.assign(Object.assign({}, StepperProps), {
+            activeId: stepperState === null || stepperState === void 0 ? void 0 : stepperState.activeId
+          }))
+        }
+      });
+      context.goToPage(stepperState.maxReachedStep);
+      context.goToPage(stepperState.activeId);
+    }
+  }, [JSON.stringify(StepperProps.uischema), JSON.stringify(StepperProps.schema)]);
+  return jsx(JsonFormsStepperContext.Provider, {
+    value: context,
+    children: children
   });
 };
-const FormStepperReviewControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperReviewer)));
 
 const summaryLabel = 'Summary';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -6494,7 +6485,6 @@ const BackButton = ({
 };
 
 const FormStepperPageReviewer = props => {
-  var _a, _b;
   const {
     uischema,
     data,
@@ -6504,18 +6494,35 @@ const FormStepperPageReviewer = props => {
     enabled,
     navigationFunc
   } = props;
-  (_b = (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) !== null && _b !== void 0 ? _b : {};
   const categorization = uischema;
   const categories = categorization.elements.filter(category => isVisible(category, data, '', ajv));
   const rescopeMaps = ['#/properties/albertaAddress', '#/properties/canadianAddress', '#/properties/sin'];
+  const formStepperCtx = useContext(JsonFormsStepperContext);
   return jsxs(TableReviewItem, {
     children: [jsx("h2", {
       children: "Review your answers"
     }), categories.map((category, index) => {
       const categoryLabel = category.label || category.i18n || 'Unknown Category';
       return jsxs(Fragment, {
-        children: [jsx(TableReviewCategoryLabel, {
-          children: categoryLabel
+        children: [jsx("div", {
+          children: jsxs(TableReviewPageTitleRow, {
+            children: [jsx(TableReviewCategoryLabel, {
+              children: categoryLabel
+            }), jsx("div", {
+              className: "right",
+              children: jsx(GoAButton, {
+                type: "tertiary",
+                testId: `page-review-change-${category.label}-btn`,
+                onClick: () => {
+                  if (formStepperCtx) {
+                    formStepperCtx.toggleShowReviewLink(index);
+                    formStepperCtx.goToPage(index);
+                  }
+                },
+                children: "Change"
+              })
+            })]
+          })
         }), jsx(TableReviewItemSection, {
           children: category.elements.filter(field => {
             var _a, _b;
@@ -7200,6 +7207,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,
@@ -7215,7 +7308,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);
 `));
@@ -7283,6 +7380,31 @@ const ListContainer = styled.div(_t14 || (_t14 = _$2`
 const TableTHHeader = styled.th(_t15 || (_t15 = _$2`
   background-color: var(--goa-color-greyscale-100) !important;
 `));
+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({
   open,
@@ -7355,116 +7477,83 @@ 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: {}
-};
-
-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 renderCellColumn = ({
+  currentData,
+  error,
+  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);
+  }
+  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 (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,
@@ -7539,12 +7628,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,
@@ -7562,13 +7647,26 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
   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;
   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,
@@ -7578,99 +7676,114 @@ 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]) => {
+              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)) && 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])
+                      })
+                    })
+                  }, 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);
-        })
+              })]
+            }, `${i}-${num}`);
+          })
+        })]
+      }), hasAnyErrors && isInReview && jsx(GoAFormItem, {
+        error: `There are validation errors for '${capitalizeFirstLetter(rowPath)}'`
       })]
     })]
   });
@@ -7754,7 +7867,6 @@ const ObjectArrayList$1 = ({
     data: data
   }, 0);
 };
-// eslint-disable-next-line
 const ObjectArrayControl = props => {
   var _a, _b, _c;
   const [registers, dispatch] = useReducer(objectListReducer, initialState);
@@ -7860,8 +7972,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]: {
@@ -7875,9 +7986,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, {
@@ -9321,29 +9432,17 @@ const AddressLoopUpControlTableReview = props => {
     schema,
     uischema
   } = props;
-  const categoryIndex = (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.categoryIndex;
-  const formStepperCtx = useContext(JsonFormsStepperContext);
+  (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.categoryIndex;
+  useContext(JsonFormsStepperContext);
   const isAlbertaAddress = ((_c = (_b = schema === null || schema === void 0 ? void 0 : schema.properties) === null || _b === void 0 ? void 0 : _b.subdivisionCode) === null || _c === void 0 ? void 0 : _c.const) === 'AB';
   return jsxs(Fragment, {
-    children: [jsxs("tr", {
+    children: [jsx("tr", {
       "data-testid": "address-lookup-table-review",
-      children: [jsx(PageReviewNameCol, {
+      children: jsx(PageReviewNameCol, {
         children: jsx("strong", {
           children: `${isAlbertaAddress ? 'Alberta' : 'Canada'} postal address`
         })
-      }), jsx(PageReviewValueCol, {}), jsx(PageReviewActionCol, {
-        children: jsx(GoAButton, {
-          type: "tertiary",
-          testId: `page-review-change-address-btn`,
-          onClick: () => {
-            if (formStepperCtx) {
-              formStepperCtx.toggleShowReviewLink(categoryIndex);
-              formStepperCtx.goToPage(categoryIndex);
-            }
-          },
-          children: "Change"
-        })
-      })]
+      })
     }), jsx("tr", {
       children: jsx("td", {
         colSpan: 3,