@abgov/jsonforms-components 2.21.1 → 2.21.3

package/index.esm.js

@@ -5,9 +5,9 @@ import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputD
 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, isEnabled, deriveLabelForUISchemaElement, 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, toDataPath, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, or, isObjectArrayControl, isPrimitiveArrayControl, Paths, schemaMatches, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, JsonFormsDispatch, useJsonForms, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsAllOfProps, withJsonFormsCellProps } from '@jsonforms/react';
-import * as _$a from 'lodash';
+import * as _$b from 'lodash';
 import { isEqual, isEmpty as isEmpty$1, isObject as isObject$f } from 'lodash';
 import merge from 'lodash/merge';
 import isEmpty from 'lodash/isEmpty';
@@ -3547,16 +3547,16 @@ const onChangeForNumericControl = props => {
   }
 };
 
-let _$9 = t => t,
-  _t$9,
+let _$a = t => t,
+  _t$a,
   _t2$7;
-styled.div(_t$9 || (_t$9 = _$9`
+styled.div(_t$a || (_t$a = _$a`
   height: 70vh;
   overflow-y: auto;
   padding-left: var(--goa-space-2xs);
   padding-right: var(--goa-space-2xs);
 `));
-const Visible = styled.div(_t2$7 || (_t2$7 = _$9`
+const Visible = styled.div(_t2$7 || (_t2$7 = _$a`
   display: ${0};
 `), p => p.visible ? 'initial' : 'none');
 
@@ -5188,8 +5188,8 @@ const JsonFormRegisterProvider = ({
   });
 };
 
-let _$8 = t => t,
-  _t$8,
+let _$9 = t => t,
+  _t$9,
   _t2$6,
   _t3$5,
   _t4$5,
@@ -5197,42 +5197,42 @@ let _$8 = t => t,
   _t6$3,
   _t7$2,
   _t8$2;
-const FormFieldWrapper = styled.div(_t$8 || (_t$8 = _$8`
+const FormFieldWrapper = styled.div(_t$9 || (_t$9 = _$9`
   margin-bottom: var(--goa-space-l);
 `));
-const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$8`
+const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$9`
   display: inline-flex;
   align-items: flex-start;
   gap: 0.25rem;
   font-size: var(--goa-font-size-2);
   color: var(--goa-color-interactive-error);
 `));
-const RequiredTextLabel = styled.label(_t3$5 || (_t3$5 = _$8`
+const RequiredTextLabel = styled.label(_t3$5 || (_t3$5 = _$9`
   color: var(--goa-color-greyscale-700);
   font-weight: var(--goa-font-weight-regular);
   font-size: var(--goa-font-size-2);
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-const PageReviewNameCol = styled.td(_t4$5 || (_t4$5 = _$8`
+const PageReviewNameCol = styled.td(_t4$5 || (_t4$5 = _$9`
   width: 5%;
   padding-top: var(--goa-space-s);
   padding-bottom: var(--goa-space-s);
   padding-right: var(--goa-space-m);
 `));
-const PageReviewValueCol = styled.td(_t5$4 || (_t5$4 = _$8`
+const PageReviewValueCol = styled.td(_t5$4 || (_t5$4 = _$9`
   width: 20%;
   text-align: left;
 `));
 //Check and unchecked are different heights otherwise
-const CheckboxWrapper = styled.div(_t6$3 || (_t6$3 = _$8`
+const CheckboxWrapper = styled.div(_t6$3 || (_t6$3 = _$9`
   height: 28px;
 `));
-styled.h4(_t7$2 || (_t7$2 = _$8`
+styled.h4(_t7$2 || (_t7$2 = _$9`
   margin: 0 0 0.25rem 0;
   fontsize: larger;
 `));
-styled.h4(_t8$2 || (_t8$2 = _$8`
+styled.h4(_t8$2 || (_t8$2 = _$9`
   border-bottom: 1px solid #ddd;
 `));
 
@@ -5457,12 +5457,12 @@ const SPACE_KEY = ' ';
 const ALT_KEY = 'Alt';
 const SHIFT_KEY = 'Shift';
 
-let _$7 = t => t,
-  _t$7,
+let _$8 = t => t,
+  _t$8,
   _t2$5,
   _t3$4,
   _t4$4;
-const GoADropdownTextbox = styled.div(_t$7 || (_t$7 = _$7`
+const GoADropdownTextbox = styled.div(_t$8 || (_t$8 = _$8`
   border-radius: var(--goa-space-2xs);
   box-shadow: ${0};
   &:hover {
@@ -5473,11 +5473,11 @@ const GoADropdownTextbox = styled.div(_t$7 || (_t$7 = _$7`
     box-shadow: ${0};
   }
 `), p => p.isOpen ? `0 0 0 3px var(--goa-color-interactive-focus)` : '', p => p.isOpen ? `0 0 0 3px var(--goa-color-interactive-focus) !important` : '');
-const GoADropdownListContainerWrapper = styled.div(_t2$5 || (_t2$5 = _$7`
+const GoADropdownListContainerWrapper = styled.div(_t2$5 || (_t2$5 = _$8`
   position: relative;
   display: ${0};
 `), p => !(p === null || p === void 0 ? void 0 : p.isOpen) && 'none');
-const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$7`
+const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$8`
   border: solid 1px var(--goa-color-greyscale-200);
   border-radius: var(--goa-space-2xs);
   background: var(--goa-color-greyscale-white);
@@ -5501,7 +5501,7 @@ const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$7`
     scrollbar-color: #a8a8a8 var(--goa-color-greyscale-100) !important;
   }
 `), p => p.optionListMaxHeight || '272px');
-const GoADropdownListOption = styled.div(_t4$4 || (_t4$4 = _$7`
+const GoADropdownListOption = styled.div(_t4$4 || (_t4$4 = _$8`
   padding: var(--goa-space-2xs) var(--goa-space-s);
   text-overflow: ellipsis;
   color: ${0} !important;
@@ -6578,8 +6578,8 @@ const BooleanRadioControl = props => jsx(GoAInputBaseControl, Object.assign({},
 const GoABooleanRadioControlTester = rankWith(3, and(isBooleanControl, optionIs('radio', true)));
 const GoABooleanRadioControl = withJsonFormsControlProps(BooleanRadioControl);
 
-let _$6 = t => t,
-  _t$6;
+let _$7 = t => t,
+  _t$7;
 const Checkboxes = ({
   children,
   orientation,
@@ -6591,7 +6591,7 @@ const Checkboxes = ({
     children: children
   });
 };
-const CheckBoxGroupDiv = styled.div(_t$6 || (_t$6 = _$6`
+const CheckBoxGroupDiv = styled.div(_t$7 || (_t$7 = _$7`
   .horizontal {
     display: flex;
     flex-direction: row;
@@ -6799,8 +6799,8 @@ const GoAInputBaseTableReview = props => {
 };
 const GoAInputBaseTableReviewControl = withJsonFormsControlProps(GoAInputBaseTableReview);
 
-let _$5 = t => t,
-  _t$5;
+let _$6 = t => t,
+  _t$6;
 const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
   return elements.map((child, index) => jsx(JsonFormsDispatch, {
     uischema: child,
@@ -6879,14 +6879,14 @@ const ReviewLayoutRenderer = ({
     }
   }
 };
-const ReviewGrid = styled.div(_t$5 || (_t$5 = _$5`
+const ReviewGrid = styled.div(_t$6 || (_t$6 = _$6`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, calc(50% - 8px)));
   gap: 16px;
 `));
 
-let _$4 = t => t,
-  _t$4,
+let _$5 = t => t,
+  _t$5,
   _t2$4,
   _t3$3,
   _t4$3,
@@ -6908,7 +6908,7 @@ let _$4 = t => t,
   _t20$1,
   _t21,
   _t22;
-const ReviewItem = styled.div(_t$4 || (_t$4 = _$4`
+const ReviewItem = styled.div(_t$5 || (_t$5 = _$5`
   display: flex;
   flex-direction: column;
   border: var(--goa-border-width-s) solid grey;
@@ -6919,7 +6919,7 @@ const ReviewItem = styled.div(_t$4 || (_t$4 = _$4`
     display: none;
   }
 `));
-const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$4`
+const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$5`
   background-color: #f1f1f1;
   margin-bottom: var(--goa-space-m);
   padding: var(--goa-space-m);
@@ -6930,18 +6930,18 @@ const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$4`
     max-width: 1600px;
   }
 `));
-const ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$4`
+const ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$5`
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--goa-space-xl);
 `));
-const ReviewItemTitle = styled.div(_t4$3 || (_t4$3 = _$4`
+const ReviewItemTitle = styled.div(_t4$3 || (_t4$3 = _$5`
   font-size: var(--goa-space-l);
   line-height: var(--goa-space-xl);
   font-weight: 300;
 `));
-const Anchor = styled.div(_t5$3 || (_t5$3 = _$4`
+const Anchor = styled.div(_t5$3 || (_t5$3 = _$5`
   color: #0070c4;
   text-decoration: underline;
   outline: none;
@@ -6952,20 +6952,20 @@ const Anchor = styled.div(_t5$3 || (_t5$3 = _$4`
     background-color: #e6f7ff;
   }
 `));
-styled.div(_t6$2 || (_t6$2 = _$4`
+styled.div(_t6$2 || (_t6$2 = _$5`
   margin-left: var(--goa-space-m);
 `));
-styled.div(_t7$1 || (_t7$1 = _$4`
+styled.div(_t7$1 || (_t7$1 = _$5`
   margin-bottom: var(--goa-space-m);
 `));
-styled.div(_t8$1 || (_t8$1 = _$4`
+styled.div(_t8$1 || (_t8$1 = _$5`
   margin: var(--goa-space-s);
   width: 100%;
 `));
-styled.h3(_t9$1 || (_t9$1 = _$4`
+styled.h3(_t9$1 || (_t9$1 = _$5`
   text-transform: capitalize;
 `));
-const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$4`
+const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$5`
   @media screen and (max-width: 767px) {
     margin-bottom: var(--goa-space-l);
   }
@@ -6975,55 +6975,55 @@ const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$4`
     margin-bottom: var(--goa-space-l);
   }
 `));
-const FormStepperSummaryH3 = styled.h3(_t11$1 || (_t11$1 = _$4`
+const FormStepperSummaryH3 = styled.h3(_t11$1 || (_t11$1 = _$5`
   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.div(_t12$1 || (_t12$1 = _$4`
+const PageRenderPadding = styled.div(_t12$1 || (_t12$1 = _$5`
   margin-top: var(--goa-space-2xl);
 `));
-styled.div(_t13$1 || (_t13$1 = _$4`
+styled.div(_t13$1 || (_t13$1 = _$5`
   margin-bottom: var(--goa-space-2xl);
 `));
-const PageBorder = styled.h3(_t14$1 || (_t14$1 = _$4`
+const PageBorder = styled.h3(_t14$1 || (_t14$1 = _$5`
   padding: var(--goa-space-3xl);
 `));
-const TableReviewItemSection = styled.div(_t15$1 || (_t15$1 = _$4`
+const TableReviewItemSection = styled.div(_t15$1 || (_t15$1 = _$5`
   .element-style {
     max-width: 1600px;
   }
 `));
-const TableReviewItem = styled.div(_t16$1 || (_t16$1 = _$4`
+const TableReviewItem = styled.div(_t16$1 || (_t16$1 = _$5`
   border: 1px solid #dcdcdc;
   border-radius: 5px;
   padding: var(--goa-space-2xl);
 `));
-const TableReviewPageTitleRow = styled.div(_t17$1 || (_t17$1 = _$4`
+const TableReviewPageTitleRow = styled.div(_t17$1 || (_t17$1 = _$5`
   margin-top: var(--goa-space-xl);
   display: flex;
   justify-content: space-between;
 `));
-const TableReviewCategoryLabel = styled.h3(_t18$1 || (_t18$1 = _$4`
+const TableReviewCategoryLabel = styled.h3(_t18$1 || (_t18$1 = _$5`
   color: var(--goa-color-text-secondary) !important;
   margin-bottom: var(--goa-space-l);
 `));
-const CategoryStatus = styled.td(_t19$1 || (_t19$1 = _$4`
+const CategoryStatus = styled.td(_t19$1 || (_t19$1 = _$5`
   width: var(--goa-space-xl);
   padding-right: var(--goa-space-xl);
 `));
-const TocPageRef = styled.td(_t20$1 || (_t20$1 = _$4`
+const TocPageRef = styled.td(_t20$1 || (_t20$1 = _$5`
   padding-left: var(--goa-space-xl);
 `));
-const CompletionStatus = styled.div(_t21 || (_t21 = _$4`
+const CompletionStatus = styled.div(_t21 || (_t21 = _$5`
   padding: 0;
   margin: 0;
   padding-left: var(--goa-space-xl);
   padding-bottom: var(--goa-space-xl);
 `));
-const PageStepperRow = styled.tr(_t22 || (_t22 = _$4`
+const PageStepperRow = styled.tr(_t22 || (_t22 = _$5`
   ${0}
 `), ({
   disabled
@@ -7403,7 +7403,7 @@ const pickPropertyValues = (obj, property, endWithType) => {
   Object.entries(obj).forEach(function ([key, value]) {
     if (key === property) {
       values.push(value);
-    } else if (_$a.isObject(value)) {
+    } else if (_$b.isObject(value)) {
       // if the object type is equal to end type, we are not going to continue the recursive approach
       if ((value === null || value === void 0 ? void 0 : value.type) === endWithType) {
         if (property in value) {
@@ -7412,7 +7412,7 @@ const pickPropertyValues = (obj, property, endWithType) => {
       } else {
         values = [...values, ...pickPropertyValues(value, property, endWithType)];
       }
-    } else if (_$a.isArray(value)) {
+    } else if (_$b.isArray(value)) {
       const nextValues = value.map(function (arrayObj) {
         return pickPropertyValues(arrayObj, property, endWithType);
       });
@@ -7509,26 +7509,31 @@ const FormStepperReviewer = props => {
 };
 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' || e.keyword === 'minItems' || e.keyword === 'errorMessage').map(e => {
-    return getControlPath(e);
-  });
-  const _scopes = scopes.map(scope => toDataPath(scope)).filter(path => requiredErrorPaths && isErrorPathIncluded(requiredErrorPaths, path));
-  return _scopes;
+const getIncompletePaths = (ajv, schema, data, scopes) => {
+  var _a, _b, _c, _d;
+  const incomplete = [];
+  for (const scope of scopes) {
+    const path = toDataPath(scope);
+    const value = get$1(data, path);
+    const schemaPath = path.split('.');
+    let currentSchema = schema;
+    for (const key of schemaPath) {
+      if (!currentSchema || !currentSchema.properties || !currentSchema.properties[key]) {
+        currentSchema = null;
+        break;
+      }
+      currentSchema = currentSchema.properties[key];
+    }
+    const isRequired = schemaPath.length > 1 ? (_c = (_b = (_a = schema === null || schema === void 0 ? void 0 : schema.properties) === null || _a === void 0 ? void 0 : _a[schemaPath[0]]) === null || _b === void 0 ? void 0 : _b.required) === null || _c === void 0 ? void 0 : _c.includes(schemaPath[1]) : (_d = schema === null || schema === void 0 ? void 0 : schema.required) === null || _d === void 0 ? void 0 : _d.includes(path);
+    const hasMinLength = (currentSchema === null || currentSchema === void 0 ? void 0 : currentSchema.minLength) !== undefined;
+    if (isRequired && (value === undefined || value === null || value === '') || hasMinLength && typeof value === 'string' && value.length < currentSchema.minLength) {
+      incomplete.push(path);
+    }
+  }
+  return incomplete;
 };
 const subErrorInParent = (error, paths) => {
   /*
@@ -7556,6 +7561,10 @@ const getErrorsInScopes = (errors, scopes) => {
     return dataPaths.includes(e.instancePath) || subErrorInParent(e, dataPaths);
   });
 };
+const hasDataInScopes = (data, scopes) => {
+  const dataPaths = scopes.map(s => toDataPath(s));
+  return dataPaths.map(p => get$1(data, p)).some(data => data !== undefined);
+};
 const getLocalStorageKeyPrefix = () => {
   return window.location.href + '_' + new Date().toISOString().slice(0, 10);
 };
@@ -7645,15 +7654,21 @@ const stepperReducer = (state, action) => {
         const {
           id,
           ajv,
-          errors
+          errors = [],
+          schema,
+          data
         } = action.payload;
-        if (id === state.categories.length || id === state.categories.length + 1) {
+        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) || []);
+        if (schema && typeof schema === 'object') {
+          try {
+            ajv.validate(schema, data);
+          } catch (err) {
+            console.warn('AJV validation error:', err);
+          }
+        }
+        const incompletePaths = getIncompletePaths(ajv, schema, data, ((_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) || []);
         if (state.categories[id]) {
           state.categories[id].isCompleted = (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0;
@@ -7665,7 +7680,7 @@ const stepperReducer = (state, action) => {
     case 'validate/form':
       {
         const {
-          errors
+          errors = []
         } = action.payload;
         state.isValid = errors.length === 0;
         return Object.assign({}, state);
@@ -7691,7 +7706,6 @@ const createStepperContextInitData = props => {
     schema,
     ajv,
     t,
-    visible,
     path
   } = props;
   const categorization = uischema;
@@ -7700,17 +7714,22 @@ const createStepperContextInitData = props => {
   const isCacheStatus = (_b = uischema.options) === null || _b === void 0 ? void 0 : _b.cacheStatus;
   /* istanbul ignore next */
   const cachedStatus = isCacheStatus && getIsVisitFromLocalStorage() || [];
+  ajv.validate(schema, data);
   const categories = (_c = categorization.elements) === null || _c === void 0 ? void 0 : _c.map((c, id) => {
     const scopes = pickPropertyValues(c, 'scope', 'ListWithDetail');
-    const incompletePaths = getIncompletePaths(ajv, scopes) || [];
+    const incompletePaths = getIncompletePaths(ajv, schema, data, scopes);
+    const hasAnyData = hasDataInScopes(data, scopes);
+    const isVisited = isCacheStatus ? cachedStatus.at(id) : hasAnyData;
+    const isCompleted = isVisited && incompletePaths.length === 0;
+    const isValid = isCompleted;
     return {
       id,
       label: deriveLabelForUISchemaElement(c, t),
       scopes,
       /* istanbul ignore next */
-      isVisited: isCacheStatus ? cachedStatus.at(id) : false,
-      isCompleted: (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0,
-      isValid: (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0,
+      isVisited,
+      isCompleted,
+      isValid,
       uischema: c,
       showReviewPageLink: props.withBackReviewBtn || false,
       isEnabled: isEnabled(c, data, '', ajv),
@@ -7793,7 +7812,9 @@ const JsonFormsStepperContextProvider = ({
           payload: {
             errors: (_a = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _a === void 0 ? void 0 : _a.errors,
             id,
-            ajv
+            ajv,
+            schema,
+            data
           }
         });
       },
@@ -7807,7 +7828,9 @@ const JsonFormsStepperContextProvider = ({
               payload: {
                 errors: (_b = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _b === void 0 ? void 0 : _b.errors,
                 id: i,
-                ajv
+                ajv,
+                schema,
+                data
               }
             });
           }
@@ -7834,7 +7857,7 @@ const JsonFormsStepperContextProvider = ({
         });
       }
     };
-  }, [stepperDispatch, stepperState, (_b = ctx.core) === null || _b === void 0 ? void 0 : _b.errors, ajv]);
+  }, [stepperDispatch, stepperState, (_b = ctx.core) === null || _b === void 0 ? void 0 : _b.errors, ajv, schema, data]);
   /* istanbul ignore next */
   useEffect(() => {
     const handleBeforeUnload = () => {
@@ -8326,6 +8349,56 @@ const FormStepperPageReviewer = props => {
 };
 withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperPageReviewer)));
 
+let _$4 = t => t,
+  _t$4;
+const BackButtonWrapper = styled.span(_t$4 || (_t$4 = _$4`
+  .back-link::before {
+    content: '';
+    display: inline-block;
+    width: 42px;
+    height: 24px;
+    vertical-align: middle;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>')
+      center center no-repeat;
+  }
+
+  .back-link:visited::before,
+  .back-link:hover::before {
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>')
+      center center no-repeat;
+  }
+
+  .back-link {
+    margin-top: var(--goa-space-m);
+  }
+  display: inline-block;
+  color: #0070c4;
+  cursor: pointer;
+
+  on .goa-icon {
+    display: inline-block !important;
+    position: relative;
+    top: 3px;
+    right: 2px;
+    color: #0070c4;
+    margin-left: 4px;
+  }
+`));
+const BackButton = ({
+  text,
+  testId,
+  link
+}) => {
+  return jsx(BackButtonWrapper, {
+    "data-testid": "back-button-click",
+    onClick: link,
+    children: jsx("div", {
+      className: "back-link",
+      children: text
+    })
+  });
+};
+
 const RenderPages = props => {
   var _a, _b;
   const {
@@ -8379,7 +8452,14 @@ const RenderPages = props => {
       children: jsx("div", {
         id: `${path || `goa`}-form-pages`,
         children: jsxs(PageBorder, {
-          children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
+          children: [jsx(BackButton, {
+            text: "Back to tasks",
+            link: () => {
+              handleSave();
+              goToTableOfContext();
+            },
+            testId: "back-to-tasks"
+          }), categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
             const categoryProps = {
               category: category.uischema,
               categoryIndex: category.id,
@@ -8405,17 +8485,23 @@ const RenderPages = props => {
                   children: jsxs(GoAGrid, {
                     minChildWidth: "100px",
                     gap: "2xs",
-                    children: [jsx(GoAButtonGroup, {
+                    children: [jsxs(GoAButtonGroup, {
                       alignment: "start",
-                      children: jsx(GoAButton, {
+                      children: [activeId > 0 && jsx(GoAButton, {
                         type: "secondary",
                         onClick: () => {
-                          validatePage(index);
-                          goToTableOfContext();
+                          handleSave();
+                          let prevId = activeId - 1;
+                          while (prevId >= 0 && categories[prevId].visible === false) {
+                            prevId = prevId - 1;
+                          }
+                          if (prevId >= 0) {
+                            goToPage(prevId);
+                          }
                         },
-                        testId: "back-button",
+                        testId: "pages-prev-btn",
                         children: "Previous"
-                      })
+                      }), ' ']
                     }), jsx(GoAButtonGroup, {
                       alignment: "end",
                       children: jsx(GoAButton, {
@@ -8428,7 +8514,7 @@ const RenderPages = props => {
                           }
                           goToPage(nextId);
                         },
-                        disabled: !(category.isValid && category.isCompleted) || !enabled,
+                        disabled: !enabled,
                         testId: "pages-save-continue-btn",
                         children: "Next"
                       })
@@ -8442,20 +8528,10 @@ const RenderPages = props => {
             children: [jsx(FormStepperPageReviewer, Object.assign({}, props.categoryProps, {
               navigationFunc: goToPage
             })), jsx(PageRenderPadding, {
-              children: jsxs(GoAGrid, {
+              children: jsx(GoAGrid, {
                 minChildWidth: "100px",
                 gap: "2xs",
-                children: [jsx(GoAButtonGroup, {
-                  alignment: "start",
-                  children: jsx(GoAButton, {
-                    type: "secondary",
-                    onClick: () => {
-                      goToTableOfContext();
-                    },
-                    testId: "back-button",
-                    children: "Previous"
-                  })
-                }), jsx(GoAButtonGroup, {
+                children: jsx(GoAButtonGroup, {
                   alignment: "end",
                   children: !hideSubmit ? jsx(GoAButton, {
                     type: 'primary',
@@ -8464,7 +8540,7 @@ const RenderPages = props => {
                     testId: "pages-submit-btn",
                     children: "Submit"
                   }) : null
-                })]
+                })
               })
             })]
           })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.21.1",
+  "version": "2.21.3",
   "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/context/reducer.d.ts

@@ -18,6 +18,8 @@ export type StepperAction = {
         errors?: ErrorObject[];
         id: number;
         ajv: Ajv;
+        schema: any;
+        data: any;
     };
 } | {
     type: 'validate/form';

package/src/lib/Controls/FormStepper/context/util.d.ts

@@ -1,6 +1,6 @@
 import Ajv, { ErrorObject } from 'ajv';
 export declare const isErrorPathIncluded: (errorPaths: string[], path: string) => boolean;
-export declare const getIncompletePaths: (ajv: Ajv, scopes: string[]) => string[];
+export declare const getIncompletePaths: (ajv: Ajv, schema: any, data: any, scopes: string[]) => string[];
 export declare const subErrorInParent: (error: ErrorObject, paths: string[]) => boolean;
 export declare const getErrorsInScopes: (errors: ErrorObject[], scopes: string[]) => ErrorObject[];
 export declare const hasDataInScopes: (data: object, scopes: string[]) => boolean;