@abgov/jsonforms-components 1.54.4 → 1.55.1

package/index.esm.js

@@ -7,7 +7,7 @@ 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 { withJsonFormsControlProps, withJsonFormsRendererProps, withJsonFormsEnumProps, withTranslateProps, useJsonForms, JsonFormsDispatch, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
-import * as _$b from 'lodash';
+import * as _$c from 'lodash';
 import { isEqual, isObject as isObject$f } from 'lodash';
 import merge from 'lodash/merge';
 import isEmpty from 'lodash/isEmpty';
@@ -3028,16 +3028,16 @@ const onChangeForNumericControl = props => {
   }
 };
 
-let _$a = t => t,
-  _t$a,
+let _$b = t => t,
+  _t$b,
   _t2$7;
-styled.div(_t$a || (_t$a = _$a`
+styled.div(_t$b || (_t$b = _$b`
   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 = _$a`
+const Visible = styled.div(_t2$7 || (_t2$7 = _$b`
   display: ${0};
 `), p => p.visible ? 'initial' : 'none');
 
@@ -3797,21 +3797,21 @@ const JsonFormRegisterProvider = ({
   });
 };
 
-let _$9 = t => t,
-  _t$9,
+let _$a = t => t,
+  _t$a,
   _t2$6,
   _t3$5;
-const FormFieldWrapper = styled.div(_t$9 || (_t$9 = _$9`
+const FormFieldWrapper = styled.div(_t$a || (_t$a = _$a`
   margin-bottom: var(--goa-space-l);
 `));
-const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$9`
+const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$a`
   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 = _$9`
+const RequiredTextLabel = styled.label(_t3$5 || (_t3$5 = _$a`
   color: var(--goa-color-greyscale-700);
   font-weight: var(--goa-font-weight-regular);
   font-size: var(--goa-font-size-2);
@@ -3829,12 +3829,12 @@ const GoAInputBaseControl = props => {
     required,
     path,
     isStepperReview,
-    skipOnBlurValidation
+    skipInitialValidation
   } = props;
   const InnerComponent = input;
   const labelToUpdate = convertToSentenceCase(getLabelText(uischema.scope, label || ''));
   let modifiedErrors = checkFieldValidity(props);
-  const [isVisited, setIsVisited] = useState(skipOnBlurValidation === true);
+  const [isVisited, setIsVisited] = useState(skipInitialValidation === true);
   if (modifiedErrors === 'must be equal to one of the allowed values') {
     modifiedErrors = '';
   }
@@ -4039,12 +4039,12 @@ const SPACE_KEY = ' ';
 const ALT_KEY = 'Alt';
 const SHIFT_KEY = 'Shift';
 
-let _$8 = t => t,
-  _t$8,
+let _$9 = t => t,
+  _t$9,
   _t2$5,
   _t3$4,
   _t4$4;
-const GoADropdownTextbox = styled.div(_t$8 || (_t$8 = _$8`
+const GoADropdownTextbox = styled.div(_t$9 || (_t$9 = _$9`
   border-radius: var(--goa-space-2xs);
   box-shadow: ${0};
   &:hover {
@@ -4055,11 +4055,11 @@ const GoADropdownTextbox = styled.div(_t$8 || (_t$8 = _$8`
     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 = _$8`
+const GoADropdownListContainerWrapper = styled.div(_t2$5 || (_t2$5 = _$9`
   position: relative;
   display: ${0};
 `), p => !(p === null || p === void 0 ? void 0 : p.isOpen) && 'none');
-const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$8`
+const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$9`
   border: solid 1px var(--goa-color-greyscale-200);
   border-radius: var(--goa-space-2xs);
   background: var(--goa-color-greyscale-white);
@@ -4083,7 +4083,7 @@ const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$8`
     scrollbar-color: #a8a8a8 var(--goa-color-greyscale-100) !important;
   }
 `), p => p.optionListMaxHeight || '272px');
-const GoADropdownListOption = styled.div(_t4$4 || (_t4$4 = _$8`
+const GoADropdownListOption = styled.div(_t4$4 || (_t4$4 = _$9`
   padding: var(--goa-space-2xs) var(--goa-space-s);
   text-overflow: ellipsis;
   color: ${0} !important;
@@ -5162,8 +5162,8 @@ const BooleanRadioControl = props => jsx(GoAInputBaseControl, Object.assign({},
 const GoABooleanRadioControlTester = rankWith(3, and(isBooleanControl, optionIs('radio', true)));
 const GoABooleanRadioControl = withJsonFormsControlProps(BooleanRadioControl);
 
-let _$7 = t => t,
-  _t$7;
+let _$8 = t => t,
+  _t$8;
 const Checkboxes = ({
   children,
   orientation,
@@ -5175,7 +5175,7 @@ const Checkboxes = ({
     children: children
   });
 };
-const CheckBoxGroupDiv = styled.div(_t$7 || (_t$7 = _$7`
+const CheckBoxGroupDiv = styled.div(_t$8 || (_t$8 = _$8`
   .horizontal {
     display: flex;
     flex-direction: row;
@@ -5292,12 +5292,12 @@ const GoABaseInputReviewComponent = props => {
 const GoInputBaseReview = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
   input: GoABaseInputReviewComponent,
   isStepperReview: true,
-  skipOnBlurValidation: true
+  skipInitialValidation: true
 }));
 const GoInputBaseReviewControl = withJsonFormsControlProps(GoInputBaseReview);
 
-let _$6 = t => t,
-  _t$6;
+let _$7 = t => t,
+  _t$7;
 const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
   return elements.map((child, index) => jsx("div", {
     children: jsx(JsonFormsDispatch, {
@@ -5378,14 +5378,14 @@ const ReviewLayoutRenderer = ({
     }
   }
 };
-const ReviewGrid = styled.div(_t$6 || (_t$6 = _$6`
+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 _$5 = t => t,
-  _t$5,
+let _$6 = t => t,
+  _t$6,
   _t2$4,
   _t3$3,
   _t4$3,
@@ -5395,8 +5395,10 @@ let _$5 = t => t,
   _t8$1,
   _t9$1,
   _t10$1,
-  _t11$1;
-const ReviewItem = styled.div(_t$5 || (_t$5 = _$5`
+  _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;
@@ -5407,7 +5409,7 @@ const ReviewItem = styled.div(_t$5 || (_t$5 = _$5`
     display: none;
   }
 `));
-const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$5`
+const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$6`
   background-color: #f1f1f1;
   margin-bottom: var(--goa-space-m);
   padding: var(--goa-space-m);
@@ -5418,18 +5420,18 @@ const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$5`
     max-width: 1600px;
   }
 `));
-const ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$5`
+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 = _$5`
+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 = _$5`
+const Anchor = styled.div(_t5$2 || (_t5$2 = _$6`
   color: #0070c4;
   text-decoration: underline;
   outline: none;
@@ -5440,20 +5442,20 @@ const Anchor = styled.div(_t5$2 || (_t5$2 = _$5`
     background-color: #e6f7ff;
   }
 `));
-styled.div(_t6$2 || (_t6$2 = _$5`
+styled.div(_t6$2 || (_t6$2 = _$6`
   margin-left: var(--goa-space-m);
 `));
-styled.div(_t7$1 || (_t7$1 = _$5`
+styled.div(_t7$1 || (_t7$1 = _$6`
   margin-bottom: var(--goa-space-m);
 `));
-styled.div(_t8$1 || (_t8$1 = _$5`
+styled.div(_t8$1 || (_t8$1 = _$6`
   margin: var(--goa-space-s);
   width: 100%;
 `));
-styled.h3(_t9$1 || (_t9$1 = _$5`
+styled.h3(_t9$1 || (_t9$1 = _$6`
   text-transform: capitalize;
 `));
-const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$5`
+const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$6`
   @media screen and (max-width: 767px) {
     margin-bottom: var(--goa-space-l);
   }
@@ -5463,13 +5465,19 @@ const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$5`
     margin-bottom: var(--goa-space-l);
   }
 `));
-const FormStepperSummaryH3 = styled.h3(_t11$1 || (_t11$1 = _$5`
+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) {
@@ -5794,7 +5802,7 @@ const pickPropertyValues = (obj, property, endWithType) => {
     var _a;
     if (key === property) {
       values.push(obj[key]);
-    } else if (_$b.isObject(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]) {
@@ -5803,7 +5811,7 @@ const pickPropertyValues = (obj, property, endWithType) => {
       } else {
         values = [...values, ...pickPropertyValues(obj[key], property, endWithType)];
       }
-    } else if (_$b.isArray(obj[key])) {
+    } else if (_$c.isArray(obj[key])) {
       const nextValues = obj[key].map(function (arrayObj) {
         return pickPropertyValues(arrayObj, property, endWithType);
       });
@@ -5915,7 +5923,7 @@ function isNumber(value) {
 }
 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').map(e => {
+  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));
@@ -6001,6 +6009,7 @@ const stepperReducer = (state, action) => {
           state.hasNextButton = id <= lastId;
           state.hasPrevButton = id !== 0;
           state.isOnReview = false;
+          state.maxReachedStep = Math.max(state.maxReachedStep, activeId);
           return Object.assign({}, state);
         }
       }
@@ -6049,7 +6058,6 @@ const createStepperContextInitData = props => {
   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');
-    // ListWithDetail path might have conflicts with others. The errors in ListWithDetail will still be caught in the ctx.core.errors
     const incompletePaths = getIncompletePaths(ajv, scopes);
     return {
       id,
@@ -6071,7 +6079,8 @@ const createStepperContextInitData = props => {
     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
+    isValid: valid === true,
+    maxReachedStep: 0
   };
 };
 const JsonFormsStepperContext = /*#__PURE__*/createContext(undefined);
@@ -6108,6 +6117,17 @@ const JsonFormsStepperContextProvider = ({
       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) || {});
@@ -6140,6 +6160,7 @@ const JsonFormsStepperContextProvider = ({
   }, [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: {
@@ -6148,6 +6169,8 @@ const JsonFormsStepperContextProvider = ({
           }))
         }
       });
+      context.goToPage(stepperState.maxReachedStep);
+      context.goToPage(stepperState.activeId);
     }
   }, [JSON.stringify(StepperProps.uischema), JSON.stringify(StepperProps.schema)]);
   return jsx(JsonFormsStepperContext.Provider, {
@@ -6212,9 +6235,11 @@ const FormStepperView = props => {
   const onCloseModal = () => {
     setIsOpen(false);
   };
-  return jsx("div", {
+  // eslint-disable-next-line
+  uischema.options;
+  return jsxs("div", {
     "data-testid": "form-stepper-test-wrapper",
-    children: jsx(Visible, {
+    children: [jsx(Visible, {
       visible: visible,
       children: jsxs("div", {
         id: `${path || `goa`}-form-stepper`,
@@ -6306,30 +6331,208 @@ const FormStepperView = props => {
               })
             })
           })]
-        }), jsxs(GoAModal, {
-          testId: "submit-confirmation",
-          open: isOpen,
-          heading: 'Form Submitted',
-          width: "640px",
-          actions: jsx(GoAButtonGroup, {
-            alignment: "end",
-            children: jsx(GoAButton, {
-              type: "primary",
-              testId: "close-submit-modal",
-              onClick: onCloseModal,
-              children: "Close"
-            })
-          }),
-          children: [jsx("b", {
-            children: "Submit is a test for preview purposes "
-          }), "(i.e. no actual form is being submitted)"]
         })]
       })
-    })
+    }), jsxs(GoAModal, {
+      testId: "submit-confirmation",
+      open: isOpen,
+      heading: 'Form Submitted',
+      width: "640px",
+      actions: jsx(GoAButtonGroup, {
+        alignment: "end",
+        children: jsx(GoAButton, {
+          type: "primary",
+          testId: "close-submit-modal",
+          onClick: onCloseModal,
+          children: "Close"
+        })
+      }),
+      children: [jsx("b", {
+        children: "Submit is a test for preview purposes "
+      }), "(i.e. no actual form is being submitted)"]
+    })]
   });
 };
 const FormStepperControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepper)));
 
+let _$5 = t => t,
+  _t$5;
+const BackButtonWrapper = styled.span(_t$5 || (_t$5 = _$5`
+  .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
+    })
+  });
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const FormPageStepper = props => {
+  const formStepperCtx = useContext(JsonFormsStepperContext);
+  /**
+   * StepperCtx can only be provided once to prevent issues from categorization in categorization
+   *  */
+  if ((formStepperCtx === null || formStepperCtx === void 0 ? void 0 : formStepperCtx.isProvided) === true) {
+    return jsx(FormPagesView, Object.assign({}, props));
+  }
+  return jsx(JsonFormsStepperContextProvider, {
+    StepperProps: Object.assign({}, props),
+    children: jsx(FormPagesView, Object.assign({}, props))
+  });
+};
+const FormPagesView = props => {
+  const {
+    uischema,
+    data,
+    schema,
+    path,
+    cells,
+    renderers,
+    visible,
+    t
+  } = props;
+  const enumerators = useContext(JsonFormContext);
+  const formStepperCtx = useContext(JsonFormsStepperContext);
+  const {
+    validatePage,
+    goToPage
+  } = formStepperCtx;
+  const {
+    categories,
+    isOnReview,
+    isValid,
+    activeId
+  } = formStepperCtx.selectStepperState();
+  const submitFormFunction = enumerators === null || enumerators === void 0 ? void 0 : enumerators.submitFunction.get('submit-form');
+  const submitForm = submitFormFunction && submitFormFunction();
+  const [isOpen, setIsOpen] = useState(false);
+  const handleSubmit = () => {
+    if (submitForm) {
+      submitForm(data);
+    } else {
+      setIsOpen(true);
+    }
+  };
+  const onCloseModal = () => {
+    setIsOpen(false);
+  };
+  useEffect(() => {
+    validatePage(activeId);
+  }, [data]);
+  return jsxs("div", {
+    "data-testid": "form-stepper-test-wrapper",
+    children: [jsx(Visible, {
+      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 = {
+              category: category.uischema,
+              categoryIndex: category.id,
+              visible: category === null || category === void 0 ? void 0 : category.visible,
+              enabled: category === null || category === void 0 ? void 0 : category.isEnabled,
+              path,
+              schema,
+              renderers,
+              cells,
+              data
+            };
+            if (index === activeId && !isOnReview) {
+              return jsxs("div", {
+                "data-testid": `step_${index}-content-pages`,
+                style: {
+                  marginTop: '1.5rem'
+                },
+                children: [index > 0 && jsx(BackButton, {
+                  testId: "back-button",
+                  link: () => goToPage(activeId - 1),
+                  text: "Back"
+                }), jsxs(PageRenderPadding, {
+                  children: [jsxs("h3", {
+                    children: ["Step ", index + 1, " of ", categories.length]
+                  }), jsx(RenderStepElements, Object.assign({}, props))]
+                }), 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(GoAButton, {
+                    type: 'primary',
+                    onClick: handleSubmit,
+                    disabled: !isValid,
+                    testId: "pages-submit-btn",
+                    children: "Submit"
+                  })
+                })]
+              }, `${category.label}`);
+            }
+          })
+        })
+      })
+    }), jsxs(GoAModal, {
+      testId: "submit-confirmation",
+      open: isOpen,
+      heading: 'Form Submitted',
+      width: "640px",
+      actions: jsx(GoAButtonGroup, {
+        alignment: "end",
+        children: jsx(GoAButton, {
+          type: "primary",
+          testId: "close-submit-modal",
+          onClick: onCloseModal,
+          children: "Close"
+        })
+      }),
+      children: [jsx("b", {
+        children: "Submit is a test for preview purposes "
+      }), "(i.e. no actual form is being submitted)"]
+    })]
+  });
+};
+const FormStepperPagesControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormPageStepper)));
+
 // Ensure that all children (Category) have valid elements or things tend
 // to blow up. If not, the the error control will report the problem.
 const categoriesAreValid = uischema => {
@@ -6345,7 +6548,14 @@ const categoriesAreValid = uischema => {
   }
   return isValid;
 };
-const CategorizationRendererTester = rankWith(2, and(uiTypeIs('Categorization'), categoriesAreValid));
+const CategorizationStepperRendererTester = rankWith(2, and(uiTypeIs('Categorization'), categoriesAreValid, uischema => {
+  var _a;
+  return ((_a = uischema.options) === null || _a === void 0 ? void 0 : _a.variant) === 'stepper';
+}));
+const CategorizationPagesRendererTester = rankWith(2, and(uiTypeIs('Categorization'), categoriesAreValid, uischema => {
+  var _a;
+  return ((_a = uischema.options) === null || _a === void 0 ? void 0 : _a.variant) === 'pages';
+}));
 
 let _$4 = t => t,
   _t$4;
@@ -10749,7 +10959,10 @@ const GoABaseReviewRenderers = [
   renderer: HelpReviewContent
 }];
 const GoAReviewRenderers = [...GoABaseReviewRenderers, {
-  tester: CategorizationRendererTester,
+  tester: CategorizationStepperRendererTester,
+  renderer: FormStepperReviewControl
+}, {
+  tester: CategorizationPagesRendererTester,
   renderer: FormStepperReviewControl
 }, {
   tester: FileUploaderTester,
@@ -10765,8 +10978,11 @@ const GoAReviewRenderers = [...GoABaseReviewRenderers, {
   renderer: withJsonFormsControlProps(AddressLookUpControlReview)
 }];
 const GoARenderers = [...GoABaseRenderers, {
-  tester: CategorizationRendererTester,
+  tester: CategorizationStepperRendererTester,
   renderer: FormStepperControl
+}, {
+  tester: CategorizationPagesRendererTester,
+  renderer: FormStepperPagesControl
 }, {
   tester: FileUploaderTester,
   renderer: withJsonFormsControlProps(FileUploader)
@@ -10782,4 +10998,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, CategorizationRendererTester, CheckboxGroup, ContextProviderC, ContextProviderClass, ContextProviderFactory, EnumCheckboxControl, EnumRadioControl, EnumSelect, FileUploader, FileUploaderReview, FileUploaderTester, FormStepper, FormStepperControl, 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, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.54.4",
+  "version": "1.55.1",
   "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/BackButton.d.ts

@@ -0,0 +1,7 @@
+interface ExternalLinkProps {
+    text: string;
+    link: () => void;
+    testId?: string;
+}
+export declare const BackButton: ({ text, testId, link }: ExternalLinkProps) => JSX.Element;
+export {};

package/src/lib/Controls/FormStepper/FormStepperTester.d.ts

@@ -1,3 +1,4 @@
 import { RankedTester, UISchemaElement } from '@jsonforms/core';
 export declare const categoriesAreValid: (uischema: UISchemaElement) => boolean;
-export declare const CategorizationRendererTester: RankedTester;
+export declare const CategorizationStepperRendererTester: RankedTester;
+export declare const CategorizationPagesRendererTester: RankedTester;

package/src/lib/Controls/FormStepper/PageStepperControl.d.ts

@@ -0,0 +1,12 @@
+import { GoAButtonType } from '@abgov/react-components-new';
+import { CategorizationStepperLayoutRendererProps } from './types';
+export interface FormPageOptionProps {
+    nextButtonLabel?: string;
+    nextButtonType?: GoAButtonType;
+    previousButtonLabel?: string;
+    previousButtonType?: GoAButtonType;
+}
+export declare const FormPageStepper: (props: CategorizationStepperLayoutRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormPagesView: (props: CategorizationStepperLayoutRendererProps) => JSX.Element;
+export declare const FormStepperPagesControl: (props: CategorizationStepperLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => import("react/jsx-runtime").JSX.Element;
+export default FormPageStepper;

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

@@ -18,6 +18,7 @@ export interface JsonFormsStepperContextProps {
     selectPath: () => string;
     selectCategory: (id: number) => CategoryState;
     goToPage: (id: number, updateCategoryId?: number) => void;
+    validatePage: (id: number) => void;
     isProvided?: boolean;
 }
 export declare const JsonFormsStepperContext: import("react").Context<JsonFormsStepperContextProps | undefined>;

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

@@ -23,5 +23,6 @@ export interface StepperContextDataType {
     path: string;
     isOnReview: boolean;
     isValid: boolean;
+    maxReachedStep: number;
 }
 export type CategorizationElement = Category | Categorization;

package/src/lib/Controls/FormStepper/index.d.ts

@@ -1,3 +1,4 @@
 export * from './FormStepperControl';
+export * from './PageStepperControl';
 export * from './FormStepperTester';
 export * from './FormStepperReviewControl';

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

@@ -10,3 +10,5 @@ export declare const ListWithDetail: import("styled-components/dist/types").ISty
 export declare const ListWithDetailHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
 export declare const RightAlignmentDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FormStepperSummaryH3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const PageRenderPadding: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+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;

package/src/lib/Controls/Inputs/InputBaseControl.d.ts

@@ -5,6 +5,6 @@ export interface WithInput {
     noLabel?: boolean;
     isStepperReview?: boolean;
     setIsVisited?: () => void;
-    skipOnBlurValidation?: boolean;
+    skipInitialValidation?: boolean;
 }
 export declare const GoAInputBaseControl: (props: ControlProps & WithInput) => JSX.Element;