@abgov/jsonforms-components 2.0.0 → 2.1.0

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';
@@ -3803,8 +3803,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 +3822,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 +3831,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 +5293,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 +5432,8 @@ let _$6 = t => t,
   _t13$1,
   _t14$1,
   _t15$1,
-  _t16;
+  _t16,
+  _t17;
 const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
   display: flex;
   flex-direction: column;
@@ -5869,7 +5524,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 || (_t16 = _$6`
+  margin-top: var(--goa-space-xl);
+  display: flex;
+  .right {
+    margin-left: auto;
+  }
+`));
+const TableReviewCategoryLabel = styled.h3(_t17 || (_t17 = _$6`
   color: var(--goa-color-text-secondary) !important;
 `));
 
@@ -6170,101 +5832,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 +6484,6 @@ const BackButton = ({
 };
 
 const FormStepperPageReviewer = props => {
-  var _a, _b;
   const {
     uischema,
     data,
@@ -6504,18 +6493,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;
@@ -9321,29 +9327,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

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

@@ -14,4 +14,5 @@ export declare const PageRenderPadding: import("styled-components/dist/types").I
 export declare const PageBorder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
 export declare const TableReviewItemSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableReviewItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TableReviewPageTitleRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableReviewCategoryLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;

package/src/lib/Controls/Inputs/style-component.d.ts

@@ -4,5 +4,4 @@ export declare const WarningIconDiv: import("styled-components/dist/types").ISty
 export declare const RequiredTextLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
 export declare const PageReviewNameCol: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
 export declare const PageReviewValueCol: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
-export declare const PageReviewActionCol: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
 export declare const CheckboxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;