@abgov/jsonforms-components 1.57.1 → 1.58.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, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoATable, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
+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 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, getAjv, isVisible, getControlPath, toDataPath, deriveLabelForUISchemaElement, isEnabled, 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, getControlPath, toDataPath, deriveLabelForUISchemaElement, isEnabled, getAjv, isVisible, 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';
@@ -3800,7 +3800,11 @@ const JsonFormRegisterProvider = ({
 let _$a = t => t,
   _t$a,
   _t2$6,
-  _t3$5;
+  _t3$5,
+  _t4$5,
+  _t5$3,
+  _t6$3,
+  _t7$2;
 const FormFieldWrapper = styled.div(_t$a || (_t$a = _$a`
   margin-bottom: var(--goa-space-l);
 `));
@@ -3818,6 +3822,23 @@ const RequiredTextLabel = styled.label(_t3$5 || (_t3$5 = _$a`
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
+const PageReviewNameCol = styled.td(_t4$5 || (_t4$5 = _$a`
+  width: 70%;
+  padding-top: var(--goa-space-s);
+  padding-bottom: var(--goa-space-s);
+  padding-right: var(--goa-space-m);
+`));
+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`
+  height: 28px;
+`));
 
 const GoAInputBaseControl = props => {
   var _a, _b;
@@ -5057,19 +5078,21 @@ const BooleanComponent = ({
 }) => {
   var _a, _b, _c;
   const text = `${((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.text) ? (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.text : (schema === null || schema === void 0 ? void 0 : schema.title) ? schema === null || schema === void 0 ? void 0 : schema.title : schema === null || schema === void 0 ? void 0 : schema.description}${required ? ' (required)' : ''}`;
-  return jsx(GoACheckbox, Object.assign({
-    error: isVisited && errors.length > 0,
-    testId: `${path}-checkbox-test-id`,
-    disabled: !enabled,
-    text: text && text !== 'undefined' ? text : convertToReadableFormat(getLastSegmentFromPointer(uischema.scope)),
-    name: `${path}`,
-    checked: data,
-    onChange: (_, checked) => {
-      handleChange(path, checked);
-    }
-  }, (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.componentProps, {
-    mb: "none"
-  }));
+  return jsx(CheckboxWrapper, {
+    children: jsx(GoACheckbox, Object.assign({
+      error: isVisited && errors.length > 0,
+      testId: `${path}-checkbox-test-id`,
+      disabled: !enabled,
+      text: text && text !== 'undefined' ? text : convertToReadableFormat(getLastSegmentFromPointer(uischema.scope)),
+      name: `${path}`,
+      checked: data,
+      onChange: (_, checked) => {
+        handleChange(path, checked);
+      }
+    }, (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.componentProps, {
+      mb: "none"
+    }))
+  });
 };
 const BooleanControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
   input: BooleanComponent
@@ -5158,10 +5181,9 @@ const CheckBoxGroupDiv = styled.div(_t$8 || (_t$8 = _$8`
 `));
 
 const CheckboxGroup = props => {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     data,
-    className,
     id,
     schema,
     uischema,
@@ -5172,10 +5194,11 @@ const CheckboxGroup = props => {
     label,
     t
   } = props;
-  const enumData = (schema === null || schema === void 0 ? void 0 : schema.enum) || [];
+  const newSchema = schema;
+  const enumData = (schema === null || schema === void 0 ? void 0 : schema.enum) || ((_a = newSchema === null || newSchema === void 0 ? void 0 : newSchema.items) === null || _a === void 0 ? void 0 : _a.enum) || [];
   const appliedUiSchemaOptions = merge({}, config, props.uischema.options, options);
   return jsx(Checkboxes, {
-    orientation: ((_a = uischema.options) === null || _a === void 0 ? void 0 : _a.orientation) ? (_b = uischema.options) === null || _b === void 0 ? void 0 : _b.orientation : 'vertical',
+    orientation: ((_b = uischema.options) === null || _b === void 0 ? void 0 : _b.orientation) ? (_c = uischema.options) === null || _c === void 0 ? void 0 : _c.orientation : 'vertical',
     testId: `${label || id}-jsonforms-checkboxes`,
     children: enumData.map(enumValue => {
       return jsx(GoACheckbox, Object.assign({
@@ -5186,7 +5209,13 @@ const CheckboxGroup = props => {
         text: enumValue,
         testId: `${enumValue}-checkbox`,
         onChange: (name, value) => {
-          handleChange(path, value === 'true' ? 'Yes' : 'No');
+          let newData = Array.isArray(data) ? [...data] : [];
+          if (value) {
+            newData.push(enumValue);
+          } else {
+            newData = newData.filter(item => item !== enumValue);
+          }
+          handleChange(path, newData);
         }
       }));
     })
@@ -5198,7 +5227,7 @@ const EnumCheckboxControl = props => {
   }));
 };
 const GoAEnumCheckboxGroupControl = withJsonFormsEnumProps(withTranslateProps(EnumCheckboxControl), true);
-const GoACheckoutGroupControlTester = rankWith(18, and(isEnumControl, optionIs('format', 'checkbox')));
+const GoACheckoutGroupControlTester = rankWith(18, and(optionIs('format', 'checkbox')));
 
 const warningIcon = errorMessage => {
   return jsxs(WarningIconDiv, {
@@ -5206,7 +5235,8 @@ const warningIcon = errorMessage => {
       type: "warning",
       size: "small",
       theme: "filled",
-      mt: "2xs"
+      mt: "2xs",
+      ariaLabel: "warning"
     }), errorMessage]
   });
 };
@@ -5267,888 +5297,974 @@ const GoInputBaseReview = props => jsx(GoAInputBaseControl, Object.assign({}, pr
 }));
 const GoInputBaseReviewControl = withJsonFormsControlProps(GoInputBaseReview);
 
-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)
-      });
+// 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;
     }
   }
 };
-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)
+// 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 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,
-  _t2$4,
-  _t3$3,
-  _t4$3,
-  _t5$2,
-  _t6$2,
-  _t7$1,
-  _t8$1,
-  _t9$1,
-  _t10$1,
-  _t11$1,
-  _t12$1,
-  _t13$1;
-const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
-  display: flex;
-  flex-direction: column;
-  border: var(--goa-border-width-s) solid grey;
-  border-radius: var(--goa-border-radius-m);
-  margin: var(--goa-space-2xs);
-  padding: var(--goa-space-xs);
-  div:empty {
-    display: none;
+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);
   }
-`));
-const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$6`
-  background-color: #f1f1f1;
-  margin-bottom: var(--goa-space-m);
-  padding: var(--goa-space-m);
-  border: 1px solid #dcdcdc;
-  border-radius: 5px;
-
-  .element-style {
-    max-width: 1600px;
+  // 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 ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$6`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--goa-space-xl);
-`));
-const ReviewItemTitle = styled.div(_t4$3 || (_t4$3 = _$6`
-  font-size: var(--goa-space-l);
-  line-height: var(--goa-space-xl);
-  font-weight: 300;
-`));
-const Anchor = styled.div(_t5$2 || (_t5$2 = _$6`
-  color: #0070c4;
-  text-decoration: underline;
-  outline: none;
-  cursor: pointer;
+  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);
+  });
+};
 
-  &:focus {
-    outline: 2px solid #0070c4;
-    background-color: #e6f7ff;
-  }
-`));
-styled.div(_t6$2 || (_t6$2 = _$6`
-  margin-left: var(--goa-space-m);
-`));
-styled.div(_t7$1 || (_t7$1 = _$6`
-  margin-bottom: var(--goa-space-m);
-`));
-styled.div(_t8$1 || (_t8$1 = _$6`
-  margin: var(--goa-space-s);
-  width: 100%;
-`));
-styled.h3(_t9$1 || (_t9$1 = _$6`
-  text-transform: capitalize;
-`));
-const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$6`
-  @media screen and (max-width: 767px) {
-    margin-bottom: var(--goa-space-l);
-  }
-  @media screen and (min-width: 768px) {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: var(--goa-space-l);
-  }
-`));
-const FormStepperSummaryH3 = styled.h3(_t11$1 || (_t11$1 = _$6`
-  flex: 1;
-  margin-bottom: var(--goa-space-m);
-  font-size: var(--goa-font-size-7);
-  line-height: var(--goa-line-height-4);
-  font-weight: var(--goa-font-weight-regular);
-`));
-const PageRenderPadding = styled.h3(_t12$1 || (_t12$1 = _$6`
-  margin-top: var(--goa-space-2xl);
-`));
-const PageBorder = styled.h3(_t13$1 || (_t13$1 = _$6`
-  padding: var(--goa-space-3xl);
-`));
-
-class ContextProviderClass {
-  addDataByUrl(key, url, processDataFunction, token) {
-    return __awaiter(this, void 0, void 0, function* () {
-      let header = {};
-      const [requestId, axiosWithConfig] = this.getAxiosInterceptorConfig(axios);
-      if (token) {
-        header = Object.assign(Object.assign({}, header), {
-          Authorization: `Bearer ${token}`
-        });
+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);
       }
-      yield axiosWithConfig.get(url, header).then(response => {
-        const processedData = processDataFunction(response.data);
-        this.enumValues.set(key, () => processedData);
-      }).catch(err => {
-        if (err.message.includes('CORS')) {
-          console.warn(err.message);
+    case 'page/next':
+      {
+        state.activeId += 1;
+        if (activeId === lastId) {
+          state.isOnReview = true;
+          state.hasNextButton = false;
+          state.hasPrevButton = false;
         } else {
-          console.warn(`addDataByUrl: ${err.message}`);
+          state.hasNextButton = true;
+          state.hasPrevButton = true;
+          state.isOnReview = false;
         }
-      });
-      axiosWithConfig.interceptors.request.eject(requestId);
-    });
-  }
-  constructor() {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.enumValues = new Map();
-    this.enumFunctions = new Map();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.enumSubmitFunctions = new Map();
-    this.addFormContextData = (key, data) => {
-      this.enumValues.set(key, () => data);
-    };
-    this.setup = props => {
-      var _a, _b;
-      this.selfProps = props;
-      if (props.fileManagement) {
-        const {
-          fileList,
-          uploadFile,
-          downloadFile,
-          deleteFile
-        } = props.fileManagement;
-        this.enumValues.set('file-list', () => fileList);
-        this.enumFunctions.set('upload-file', () => uploadFile);
-        this.enumFunctions.set('download-file', () => downloadFile);
-        this.enumFunctions.set('delete-file', () => deleteFile);
+        state.categories[activeId].isVisited = true;
+        return Object.assign({}, state);
       }
-      if (props.submit) {
+    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 {
-          submitForm
-        } = props.submit;
-        const submitFunction = submitForm;
-        this.enumSubmitFunctions.set('submit-form', () => submitFunction);
+          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);
+        }
       }
-      if (props.data) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        Object.keys(props.data).forEach(item => {
-          this.enumValues.set(item, () => props.data[item]);
-        });
+    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);
       }
-      if (!props.children) {
-        return null;
+    case 'validate/form':
+      {
+        const {
+          errors
+        } = action.payload;
+        state.isValid = errors.length === 0;
+        return Object.assign({}, state);
       }
-      if (props.formUrl) {
-        this.baseEnumerator.formUrl = props.formUrl;
+    case 'toggle/category/review-link':
+      {
+        const {
+          id
+        } = action.payload;
+        state.categories[id].showReviewPageLink = !state.categories[id].showReviewPageLink;
+        return Object.assign({}, state);
       }
-      this.baseEnumerator.isFormSubmitted = (_a = props.isFormSubmitted) !== null && _a !== void 0 ? _a : false;
-      return jsx(JsonFormContext.Provider, {
-        value: this.baseEnumerator,
-        children: (_b = this.selfProps) === null || _b === void 0 ? void 0 : _b.children
-      });
-    };
-    this.getContextProvider = () => {
-      var _a;
-      return jsx(JsonFormContext.Provider, {
-        value: this.baseEnumerator,
-        children: (_a = this.selfProps) === null || _a === void 0 ? void 0 : _a.children
-      });
-    };
-    this.getFormUrl = () => {
-      var _a;
-      return (_a = this.selfProps) === null || _a === void 0 ? void 0 : _a.formUrl;
-    };
-    this.getAxiosInterceptorConfig = axios => {
-      const requestId = axios.interceptors.request.use(req => {
-        if (req.data === undefined) {
-          throw new Error(`The URL: ${req.url} encountered a CORS error.`);
-        }
-        return req;
-      });
-      return [requestId, axios];
-    };
-    /**
-     * Grabs data stored under a given key
-     *
-     */
-    this.getFormContextData = key => {
-      const dataFunction = this.baseEnumerator.data.get(key);
-      return dataFunction && dataFunction();
-    };
-    /**
-     * Grabs all data
-     *
-     */
-    this.getAllFormContextData = () => {
-      const allData = [];
-      this.baseEnumerator.data.forEach((d, key) => {
-        allData.push({
-          [key]: d()
-        });
-      });
-      return allData;
-    };
-    this.baseEnumerator = {
-      data: this.enumValues,
-      functions: this.enumFunctions,
-      submitFunction: this.enumSubmitFunctions,
-      addFormContextData: this.addFormContextData,
-      getFormContextData: this.getFormContextData,
-      getAllFormContextData: this.getAllFormContextData,
-      formUrl: this.getFormUrl()
-    };
-    this.selfProps = {};
+    default:
+      return state;
   }
-}
-const ContextProviderC = new ContextProviderClass();
-const ContextProviderFactory = () => new ContextProviderClass().setup;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const JsonFormContext = /*#__PURE__*/createContext(null);
-
-const RenderStepElements = props => {
-  return jsx(Visible, {
-    visible: props.visible,
-    "date-testid": `${props.path}-categories-${props.categoryIndex}`,
-    children: props.category.elements.map((uiSchema, index) => {
-      return jsx(JsonFormsDispatch, {
-        schema: props.schema,
-        uischema: uiSchema,
-        renderers: props.renderers,
-        cells: props.cells,
-        path: props.path,
-        visible: props.visible,
-        enabled: props.enabled
-      }, `${props.path}-category-page-${index}`);
-    })
-  });
-};
-
-var uncurryThis$3 = functionUncurryThisClause;
-var aCallable$6 = aCallable$9;
-var NATIVE_BIND = functionBindNative;
-
-var bind$5 = uncurryThis$3(uncurryThis$3.bind);
-
-// optional / simple context binding
-var functionBindContext = function (fn, that) {
-  aCallable$6(fn);
-  return that === undefined ? fn : NATIVE_BIND ? bind$5(fn, that) : function (/* ...args */) {
-    return fn.apply(that, arguments);
-  };
 };
 
-var isArray$1 = isArray$4;
-var lengthOfArrayLike$3 = lengthOfArrayLike$7;
-var doesNotExceedSafeInteger = doesNotExceedSafeInteger$2;
-var bind$4 = functionBindContext;
-
-// `FlattenIntoArray` abstract operation
-// https://tc39.github.io/proposal-flatMap/#sec-FlattenIntoArray
-var flattenIntoArray$1 = function (target, original, source, sourceLen, start, depth, mapper, thisArg) {
-  var targetIndex = start;
-  var sourceIndex = 0;
-  var mapFn = mapper ? bind$4(mapper, thisArg) : false;
-  var element, elementLen;
-
-  while (sourceIndex < sourceLen) {
-    if (sourceIndex in source) {
-      element = mapFn ? mapFn(source[sourceIndex], sourceIndex, original) : source[sourceIndex];
+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
+  });
+};
 
-      if (depth > 0 && isArray$1(element)) {
-        elementLen = lengthOfArrayLike$3(element);
-        targetIndex = flattenIntoArray$1(target, original, element, elementLen, targetIndex, depth - 1) - 1;
+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 {
-        doesNotExceedSafeInteger(targetIndex + 1);
-        target[targetIndex] = element;
+        reviewText = data ? `Yes (${checkboxLabel.trim()})` : `No (${checkboxLabel.trim()})`;
       }
-
-      targetIndex++;
     }
-    sourceIndex++;
   }
-  return targetIndex;
+  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);
 
-var flattenIntoArray_1 = flattenIntoArray$1;
-
-var uncurryThis$2 = functionUncurryThis;
-var fails$3 = fails$s;
-var isCallable$4 = isCallable$q;
-var classof$2 = classof$9;
-var getBuiltIn$2 = getBuiltIn$9;
-var inspectSource$1 = inspectSource$3;
-
-var noop = function () { /* empty */ };
-var construct = getBuiltIn$2('Reflect', 'construct');
-var constructorRegExp = /^\s*(?:class|function)\b/;
-var exec$1 = uncurryThis$2(constructorRegExp.exec);
-var INCORRECT_TO_STRING = !constructorRegExp.test(noop);
-
-var isConstructorModern = function isConstructor(argument) {
-  if (!isCallable$4(argument)) return false;
-  try {
-    construct(noop, [], argument);
-    return true;
-  } catch (error) {
-    return false;
-  }
+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));
 };
-
-var isConstructorLegacy = function isConstructor(argument) {
-  if (!isCallable$4(argument)) return false;
-  switch (classof$2(argument)) {
-    case 'AsyncFunction':
-    case 'GeneratorFunction':
-    case 'AsyncGeneratorFunction': return false;
-  }
-  try {
-    // we can't check .prototype since constructors produced by .bind haven't it
-    // `Function#toString` throws on some built-it function in some legacy engines
-    // (for example, `DOMQuad` and similar in FF41-)
-    return INCORRECT_TO_STRING || !!exec$1(constructorRegExp, inspectSource$1(argument));
-  } catch (error) {
-    return true;
-  }
+const withAjvProps = Component => function WithAjvProps(props) {
+  const ctx = useJsonForms();
+  const ajv = getAjv({
+    jsonforms: Object.assign({}, ctx)
+  });
+  return jsx(Component, Object.assign({}, props, {
+    ajv: ajv
+  }));
 };
-
-isConstructorLegacy.sham = true;
-
-// `IsConstructor` abstract operation
-// https://tc39.es/ecma262/#sec-isconstructor
-var isConstructor$2 = !construct || fails$3(function () {
-  var called;
-  return isConstructorModern(isConstructorModern.call)
-    || !isConstructorModern(Object)
-    || !isConstructorModern(function () { called = true; })
-    || called;
-}) ? isConstructorLegacy : isConstructorModern;
-
-var isArray = isArray$4;
-var isConstructor$1 = isConstructor$2;
-var isObject$2 = isObject$e;
-var wellKnownSymbol$5 = wellKnownSymbol$k;
-
-var SPECIES$2 = wellKnownSymbol$5('species');
-var $Array = Array;
-
-// a part of `ArraySpeciesCreate` abstract operation
-// https://tc39.es/ecma262/#sec-arrayspeciescreate
-var arraySpeciesConstructor$1 = function (originalArray) {
-  var C;
-  if (isArray(originalArray)) {
-    C = originalArray.constructor;
-    // cross-realm fallback
-    if (isConstructor$1(C) && (C === $Array || isArray(C.prototype))) C = undefined;
-    else if (isObject$2(C)) {
-      C = C[SPECIES$2];
-      if (C === null) C = undefined;
+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 C === undefined ? $Array : C;
+  }
 };
-
-var arraySpeciesConstructor = arraySpeciesConstructor$1;
-
-// `ArraySpeciesCreate` abstract operation
-// https://tc39.es/ecma262/#sec-arrayspeciescreate
-var arraySpeciesCreate$1 = function (originalArray, length) {
-  return new (arraySpeciesConstructor(originalArray))(length === 0 ? 0 : length);
+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;
+`));
 
-var $$a = _export;
-var flattenIntoArray = flattenIntoArray_1;
-var toObject$1 = toObject$8;
-var lengthOfArrayLike$2 = lengthOfArrayLike$7;
-var toIntegerOrInfinity = toIntegerOrInfinity$7;
-var arraySpeciesCreate = arraySpeciesCreate$1;
-
-// `Array.prototype.flat` method
-// https://tc39.es/ecma262/#sec-array.prototype.flat
-$$a({ target: 'Array', proto: true }, {
-  flat: function flat(/* depthArg = 1 */) {
-    var depthArg = arguments.length ? arguments[0] : undefined;
-    var O = toObject$1(this);
-    var sourceLen = lengthOfArrayLike$2(O);
-    var A = arraySpeciesCreate(O, 0);
-    A.length = flattenIntoArray(A, O, O, sourceLen, 0, depthArg === undefined ? 1 : toIntegerOrInfinity(depthArg));
-    return A;
+let _$6 = t => t,
+  _t$6,
+  _t2$4,
+  _t3$3,
+  _t4$3,
+  _t5$2,
+  _t6$2,
+  _t7$1,
+  _t8$1,
+  _t9$1,
+  _t10$1,
+  _t11$1,
+  _t12$1,
+  _t13$1,
+  _t14$1,
+  _t15$1,
+  _t16;
+const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
+  display: flex;
+  flex-direction: column;
+  border: var(--goa-border-width-s) solid grey;
+  border-radius: var(--goa-border-radius-m);
+  margin: var(--goa-space-2xs);
+  padding: var(--goa-space-xs);
+  div:empty {
+    display: none;
   }
-});
-
-// this method was added to unscopables after implementation
-// in popular engines, so it's moved to a separate module
-var addToUnscopables = addToUnscopables$4;
+`));
+const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$6`
+  background-color: #f1f1f1;
+  margin-bottom: var(--goa-space-m);
+  padding: var(--goa-space-m);
+  border: 1px solid #dcdcdc;
+  border-radius: 5px;
 
-// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables('flat');
+  .element-style {
+    max-width: 1600px;
+  }
+`));
+const ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$6`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--goa-space-xl);
+`));
+const ReviewItemTitle = styled.div(_t4$3 || (_t4$3 = _$6`
+  font-size: var(--goa-space-l);
+  line-height: var(--goa-space-xl);
+  font-weight: 300;
+`));
+const Anchor = styled.div(_t5$2 || (_t5$2 = _$6`
+  color: #0070c4;
+  text-decoration: underline;
+  outline: none;
+  cursor: pointer;
 
-// 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;
-    }
+  &:focus {
+    outline: 2px solid #0070c4;
+    background-color: #e6f7ff;
   }
-};
-// 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)];
+`));
+styled.div(_t6$2 || (_t6$2 = _$6`
+  margin-left: var(--goa-space-m);
+`));
+styled.div(_t7$1 || (_t7$1 = _$6`
+  margin-bottom: var(--goa-space-m);
+`));
+styled.div(_t8$1 || (_t8$1 = _$6`
+  margin: var(--goa-space-s);
+  width: 100%;
+`));
+styled.h3(_t9$1 || (_t9$1 = _$6`
+  text-transform: capitalize;
+`));
+const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$6`
+  @media screen and (max-width: 767px) {
+    margin-bottom: var(--goa-space-l);
+  }
+  @media screen and (min-width: 768px) {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: var(--goa-space-l);
+  }
+`));
+const FormStepperSummaryH3 = styled.h3(_t11$1 || (_t11$1 = _$6`
+  flex: 1;
+  margin-bottom: var(--goa-space-m);
+  font-size: var(--goa-font-size-7);
+  line-height: var(--goa-line-height-4);
+  font-weight: var(--goa-font-weight-regular);
+`));
+const PageRenderPadding = styled.h3(_t12$1 || (_t12$1 = _$6`
+  margin-top: var(--goa-space-2xl);
+`));
+const PageBorder = styled.h3(_t13$1 || (_t13$1 = _$6`
+  padding: var(--goa-space-3xl);
+`));
+const TableReviewItemSection = styled.div(_t14$1 || (_t14$1 = _$6`
+  .element-style {
+    max-width: 1600px;
+  }
+`));
+const TableReviewItem = styled.div(_t15$1 || (_t15$1 = _$6`
+  border: 1px solid #dcdcdc;
+  border-radius: 5px;
+  padding: var(--goa-space-2xl);
+`));
+const TableReviewCategoryLabel = styled.h3(_t16 || (_t16 = _$6`
+  color: var(--goa-color-text-secondary) !important;
+`));
+
+class ContextProviderClass {
+  addDataByUrl(key, url, processDataFunction, token) {
+    return __awaiter(this, void 0, void 0, function* () {
+      let header = {};
+      const [requestId, axiosWithConfig] = this.getAxiosInterceptorConfig(axios);
+      if (token) {
+        header = Object.assign(Object.assign({}, header), {
+          Authorization: `Bearer ${token}`
+        });
       }
-    } else if (_$c.isArray(obj[key])) {
-      const nextValues = obj[key].map(function (arrayObj) {
-        return pickPropertyValues(arrayObj, property, endWithType);
+      yield axiosWithConfig.get(url, header).then(response => {
+        const processedData = processDataFunction(response.data);
+        this.enumValues.set(key, () => processedData);
+      }).catch(err => {
+        if (err.message.includes('CORS')) {
+          console.warn(err.message);
+        } else {
+          console.warn(`addDataByUrl: ${err.message}`);
+        }
       });
-      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);
+      axiosWithConfig.interceptors.request.eject(requestId);
+    });
   }
-  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) => {
-  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':
-      {
+  constructor() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.enumValues = new Map();
+    this.enumFunctions = new Map();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.enumSubmitFunctions = new Map();
+    this.addFormContextData = (key, data) => {
+      this.enumValues.set(key, () => data);
+    };
+    this.setup = props => {
+      var _a, _b;
+      this.selfProps = props;
+      if (props.fileManagement) {
         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);
-        }
+          fileList,
+          uploadFile,
+          downloadFile,
+          deleteFile
+        } = props.fileManagement;
+        this.enumValues.set('file-list', () => fileList);
+        this.enumFunctions.set('upload-file', () => uploadFile);
+        this.enumFunctions.set('download-file', () => downloadFile);
+        this.enumFunctions.set('delete-file', () => deleteFile);
       }
-    case 'update/category':
-      {
+      if (props.submit) {
         const {
-          id,
-          ajv,
-          errors
-        } = action.payload;
-        /*
-          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, state.categories[id].scopes);
-        const errorsInCategory = getErrorsInScopes(errors, state.categories[id].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);
+          submitForm
+        } = props.submit;
+        const submitFunction = submitForm;
+        this.enumSubmitFunctions.set('submit-form', () => submitFunction);
       }
-    case 'validate/form':
-      {
-        const {
-          errors
-        } = action.payload;
-        state.isValid = errors.length === 0;
-        return Object.assign({}, state);
+      if (props.data) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        Object.keys(props.data).forEach(item => {
+          this.enumValues.set(item, () => props.data[item]);
+        });
       }
-    default:
-      return state;
+      if (!props.children) {
+        return null;
+      }
+      if (props.formUrl) {
+        this.baseEnumerator.formUrl = props.formUrl;
+      }
+      this.baseEnumerator.isFormSubmitted = (_a = props.isFormSubmitted) !== null && _a !== void 0 ? _a : false;
+      return jsx(JsonFormContext.Provider, {
+        value: this.baseEnumerator,
+        children: (_b = this.selfProps) === null || _b === void 0 ? void 0 : _b.children
+      });
+    };
+    this.getContextProvider = () => {
+      var _a;
+      return jsx(JsonFormContext.Provider, {
+        value: this.baseEnumerator,
+        children: (_a = this.selfProps) === null || _a === void 0 ? void 0 : _a.children
+      });
+    };
+    this.getFormUrl = () => {
+      var _a;
+      return (_a = this.selfProps) === null || _a === void 0 ? void 0 : _a.formUrl;
+    };
+    this.getAxiosInterceptorConfig = axios => {
+      const requestId = axios.interceptors.request.use(req => {
+        if (req.data === undefined) {
+          throw new Error(`The URL: ${req.url} encountered a CORS error.`);
+        }
+        return req;
+      });
+      return [requestId, axios];
+    };
+    /**
+     * Grabs data stored under a given key
+     *
+     */
+    this.getFormContextData = key => {
+      const dataFunction = this.baseEnumerator.data.get(key);
+      return dataFunction && dataFunction();
+    };
+    /**
+     * Grabs all data
+     *
+     */
+    this.getAllFormContextData = () => {
+      const allData = [];
+      this.baseEnumerator.data.forEach((d, key) => {
+        allData.push({
+          [key]: d()
+        });
+      });
+      return allData;
+    };
+    this.baseEnumerator = {
+      data: this.enumValues,
+      functions: this.enumFunctions,
+      submitFunction: this.enumSubmitFunctions,
+      addFormContextData: this.addFormContextData,
+      getFormContextData: this.getFormContextData,
+      getAllFormContextData: this.getAllFormContextData,
+      formUrl: this.getFormUrl()
+    };
+    this.selfProps = {};
   }
-};
+}
+const ContextProviderC = new ContextProviderClass();
+const ContextProviderFactory = () => new ContextProviderClass().setup;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const JsonFormContext = /*#__PURE__*/createContext(null);
 
-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,
-      isEnabled: isEnabled(c, data, '', ajv),
-      visible
-    };
+const RenderStepElements = props => {
+  return jsx(Visible, {
+    visible: props.visible,
+    "date-testid": `${props.path}-categories-${props.categoryIndex}`,
+    children: props.category.elements.map((uiSchema, index) => {
+      return jsx(JsonFormsDispatch, {
+        schema: props.schema,
+        uischema: uiSchema,
+        renderers: props.renderers,
+        cells: props.cells,
+        path: props.path,
+        visible: props.visible,
+        enabled: props.enabled
+      }, `${props.path}-category-page-${index}`);
+    })
   });
-  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
+};
+
+var uncurryThis$3 = functionUncurryThisClause;
+var aCallable$6 = aCallable$9;
+var NATIVE_BIND = functionBindNative;
+
+var bind$5 = uncurryThis$3(uncurryThis$3.bind);
+
+// optional / simple context binding
+var functionBindContext = function (fn, that) {
+  aCallable$6(fn);
+  return that === undefined ? fn : NATIVE_BIND ? bind$5(fn, that) : function (/* ...args */) {
+    return fn.apply(that, arguments);
   };
 };
-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
-          }
-        });
+
+var isArray$1 = isArray$4;
+var lengthOfArrayLike$3 = lengthOfArrayLike$7;
+var doesNotExceedSafeInteger = doesNotExceedSafeInteger$2;
+var bind$4 = functionBindContext;
+
+// `FlattenIntoArray` abstract operation
+// https://tc39.github.io/proposal-flatMap/#sec-FlattenIntoArray
+var flattenIntoArray$1 = function (target, original, source, sourceLen, start, depth, mapper, thisArg) {
+  var targetIndex = start;
+  var sourceIndex = 0;
+  var mapFn = mapper ? bind$4(mapper, thisArg) : false;
+  var element, elementLen;
+
+  while (sourceIndex < sourceLen) {
+    if (sourceIndex in source) {
+      element = mapFn ? mapFn(source[sourceIndex], sourceIndex, original) : source[sourceIndex];
+
+      if (depth > 0 && isArray$1(element)) {
+        elementLen = lengthOfArrayLike$3(element);
+        targetIndex = flattenIntoArray$1(target, original, element, elementLen, targetIndex, depth - 1) - 1;
+      } else {
+        doesNotExceedSafeInteger(targetIndex + 1);
+        target[targetIndex] = element;
       }
-    };
-  }, [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);
+
+      targetIndex++;
+    }
+    sourceIndex++;
+  }
+  return targetIndex;
+};
+
+var flattenIntoArray_1 = flattenIntoArray$1;
+
+var uncurryThis$2 = functionUncurryThis;
+var fails$3 = fails$s;
+var isCallable$4 = isCallable$q;
+var classof$2 = classof$9;
+var getBuiltIn$2 = getBuiltIn$9;
+var inspectSource$1 = inspectSource$3;
+
+var noop = function () { /* empty */ };
+var construct = getBuiltIn$2('Reflect', 'construct');
+var constructorRegExp = /^\s*(?:class|function)\b/;
+var exec$1 = uncurryThis$2(constructorRegExp.exec);
+var INCORRECT_TO_STRING = !constructorRegExp.test(noop);
+
+var isConstructorModern = function isConstructor(argument) {
+  if (!isCallable$4(argument)) return false;
+  try {
+    construct(noop, [], argument);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
+
+var isConstructorLegacy = function isConstructor(argument) {
+  if (!isCallable$4(argument)) return false;
+  switch (classof$2(argument)) {
+    case 'AsyncFunction':
+    case 'GeneratorFunction':
+    case 'AsyncGeneratorFunction': return false;
+  }
+  try {
+    // we can't check .prototype since constructors produced by .bind haven't it
+    // `Function#toString` throws on some built-it function in some legacy engines
+    // (for example, `DOMQuad` and similar in FF41-)
+    return INCORRECT_TO_STRING || !!exec$1(constructorRegExp, inspectSource$1(argument));
+  } catch (error) {
+    return true;
+  }
+};
+
+isConstructorLegacy.sham = true;
+
+// `IsConstructor` abstract operation
+// https://tc39.es/ecma262/#sec-isconstructor
+var isConstructor$2 = !construct || fails$3(function () {
+  var called;
+  return isConstructorModern(isConstructorModern.call)
+    || !isConstructorModern(Object)
+    || !isConstructorModern(function () { called = true; })
+    || called;
+}) ? isConstructorLegacy : isConstructorModern;
+
+var isArray = isArray$4;
+var isConstructor$1 = isConstructor$2;
+var isObject$2 = isObject$e;
+var wellKnownSymbol$5 = wellKnownSymbol$k;
+
+var SPECIES$2 = wellKnownSymbol$5('species');
+var $Array = Array;
+
+// a part of `ArraySpeciesCreate` abstract operation
+// https://tc39.es/ecma262/#sec-arrayspeciescreate
+var arraySpeciesConstructor$1 = function (originalArray) {
+  var C;
+  if (isArray(originalArray)) {
+    C = originalArray.constructor;
+    // cross-realm fallback
+    if (isConstructor$1(C) && (C === $Array || isArray(C.prototype))) C = undefined;
+    else if (isObject$2(C)) {
+      C = C[SPECIES$2];
+      if (C === null) C = undefined;
     }
-  }, [JSON.stringify(StepperProps.uischema), JSON.stringify(StepperProps.schema)]);
-  return jsx(JsonFormsStepperContext.Provider, {
-    value: context,
-    children: children
+  } return C === undefined ? $Array : C;
+};
+
+var arraySpeciesConstructor = arraySpeciesConstructor$1;
+
+// `ArraySpeciesCreate` abstract operation
+// https://tc39.es/ecma262/#sec-arrayspeciescreate
+var arraySpeciesCreate$1 = function (originalArray, length) {
+  return new (arraySpeciesConstructor(originalArray))(length === 0 ? 0 : length);
+};
+
+var $$a = _export;
+var flattenIntoArray = flattenIntoArray_1;
+var toObject$1 = toObject$8;
+var lengthOfArrayLike$2 = lengthOfArrayLike$7;
+var toIntegerOrInfinity = toIntegerOrInfinity$7;
+var arraySpeciesCreate = arraySpeciesCreate$1;
+
+// `Array.prototype.flat` method
+// https://tc39.es/ecma262/#sec-array.prototype.flat
+$$a({ target: 'Array', proto: true }, {
+  flat: function flat(/* depthArg = 1 */) {
+    var depthArg = arguments.length ? arguments[0] : undefined;
+    var O = toObject$1(this);
+    var sourceLen = lengthOfArrayLike$2(O);
+    var A = arraySpeciesCreate(O, 0);
+    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');
+
+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 summaryLabel = 'Summary';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -6377,6 +6493,84 @@ const BackButton = ({
   });
 };
 
+const FormStepperPageReviewer = props => {
+  var _a, _b;
+  const {
+    uischema,
+    data,
+    schema,
+    ajv,
+    cells,
+    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'];
+  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
+        }), jsx(TableReviewItemSection, {
+          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 => {
+            return jsx(GoATable, {
+              width: "100%",
+              children: jsx("tbody", {
+                children: jsx(JsonFormsDispatch, {
+                  "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
+                  schema: schema,
+                  uischema: Object.assign(Object.assign({}, element), {
+                    options: Object.assign(Object.assign({}, element === null || element === void 0 ? void 0 : element.options), {
+                      categoryIndex: index
+                    })
+                  }),
+                  enabled: enabled,
+                  renderers: GoABaseTableReviewRenderers,
+                  cells: cells
+                })
+              })
+            });
+          })
+        }, index)]
+      });
+    })]
+  });
+};
+withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperPageReviewer)));
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const FormPageStepper = props => {
   const formStepperCtx = useContext(JsonFormsStepperContext);
@@ -6406,7 +6600,8 @@ const FormPagesView = props => {
   const formStepperCtx = useContext(JsonFormsStepperContext);
   const {
     validatePage,
-    goToPage
+    goToPage,
+    toggleShowReviewLink
   } = formStepperCtx;
   const {
     categories,
@@ -6436,9 +6631,9 @@ const FormPagesView = props => {
       visible: visible,
       children: jsx("div", {
         id: `${path || `goa`}-form-pages`,
-        children: jsx(PageBorder, {
-          children: categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
-            const props = {
+        children: jsxs(PageBorder, {
+          children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
+            const categoryProps = {
               category: category.uischema,
               categoryIndex: category.id,
               visible: category === null || category === void 0 ? void 0 : category.visible,
@@ -6462,28 +6657,46 @@ const FormPagesView = props => {
                 }), jsxs(PageRenderPadding, {
                   children: [jsxs("h3", {
                     children: ["Step ", index + 1, " of ", categories.length]
-                  }), jsx(RenderStepElements, Object.assign({}, props))]
+                  }), jsx(RenderStepElements, Object.assign({}, categoryProps))]
                 }), jsx(PageRenderPadding, {
-                  children: index !== categories.length - 1 ? jsx(GoAButton, {
-                    type: "submit",
-                    onClick: () => goToPage(activeId + 1),
-                    disabled: !(category.isValid && category.isCompleted),
-                    testId: "pages-save-continue-btn",
-                    children: "Save and continue"
-                  }) : jsx(GoAButtonGroup, {
-                    alignment: "end",
-                    children: jsx(GoAButton, {
-                      type: 'primary',
-                      onClick: handleSubmit,
-                      disabled: !isValid,
-                      testId: "pages-submit-btn",
-                      children: "Submit"
-                    })
+                  children: jsxs(GoAButtonGroup, {
+                    alignment: "start",
+                    children: [jsx(GoAButton, {
+                      type: "submit",
+                      onClick: () => goToPage(activeId + 1),
+                      disabled: !(category.isValid && category.isCompleted),
+                      testId: "pages-save-continue-btn",
+                      children: "Save and continue"
+                    }), category.showReviewPageLink && jsx(GoAButton, {
+                      type: "tertiary",
+                      onClick: () => {
+                        toggleShowReviewLink(activeId);
+                        goToPage(categories.length);
+                      },
+                      testId: "pages-to-review-page-btn",
+                      children: "Back to application overview"
+                    })]
                   })
                 })]
               }, `${category.label}`);
             }
-          })
+          }), isOnReview && jsxs("div", {
+            "data-testid": "stepper-pages-review-page",
+            children: [jsx(FormStepperPageReviewer, Object.assign({}, props, {
+              navigationFunc: goToPage
+            })), jsx(PageRenderPadding, {
+              children: jsx(GoAButtonGroup, {
+                alignment: "end",
+                children: jsx(GoAButton, {
+                  type: 'primary',
+                  onClick: handleSubmit,
+                  disabled: !isValid,
+                  testId: "pages-submit-btn",
+                  children: "Submit"
+                })
+              })
+            })]
+          })]
         })
       })
     }), jsxs(GoAModal, {
@@ -7234,6 +7447,21 @@ function objectListReducer(state, action) {
   }
 }
 
+function 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') {
+      const parts = typedObj.scope.split('/');
+      names.push(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) => {
@@ -7265,6 +7493,7 @@ errors) => {
       rowPath,
       cellPath: rowPath,
       enabled,
+      uischema,
       isInReview,
       openDeleteDialog,
       handleChange,
@@ -7315,7 +7544,7 @@ function capitalizeFirstLetter(str) {
   return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
 }
 const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellComponent(props) {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     schema,
     enabled,
@@ -7332,10 +7561,14 @@ 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;
+  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);
+  }
   return jsxs(NonEmptyCellStyle, {
     children: [
     // eslint-disable-next-line
-    (_b = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _b === void 0 ? void 0 : _b.map(element => {
+    (_c = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _c === void 0 ? void 0 : _c.map(element => {
       return jsx(JsonFormsDispatch, {
         "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
         schema: schema,
@@ -7349,7 +7582,7 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
       width: "100%",
       children: [jsx("thead", {
         children: jsxs("tr", {
-          children: [Object.keys(properties).map((key, index) => {
+          children: [tableKeys.map((key, index) => {
             if (!isInReview) {
               return jsx("th", {
                 children: jsxs("p", {
@@ -7628,7 +7861,7 @@ const ObjectArrayControl = props => {
   };
   useEffect(() => {
     // eslint-disable-next-line
-    const updatedData = Object.fromEntries((parsedData || []).map((item, index) => [index, item]));
+    const updatedData = Array.isArray(parsedData) ? Object.fromEntries(parsedData.map((item, index) => [index, item])) : {};
     const count = Object.keys(updatedData).length;
     const dispatchData = {
       [path]: {
@@ -10925,6 +11158,63 @@ const GoABaseReviewRenderers = [
   tester: HelpContentTester,
   renderer: HelpReviewContent
 }];
+const GoABaseTableReviewRenderers = [
+// controls
+{
+  tester: GoAEnumControlTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: GoAIntegerControlTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: GoANumberControlTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: GoATextControlTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: GoADateControlTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: GoADateTimeControlTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: GoATimeControlTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: GoARadioGroupControlTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: GoACheckoutGroupControlTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: GoABooleanControlTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: GoABooleanRadioControlTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: MultiLineTextControlTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: GoAArrayControlTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: GoAListWithDetailsTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: GoAHorizontalLayoutTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: GoAlVerticalLayoutTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: GoAGroupReviewLayoutTester,
+  renderer: GoAInputBaseTableReviewControl
+}, {
+  tester: HelpContentTester,
+  renderer: GoAInputBaseTableReviewControl
+}];
 const GoAReviewRenderers = [...GoABaseReviewRenderers, {
   tester: CategorizationStepperRendererTester,
   renderer: FormStepperReviewControl
@@ -10965,4 +11255,4 @@ const GoARenderers = [...GoABaseRenderers, {
 }];
 const GoACells = [...InputCells];
 
-export { ADD_DATALIST_ACTION, ADD_NO_ANONYMOUS_ACTION, ADD_REGISTER_DATA_ACTION, ADD_REGISTER_DATA_ERROR, AddressLookUpControl, AddressLookUpControlReview, AddressLookUpTester, ArrayControl, ArrayControlBase, ArrayControlReview, BooleanComponent, BooleanControl, BooleanRadioComponent, BooleanRadioControl, CategorizationPagesRendererTester, CategorizationStepperRendererTester, CheckboxGroup, ContextProviderC, ContextProviderClass, ContextProviderFactory, EnumCheckboxControl, EnumRadioControl, EnumSelect, FileUploader, FileUploaderReview, FileUploaderTester, FormPageStepper, FormPagesView, FormStepper, FormStepperControl, FormStepperPagesControl, FormStepperReviewControl, FormStepperReviewer, FormStepperView, FullNameControl, FullNameDobControl, FullNameDobReviewControl, FullNameDobTester, FullNameReviewControl, FullNameTester, GoAArrayControlRenderer, GoAArrayControlReviewRenderer, GoAArrayControlTester, GoABaseInputReviewComponent, GoABaseRenderers, GoABaseReviewRenderers, GoABooleanControl, GoABooleanControlTester, GoABooleanRadioControl, GoABooleanRadioControlTester, GoACells, GoACheckoutGroupControlTester, GoADateControl, GoADateControlTester, GoADateInput, GoADateTimeControl, GoADateTimeControlTester, GoADateTimeInput, GoAEnumCheckboxGroupControl, GoAEnumControl, GoAEnumControlTester, GoAEnumRadioGroupControl, GoAInputBaseControl, GoAInputDateControl, GoAInputDateTimeControl, GoAInputInteger, GoAInputIntegerControl, GoAInputNumberControl, GoAInputText, GoAInputTextControl, GoAInputTimeControl, GoAIntegerControl, GoAIntegerControlTester, GoAListWithDetailsControlRenderer, GoAListWithDetailsTester, GoANumberControl, GoANumberControlTester, GoANumberInput, GoARadioGroupControlTester, GoARenderers, GoAReviewRenderers, GoATextControl, GoATextControlTester, GoATimeControl, GoATimeControlTester, GoATimeInput, GoInputBaseReview, GoInputBaseReviewControl, JsonFormContext, JsonFormRegisterProvider, JsonFormsRegisterContext, ListWithDetailsControl, MultiLineText, MultiLineTextControl, MultiLineTextControlInput, MultiLineTextControlTester, RadioGroup, categoriesAreValid, createDefaultAjv, enumControl, errMalformedDate, formatSin, isAddressLookup, isFullName, isFullNameDoB, registerReducer, resolveRefs, tryResolveRefs };
+export { ADD_DATALIST_ACTION, ADD_NO_ANONYMOUS_ACTION, ADD_REGISTER_DATA_ACTION, ADD_REGISTER_DATA_ERROR, AddressLookUpControl, AddressLookUpControlReview, AddressLookUpTester, ArrayControl, ArrayControlBase, ArrayControlReview, BooleanComponent, BooleanControl, BooleanRadioComponent, BooleanRadioControl, CategorizationPagesRendererTester, CategorizationStepperRendererTester, CheckboxGroup, ContextProviderC, ContextProviderClass, ContextProviderFactory, EnumCheckboxControl, EnumRadioControl, EnumSelect, FileUploader, FileUploaderReview, FileUploaderTester, FormPageStepper, FormPagesView, FormStepper, FormStepperControl, FormStepperPagesControl, FormStepperReviewControl, FormStepperReviewer, FormStepperView, FullNameControl, FullNameDobControl, FullNameDobReviewControl, FullNameDobTester, FullNameReviewControl, FullNameTester, GoAArrayControlRenderer, GoAArrayControlReviewRenderer, GoAArrayControlTester, GoABaseInputReviewComponent, GoABaseRenderers, GoABaseReviewRenderers, GoABaseTableReviewRenderers, GoABooleanControl, GoABooleanControlTester, GoABooleanRadioControl, GoABooleanRadioControlTester, GoACells, GoACheckoutGroupControlTester, GoADateControl, GoADateControlTester, GoADateInput, GoADateTimeControl, GoADateTimeControlTester, GoADateTimeInput, GoAEnumCheckboxGroupControl, GoAEnumControl, GoAEnumControlTester, GoAEnumRadioGroupControl, GoAInputBaseControl, GoAInputBaseTableReview, GoAInputBaseTableReviewControl, GoAInputDateControl, GoAInputDateTimeControl, GoAInputInteger, GoAInputIntegerControl, GoAInputNumberControl, GoAInputText, GoAInputTextControl, GoAInputTimeControl, GoAIntegerControl, GoAIntegerControlTester, GoAListWithDetailsControlRenderer, GoAListWithDetailsTester, GoANumberControl, GoANumberControlTester, GoANumberInput, GoARadioGroupControlTester, GoARenderers, GoAReviewRenderers, GoATextControl, GoATextControlTester, GoATimeControl, GoATimeControlTester, GoATimeInput, GoInputBaseReview, GoInputBaseReviewControl, JsonFormContext, JsonFormRegisterProvider, JsonFormsRegisterContext, ListWithDetailsControl, MultiLineText, MultiLineTextControl, MultiLineTextControlInput, MultiLineTextControlTester, RadioGroup, categoriesAreValid, createDefaultAjv, enumControl, errMalformedDate, formatSin, isAddressLookup, isFullName, isFullNameDoB, registerReducer, resolveRefs, tryResolveRefs };