@abgov/jsonforms-components 1.47.0 → 1.48.0

package/index.esm.js

@@ -1,15 +1,16 @@
 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, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoATable, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
 import styled from 'styled-components';
+import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useRef, useCallback } from 'react';
 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, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, isControl, isScoped, hasType, isCategorization, isLayout } from '@jsonforms/core';
+import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, toDataPath, deriveLabelForUISchemaElement, isEnabled, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, isControl, isScoped, hasType, isCategorization, isLayout } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsRendererProps, withJsonFormsEnumProps, withTranslateProps, useJsonForms, JsonFormsDispatch, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
-import { isEqual, isEmpty as isEmpty$2, isObject as isObject$f } from 'lodash';
+import * as _$b from 'lodash';
+import { isEqual, isObject as isObject$f } from 'lodash';
 import merge from 'lodash/merge';
-import isEmpty$1 from 'lodash/isEmpty';
+import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
 import { evaluateSync, compileSync } from '@mdx-js/mdx';
 import Ajv from 'ajv';
@@ -2787,52 +2788,6 @@ const convertToSentenceCase = input => {
   return firstWord.concat(newWords).join(' ');
 };
 
-const StepperContext = /*#__PURE__*/createContext({
-  updateStatus: status => {},
-  // return true because in the default case we don't want the
-  // input controls to take action if it is false.
-  isInitialized: _ => true,
-  stepId: 0
-});
-const isEmpty = value => {
-  return value === undefined || value === null || typeof value === 'string' && value.length < 1 || typeof value === 'boolean' && value === false;
-};
-const getCompletionStatus = (table, step, isFormChanged = false) => {
-  const nonEmptyCount = getNonEmptyCount(table, step);
-  const requiredCount = getRequiredCount(table, step);
-  if (nonEmptyCount === 0) {
-    if (!isFormChanged) {
-      return undefined;
-    }
-    if (requiredCount === 0) {
-      return 'complete';
-    } else {
-      return 'incomplete';
-    }
-  }
-  const requiredNonEmptyCount = getNonEmptyRequiredCount(table, step);
-  if (requiredNonEmptyCount === requiredCount) {
-    return 'complete';
-  }
-  return 'incomplete';
-};
-const getNonEmptyCount = (table, step) => {
-  const nonEmptyStatuses = Object.keys(table).filter(k => {
-    return table[k].step === step && !isEmpty(table[k].value);
-  });
-  return nonEmptyStatuses.length;
-};
-const getRequiredCount = (table, step) => {
-  const requiredStatuses = Object.keys(table).filter(k => {
-    return table[k].step === step && table[k].required;
-  });
-  return requiredStatuses.length;
-};
-const getNonEmptyRequiredCount = (table, step) => {
-  const requiredNonEmptyStatuses = Object.keys(table).filter(k => table[k].step === step && table[k].required && !isEmpty(table[k].value));
-  return requiredNonEmptyStatuses.length;
-};
-
 const standardizeDate = date => {
   try {
     const stdDate = new Date(date).toISOString().substring(0, 10);
@@ -3124,16 +3079,16 @@ const onChangeForNumericControl = props => {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const onChangeForCheckboxData = (data, name, value) => data ? !value ? data === null || data === void 0 ? void 0 : data.filter(item => item !== name) : [...data, name] : [name];
 
-let _$9 = t => t,
-  _t$9,
+let _$a = t => t,
+  _t$a,
   _t2$6;
-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$6 || (_t2$6 = _$9`
+const Visible = styled.div(_t2$6 || (_t2$6 = _$a`
   display: ${0};
 `), p => p.visible ? 'initial' : 'none');
 
@@ -3893,9 +3848,9 @@ const JsonFormRegisterProvider = ({
   });
 };
 
-let _$8 = t => t,
-  _t$8;
-const FormFieldWrapper = styled.div(_t$8 || (_t$8 = _$8`
+let _$9 = t => t,
+  _t$9;
+const FormFieldWrapper = styled.div(_t$9 || (_t$9 = _$9`
   margin-bottom: var(--goa-space-l);
 `));
 
@@ -3917,30 +3872,6 @@ const GoAInputBaseControl = props => {
   if (modifiedErrors === 'must be equal to one of the allowed values') {
     modifiedErrors = '';
   }
-  const getStepStatus = (props, value) => {
-    return {
-      id: props.id,
-      value: value,
-      required: props.required || false,
-      type: props.schema.type,
-      step: stepperContext.stepId
-    };
-  };
-  const stepperContext = useContext(StepperContext);
-  const handlerWithStepperUpdate = (path, value) => {
-    stepperContext.updateStatus(getStepStatus(props, value));
-    props.handleChange(path, value);
-  };
-  const modifiedProps = Object.assign(Object.assign({}, props), {
-    handleChange: handlerWithStepperUpdate
-  });
-  useEffect(() => {
-    if (!stepperContext.isInitialized(props.id)) {
-      const status = getStepStatus(props, props.data);
-      stepperContext.updateStatus(status);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   return jsx(JsonFormRegisterProvider, {
     defaultRegisters: undefined,
     children: jsx(Visible, {
@@ -3952,7 +3883,7 @@ const GoAInputBaseControl = props => {
           testId: `${isStepperReview === true && 'review-base-'}${path}`,
           label: (props === null || props === void 0 ? void 0 : props.noLabel) === true ? '' : labelToUpdate,
           helpText: typeof ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.help) === 'string' && !isStepperReview ? (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help : '',
-          children: jsx(InnerComponent, Object.assign({}, modifiedProps))
+          children: jsx(InnerComponent, Object.assign({}, props))
         })
       })
     })
@@ -4169,29 +4100,7 @@ const MultiLineText = props => {
   const autoCapitalize = ((_e = (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps) === null || _e === void 0 ? void 0 : _e.autoCapitalize) === true || ((_f = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _f === void 0 ? void 0 : _f.autoCapitalize) === true;
   const readOnly = (_j = (_h = (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps) === null || _h === void 0 ? void 0 : _h.readOnly) !== null && _j !== void 0 ? _j : false;
   const textAreaName = `${label || path}-text-area` || '';
-  const textarea = (_k = document.getElementsByName(textAreaName)[0]) !== null && _k !== void 0 ? _k : null;
-  useEffect(() => {
-    if (textarea) {
-      textarea.addEventListener('blur', onBlur);
-    }
-    return () => {
-      if (textarea) {
-        textarea.removeEventListener('blur', onBlur);
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [textarea]);
-  const onBlur = event => {
-    let eventTargetValue = '';
-    if (event.target) {
-      eventTargetValue = event.target.value;
-    }
-    onBlurForTextControl({
-      name: path,
-      controlProps: props,
-      value: autoCapitalize ? eventTargetValue.toUpperCase() : eventTargetValue
-    });
-  };
+  (_k = document.getElementsByName(textAreaName)[0]) !== null && _k !== void 0 ? _k : null;
   const txtAreaComponent = jsx(GoATextArea, Object.assign({
     error: errorsFormInput.length > 0,
     value: textAreaValue,
@@ -4657,12 +4566,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$3;
-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 {
@@ -4673,11 +4582,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);
@@ -4701,7 +4610,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$3 || (_t4$3 = _$7`
+const GoADropdownListOption = styled.div(_t4$3 || (_t4$3 = _$8`
   padding: var(--goa-space-2xs) var(--goa-space-s);
   text-overflow: ellipsis;
   color: ${0} !important;
@@ -5202,8 +5111,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,
@@ -5215,7 +5124,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;
@@ -5295,6 +5204,8 @@ const GoInputBaseReview = props => jsx(GoAInputBaseControl, Object.assign({}, pr
 }));
 const GoInputBaseReviewControl = withJsonFormsControlProps(GoInputBaseReview);
 
+let _$6 = t => t,
+  _t$6;
 const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
   return elements.map((child, index) => jsx("div", {
     children: jsx(JsonFormsDispatch, {
@@ -5327,7 +5238,7 @@ const LayoutRenderer = ({
   visible,
   width
 }) => {
-  if (isEmpty$1(elements)) {
+  if (isEmpty(elements)) {
     return null;
   } else {
     if (direction === 'row') {
@@ -5346,6 +5257,40 @@ const LayoutRenderer = ({
     }
   }
 };
+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$6 || (_t$6 = _$6`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+`));
 
 let _$5 = t => t,
   _t$5,
@@ -5565,73 +5510,21 @@ const ContextProviderFactory = () => new ContextProviderClass().setup;
 const JsonFormContext = /*#__PURE__*/createContext(null);
 
 const RenderStepElements = props => {
-  return (
-    /*
-      [Mar-04-2024][Paul Li] the GoAPages internal state cannot handle the hidden/display well. We need extra hide/display control to it appropriately.
-     */
-    jsx(Visible, {
-      visible: props.categoryIndex === props.step - 1,
-      children: props.category.elements.map((uiSchema, index) => {
-        return jsx(JsonFormsDispatch, {
-          schema: props.schema,
-          uischema: uiSchema,
-          renderers: props.renderers,
-          cells: props.cells,
-          path: props.path,
-          visible: props.visible,
-          enabled: props.enabled && !props.disabledCategoryMap[props.categoryIndex]
-        }, index);
-      })
+  return jsx(Visible, {
+    visible: props.visible,
+    "date-testid": `${props.path}-categories-${props.categoryIndex}`,
+    children: props.category.elements.map((uiSchema, index) => {
+      return jsx(JsonFormsDispatch, {
+        schema: props.schema,
+        uischema: uiSchema,
+        renderers: props.renderers,
+        cells: props.cells,
+        path: props.path,
+        visible: props.visible,
+        enabled: props.enabled
+      }, `${props.path}-category-page-${index}`);
     })
-  );
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const validateData = (jsonSchema, data, ajv) => {
-  const newSchema = JSON.parse(JSON.stringify(jsonSchema));
-  Object.keys(newSchema.properties || {}).forEach(propertyName => {
-    var _a, _b, _c, _d, _e;
-    const property = newSchema.properties || {};
-    if (((_a = property[propertyName]) === null || _a === void 0 ? void 0 : _a.enum) && ((_b = property[propertyName]) === null || _b === void 0 ? void 0 : _b.enum[0]) === '') {
-      (_c = property[propertyName]) === null || _c === void 0 ? true : delete _c.enum;
-    }
-    if (((_d = property[propertyName]) === null || _d === void 0 ? void 0 : _d.format) === 'file-urn') {
-      delete property[propertyName].format;
-    }
-    if (((_e = property[propertyName]) === null || _e === void 0 ? void 0 : _e.title) === sinTitle && data && data[propertyName] === '') {
-      delete data[propertyName];
-    }
   });
-  try {
-    const validate = ajv.compile(newSchema);
-    return validate(data).valueOf();
-  } catch (e) {
-    return false;
-  }
-};
-
-/**
- * Steps can be hidden:
- * When the user clicks on a step in the stepper function, it returns
- * a step number relative to all steps.  Map to the step number relative
- * to the visible steps.
- */
-const mapToVisibleStep = (step, allSteps, visibleSteps) => {
-  if (visibleSteps.length < 1) return 0;
-  if (step < 1) return 1;
-  if (allSteps.length !== visibleSteps.length) {
-    const stepIndex = step - 1;
-    if (step > 1 && step <= allSteps.length) {
-      // Check to see if the the step is visible
-      const selectedLabel = allSteps[stepIndex];
-      const selectedIndex = visibleSteps.indexOf(selectedLabel);
-      step = selectedIndex !== -1 ? selectedIndex + 1 : 1;
-    }
-    if (step > allSteps.length) {
-      step = visibleSteps.length;
-    }
-  }
-  return step;
 };
 
 var uncurryThis$2 = functionUncurryThisClause;
@@ -5802,6 +5695,23 @@ const getProperty = (obj, propName) => {
     }
   }
 };
+// eslint-disable-next-line
+const pickPropertyValues = (obj, property) => {
+  let values = [];
+  Object.keys(obj).forEach(function (key) {
+    if (key === property) {
+      values.push(obj[key]);
+    } else if (_$b.isObject(obj[key])) {
+      values = [...values, ...pickPropertyValues(obj[key], property)];
+    } else if (_$b.isArray(obj[key])) {
+      const nextValues = obj[key].map(function (arrayObj) {
+        return pickPropertyValues(arrayObj, property);
+      });
+      values = [...values, ...nextValues];
+    }
+  });
+  return values;
+};
 
 const FormStepperReviewer = props => {
   var _a, _b, _c;
@@ -5811,8 +5721,6 @@ const FormStepperReviewer = props => {
     schema,
     ajv,
     cells,
-    renderers,
-    visible,
     enabled,
     navigationFunc
   } = props;
@@ -5830,12 +5738,14 @@ const FormStepperReviewer = props => {
           children: [jsx(ReviewItemTitle, {
             children: categoryLabel
           }), navigationFunc && jsx(Anchor, {
-            onClick: () => navigationFunc(index + 1),
+            onClick: () => {
+              navigationFunc(index);
+            },
             "data-testid": testId,
             onKeyDown: e => {
               if (!readOnly && (e.key === ' ' || e.key === 'Enter')) {
                 e.preventDefault();
-                navigationFunc(index + 1);
+                navigationFunc(index);
               }
             },
             children: readOnly ? 'View' : 'Edit'
@@ -5888,38 +5798,254 @@ const FormStepperReviewer = props => {
 };
 const FormStepperReviewControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperReviewer)));
 
+const stepperReducer = (state, action) => {
+  const {
+    activeId,
+    categories
+  } = state;
+  const lastId = categories[categories.length - 1].id;
+  switch (action.type) {
+    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 = false;
+          return Object.assign({}, state);
+        } else {
+          state.categories[id].isVisited = true;
+          state.hasNextButton = id <= lastId;
+          state.hasPrevButton = id !== 0;
+          state.isOnReview = false;
+          return Object.assign({}, state);
+        }
+      }
+    case 'update/category':
+      {
+        const {
+          id,
+          errors
+        } = action.payload;
+        if (state.isOnReview) {
+          return Object.assign({}, state);
+        }
+        const errorsInCategory = errors.filter(e => categories[id].scopes.map(s => '/' + toDataPath(s)).includes(e.instancePath));
+        state.categories[id].isCompleted = errorsInCategory.filter(e => e.keyword === 'required').length === 0;
+        state.categories[id].isValid = errorsInCategory.length === 0;
+        return Object.assign({}, state);
+      }
+    case 'validate/form':
+      {
+        const {
+          errors
+        } = action.payload;
+        state.isValid = errors.length === 0;
+        return Object.assign({}, state);
+      }
+  }
+  return state;
+};
+
+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 + '.');
+  });
+};
+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 => {
+    var _a;
+    return (_a = e === null || e === void 0 ? void 0 : e.schema) === null || _a === void 0 ? void 0 : _a[0];
+  });
+  const _scopes = scopes.map(scope => toDataPath(scope)).filter(path => requiredErrorPaths && isErrorPathIncluded(requiredErrorPaths, path));
+  return _scopes;
+};
+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');
+    const incompletePaths = getIncompletePaths(ajv, pickPropertyValues(c, 'scope'));
+    return {
+      id,
+      label: deriveLabelForUISchemaElement(c, t),
+      scopes,
+      isVisited: id === 0,
+      isCompleted: (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0,
+      isValid: (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0,
+      uischema: c,
+      isEnabled: isEnabled(c, data, '', ajv),
+      visible
+    };
+  });
+  const activeId = (props === null || props === void 0 ? void 0 : props.activeId) || 0;
+  return {
+    categories: categories,
+    activeId,
+    hasNextButton: true,
+    hasPrevButton: activeId > 0,
+    path,
+    isOnReview: activeId === (categories === null || categories === void 0 ? void 0 : categories.length),
+    isValid: valid === true
+  };
+};
+const JsonFormsStepperContext = /*#__PURE__*/createContext(undefined);
+const JsonFormsStepperContextProvider = ({
+  children,
+  StepperProps
+}) => {
+  const ctx = useJsonForms();
+  const [stepperState, dispatch] = useReducer(stepperReducer, createStepperContextInitData(StepperProps));
+  const stepperDispatch = (StepperProps === null || StepperProps === void 0 ? void 0 : StepperProps.customDispatch) || dispatch;
+  const context = useMemo(() => {
+    return {
+      stepperDispatch,
+      selectStepperState: () => {
+        return stepperState;
+      },
+      selectIsDisabled: () => {
+        var _a;
+        return !((_a = stepperState.categories[stepperState.activeId]) === null || _a === void 0 ? void 0 : _a.isEnabled);
+      },
+      selectIsActive: id => {
+        return id === stepperState.activeId;
+      },
+      selectPath: () => {
+        return stepperState.path;
+      },
+      selectCategory: id => {
+        return stepperState.categories[id];
+      },
+      goToPage: (id, updateCategoryId) => {
+        var _a, _b, _c;
+        if (updateCategoryId !== undefined) {
+          stepperDispatch({
+            type: 'update/category',
+            payload: {
+              errors: ((_a = ctx.core) === null || _a === void 0 ? void 0 : _a.errors) || [],
+              id: updateCategoryId
+            }
+          });
+        }
+        if (stepperState.isOnReview !== true) {
+          stepperDispatch({
+            type: 'update/category',
+            payload: {
+              errors: ((_b = ctx.core) === null || _b === void 0 ? void 0 : _b.errors) || [],
+              id: stepperState.activeId
+            }
+          });
+        }
+        stepperDispatch({
+          type: 'validate/form',
+          payload: {
+            errors: (_c = ctx.core) === null || _c === void 0 ? void 0 : _c.errors
+          }
+        });
+        stepperDispatch({
+          type: 'page/to/index',
+          payload: {
+            id
+          }
+        });
+      }
+    };
+  }, [ctx === null || ctx === void 0 ? void 0 : ctx.core, stepperDispatch, stepperState]);
+  return jsx(JsonFormsStepperContext.Provider, {
+    value: context,
+    children: children
+  });
+};
+
 const summaryLabel = 'Summary';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const FormStepper = props => {
-  var _a, _b, _c, _d;
+  /**
+   * The path check is to prevent the categorization in categorization case. This scenario is not supported in the current version.
+   *  */
+  if (props.path === undefined) {
+    return jsx(FormStepperView, Object.assign({}, props));
+  }
+  return jsx(JsonFormsStepperContextProvider, {
+    StepperProps: Object.assign({}, props),
+    children: jsx(FormStepperView, Object.assign({}, props))
+  });
+};
+const FormStepperView = props => {
+  var _a, _b, _c;
   const {
     uischema,
     data,
     schema,
-    ajv,
     path,
     cells,
     renderers,
     visible,
-    enabled,
     t
   } = props;
   const enumerators = useContext(JsonFormContext);
+  const formStepperCtx = useContext(JsonFormsStepperContext);
+  const {
+    activeId,
+    categories,
+    hasNextButton,
+    hasPrevButton,
+    isOnReview,
+    isValid
+  } = formStepperCtx.selectStepperState();
+  const {
+    selectIsDisabled,
+    goToPage
+  } = formStepperCtx;
   const submitFormFunction = enumerators === null || enumerators === void 0 ? void 0 : enumerators.submitFunction.get('submit-form');
   const submitForm = submitFormFunction && submitFormFunction();
-  const categorization = uischema;
-  const allCategories = JSON.parse(JSON.stringify(categorization));
-  const componentProps = (_b = (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) !== null && _b !== void 0 ? _b : {};
   const optionProps = uischema.options || {};
-  const [step, setStep] = React.useState(0);
-  const [staleCategories, setStaleCategories] = React.useState(categorization.elements);
-  const [isFormValid, setIsFormValid] = React.useState(false);
-  const [showNextBtn, setShowNextBtn] = React.useState(true);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [categories, setCategories] = React.useState(categorization.elements);
-  const [inputStatuses, setInputStatuses] = React.useState({});
-  const [stepStatuses, setStepStatuses] = React.useState([]);
-  const disabledCategoryMap = categories.map(c => !isEnabled(c, data, '', ajv));
+  const [isOpen, setIsOpen] = useState(false);
   const handleSubmit = () => {
     if (submitForm) {
       submitForm(data);
@@ -5930,130 +6056,40 @@ const FormStepper = props => {
   const onCloseModal = () => {
     setIsOpen(false);
   };
-  const visibleCategoryLabels = useMemo(() => {
-    return categories.map(c => deriveLabelForUISchemaElement(c, t));
-  }, [categories, t]);
-  useEffect(() => {}, [categories.length]);
-  useEffect(() => {
-    const cats = categorization.elements.filter(category => isVisible(category, data, '', ajv));
-    setCategories(cats);
-  }, [categorization, data, ajv]);
-  useEffect(() => {
-    const statuses = Array(categories.length);
-    categories.forEach((_, i) => {
-      statuses[i] = isEmpty$2(stepStatuses[i]) ? getCompletionStatus(inputStatuses, i + 1) : stepStatuses[i];
-    });
-    setStepStatuses(statuses);
-  }, [inputStatuses, categories]);
-  useEffect(() => {
-    const isValid = validateData(schema, data, ajv);
-    setIsFormValid(isValid);
-  }, [ajv, data, schema]);
-  useEffect(() => {
-    // Override the "controlled Navigation", if property is supplied
-    // Default: no controlled nav.
-    setStep((componentProps === null || componentProps === void 0 ? void 0 : componentProps.controlledNav) ? 1 : 0);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  useEffect(() => {
-    setStaleCategories(categories);
-  }, [categories]);
-  /* istanbul ignore next */
-  if ((categories === null || categories === void 0 ? void 0 : categories.length) < 1) {
-    // eslint-disable-next-line
-    return jsx(Fragment, {});
-  }
-  function nextPage(page, disabled) {
-    const pageStatus = getCompletionStatus(inputStatuses, page, true);
-    const statuses = [...stepStatuses];
-    statuses[page - 1] = pageStatus ? pageStatus : 'incomplete';
-    setStepStatuses(statuses);
-    page++;
-    while (page <= disabled.length && disabled[page - 1]) {
-      /* istanbul ignore next */
-      page++;
-    }
-    setPage(page);
-  }
-  function prevPage(page, disabled) {
-    const pageStatus = getCompletionStatus(inputStatuses, page, true);
-    const statuses = [...stepStatuses];
-    statuses[page - 1] = pageStatus ? pageStatus : 'incomplete';
-    setStepStatuses(statuses);
-    page--;
-    while (page >= 0 && disabled[page - 1]) {
-      /* istanbul ignore next */
-      page--;
-    }
-    setPage(page);
-  }
-  const getAllStatuses = (nextPage, totalVisibleTabs) => {
-    const previouslyActivePage = nextPage - 1;
-    const statuses = [...stepStatuses];
-    for (let currentPage = 1; currentPage <= previouslyActivePage; currentPage++) {
-      const pageStatus = getCompletionStatus(inputStatuses, currentPage, true);
-      statuses[currentPage - 1] = pageStatus ? pageStatus : 'incomplete';
-    }
-    return statuses;
-  };
-  /* istanbul ignore next */
-  function setTab(page) {
-    const categoryLabels = [...allCategories.elements.map(category => category.label), summaryLabel];
-    const visibleLabels = [...visibleCategoryLabels, summaryLabel];
-    const newPage = mapToVisibleStep(page, categoryLabels, visibleLabels);
-    if (Object.keys(inputStatuses).length) {
-      const statuses = getAllStatuses(page, visibleLabels.length);
-      setStepStatuses(statuses);
-    }
-    setPage(newPage);
-  }
-  function setPage(page) {
-    setStep(page);
-    if (page < 1 || page > categories.length + 1) return;
-    setShowNextBtn(categories.length + 1 !== page);
-  }
-  const updateInputStatus = inputStatus => {
-    inputStatuses[inputStatus.id] = inputStatus;
-    setInputStatuses(Object.assign({}, inputStatuses));
-  };
-  const isInputInitialized = inputId => {
-    return inputId in inputStatuses;
-  };
-  const isFormSubmitted = (_c = enumerators === null || enumerators === void 0 ? void 0 : enumerators.isFormSubmitted) !== null && _c !== void 0 ? _c : false;
-  return jsx("div", {
+  return jsxs("div", {
     "data-testid": "form-stepper-test-wrapper",
-    children: jsx(Visible, {
+    children: [jsx("div", {
+      children: ((_a = categories[activeId]) === null || _a === void 0 ? void 0 : _a.isCompleted) && ((_b = categories[activeId]) === null || _b === void 0 ? void 0 : _b.isVisited)
+    }), jsx(Visible, {
       visible: visible,
       children: jsxs("div", {
         id: `${path || `goa`}-form-stepper`,
         className: "formStepper",
-        children: [categories.length === staleCategories.length && jsxs(GoAFormStepper, {
-          testId: ((_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.testId) || 'form-stepper-test',
-          step: step,
+        children: [jsxs(GoAFormStepper, {
+          testId: `form-stepper-headers-${(_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.testId}` || 'form-stepper-test',
           onChange: step => {
-            setTab(step);
+            goToPage(step - 1);
           },
-          children: [categories === null || categories === void 0 ? void 0 : categories.map((_, index) => {
+          children: [categories === null || categories === void 0 ? void 0 : categories.map((c, index) => {
             return jsx(GoAFormStep, {
-              text: `${visibleCategoryLabels[index]}`,
-              status: stepStatuses[index]
-            }, `${visibleCategoryLabels[index]}-tab`);
+              "data-testid": `stepper-tab-${index}`,
+              text: `${c.label}`,
+              status: c.isValid ? 'complete' : 'incomplete'
+            }, `stepper-tab-${index}`);
           }), jsx(GoAFormStep, {
             text: "Review"
-          })]
-        }), jsxs(GoAPages, {
-          current: step,
+          }, `stepper-tab-review`)]
+        }, "stepper-form-stepper-wrapper"), jsxs(GoAPages, {
+          current: activeId + 1,
           mb: "xl",
           children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
             const props = {
-              category,
-              categoryIndex: index,
-              step: index + 1,
-              schema,
-              enabled,
-              visible,
+              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,
-              disabledCategoryMap,
+              schema,
               renderers,
               cells,
               data
@@ -6063,61 +6099,56 @@ const FormStepper = props => {
               style: {
                 marginTop: '1.5rem'
               },
-              children: jsx(StepperContext.Provider, {
-                value: {
-                  stepId: index + 1,
-                  updateStatus: updateInputStatus,
-                  isInitialized: isInputInitialized
-                },
-                children: RenderStepElements(props)
-              })
-            }, `${visibleCategoryLabels[index]}`);
+              children: jsx(RenderStepElements, Object.assign({}, props))
+            }, `${category.label}`);
           }), jsxs("div", {
             "data-testid": "summary_step-content",
             children: [jsx(FormStepperSummaryH3, {
               children: summaryLabel
-            }), jsx(FormStepperReviewer, Object.assign({
-              navigationFunc: setPage
-            }, props))]
+            }), jsx(FormStepperReviewer, Object.assign({}, props, {
+              navigationFunc: goToPage
+            }))]
           })]
-        }), step !== 0 && jsxs(GoAGrid, {
+        }), jsxs(GoAGrid, {
           minChildWidth: "100px",
           children: [jsx("div", {
-            children: step !== 1 ? jsx(GoAButton, {
+            children: hasPrevButton ? jsx(GoAButton, {
               type: (optionProps === null || optionProps === void 0 ? void 0 : optionProps.previousButtonType) ? optionProps === null || optionProps === void 0 ? void 0 : optionProps.previousButtonType : 'secondary',
-              disabled: disabledCategoryMap[step - 1],
+              disabled: selectIsDisabled(),
               onClick: () => {
                 const element = document.getElementById(`${path || `goa`}-form-stepper`);
                 if (element) {
                   element.scrollIntoView();
                 }
-                prevPage(step, disabledCategoryMap);
+                goToPage(activeId - 1, activeId);
               },
               testId: "prev-button",
               children: (optionProps === null || optionProps === void 0 ? void 0 : optionProps.previousButtonLabel) ? optionProps === null || optionProps === void 0 ? void 0 : optionProps.previousButtonLabel : 'Previous'
             }) : jsx("div", {})
-          }), jsxs(RightAlignmentDiv, {
-            children: [step !== null && showNextBtn && jsx(GoAButton, {
+          }), hasNextButton && jsx(RightAlignmentDiv, {
+            children: jsx(GoAButton, {
               type: (optionProps === null || optionProps === void 0 ? void 0 : optionProps.nextButtonType) ? optionProps === null || optionProps === void 0 ? void 0 : optionProps.nextButtonType : 'primary',
-              disabled: disabledCategoryMap[step - 1],
+              disabled: selectIsDisabled(),
               onClick: () => {
+                goToPage(activeId + 1, activeId);
                 const element = document.getElementById(`${path || `goa`}-form-stepper`);
                 if (element) {
                   element.scrollIntoView();
                 }
-                nextPage(step, disabledCategoryMap);
               },
               testId: "next-button",
               children: (optionProps === null || optionProps === void 0 ? void 0 : optionProps.nextButtonLabel) ? optionProps === null || optionProps === void 0 ? void 0 : optionProps.nextButtonLabel : 'Next'
-            }), !showNextBtn && !isFormSubmitted && jsx("div", {
+            })
+          }), isOnReview && jsx(RightAlignmentDiv, {
+            children: jsx("div", {
               children: jsx(GoAButton, {
                 type: 'primary',
                 onClick: handleSubmit,
-                disabled: !isFormValid,
+                disabled: !isValid,
                 testId: "stepper-submit-btn",
                 children: "Submit"
               })
-            })]
+            })
           })]
         }), jsxs(GoAModal, {
           testId: "submit-confirmation",
@@ -6138,7 +6169,7 @@ const FormStepper = props => {
           }), "(i.e. no actual form is being submitted)"]
         })]
       })
-    })
+    })]
   });
 };
 const FormStepperControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepper)));
@@ -7040,7 +7071,7 @@ const NonEmptyCell$1 = ownProps => {
   const emptyCellProps = ctxToNonEmptyCellProps$1(ctx, Object.assign(Object.assign({}, ownProps), {
     data
   }));
-  const isValid = isEmpty$1(emptyCellProps.errors);
+  const isValid = isEmpty(emptyCellProps.errors);
   return jsx(NonEmptyCellComponent$1, Object.assign({}, emptyCellProps, {
     handleChange: ownProps === null || ownProps === void 0 ? void 0 : ownProps.handleChange,
     isInReview: ownProps === null || ownProps === void 0 ? void 0 : ownProps.isInReview,
@@ -7504,7 +7535,7 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
 const NonEmptyCell = ownProps => {
   const ctx = useJsonForms();
   const emptyCellProps = ctxToNonEmptyCellProps(ctx, ownProps);
-  const isValid = isEmpty$1(emptyCellProps.errors);
+  const isValid = isEmpty(emptyCellProps.errors);
   return jsx(NonEmptyCellComponent, Object.assign({}, emptyCellProps, {
     isValid: isValid
   }));
@@ -9163,7 +9194,7 @@ const GoAHorizontalReviewLayoutComponent = ({
     visible,
     width: ((_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.review) === null || _b === void 0 ? void 0 : _b.width) || '30ch'
   };
-  return jsx(LayoutRenderer, Object.assign({}, childProps, {
+  return jsx(ReviewLayoutRenderer, Object.assign({}, childProps, {
     renderers: renderers,
     cells: cells
   }));
@@ -10577,4 +10608,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, 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, 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, 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, createDefaultAjv, enumControl, errMalformedDate, formatSin, isAddressLookup, isFullName, isFullNameDoB, registerReducer, resolveRefs, tryResolveRefs };

package/package.json

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

@@ -6,6 +6,7 @@ export interface FormStepperOptionProps {
     previousButtonLabel?: string;
     previousButtonType?: GoAButtonType;
 }
-export declare const FormStepper: (props: CategorizationStepperLayoutRendererProps) => JSX.Element;
+export declare const FormStepper: (props: CategorizationStepperLayoutRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormStepperView: (props: CategorizationStepperLayoutRendererProps) => JSX.Element;
 export declare const FormStepperControl: (props: CategorizationStepperLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => import("react/jsx-runtime").JSX.Element;
 export default FormStepper;

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

@@ -1,14 +1,12 @@
-import { Categorization, Category, JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry, JsonSchema } from '@jsonforms/core';
-export type CategorizationElement = Category | Categorization;
+import { JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry, JsonSchema } from '@jsonforms/core';
+import { CategorizationElement } from './context/types';
 export interface StepProps {
     category: CategorizationElement;
     categoryIndex: number;
-    step: number;
     schema: JsonSchema;
-    enabled: boolean;
     visible: boolean;
+    enabled: boolean;
     path: string;
-    disabledCategoryMap: boolean[];
     renderers: JsonFormsRendererRegistryEntry[] | undefined;
     cells: JsonFormsCellRendererRegistryEntry[] | undefined;
     data: Record<string, unknown>;

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

@@ -0,0 +1,26 @@
+import { ReactNode, Dispatch } from 'react';
+import { CategorizationStepperLayoutRendererProps } from '../types';
+import { StepperContextDataType, CategoryState } from './types';
+import Ajv from 'ajv';
+import { JsonFormStepperDispatch } from './reducer';
+export interface JsonFormsStepperContextProviderProps {
+    children: ReactNode;
+    StepperProps: CategorizationStepperLayoutRendererProps & {
+        customDispatch?: Dispatch<any> & {
+            activeId?: number;
+        };
+    };
+}
+export interface JsonFormsStepperContextProps {
+    stepperDispatch: JsonFormStepperDispatch;
+    selectStepperState: () => StepperContextDataType;
+    selectIsDisabled: () => boolean;
+    selectIsActive: (id: number) => boolean;
+    selectPath: () => string;
+    selectCategory: (id: number) => CategoryState;
+    goToPage: (id: number, updateCategoryId?: number) => void;
+}
+export declare const isErrorPathIncluded: (errorPaths: string[], path: string) => boolean;
+export declare const getIncompletePaths: (ajv: Ajv, scopes: string[]) => string[];
+export declare const JsonFormsStepperContext: import("react").Context<JsonFormsStepperContextProps | undefined>;
+export declare const JsonFormsStepperContextProvider: ({ children, StepperProps, }: JsonFormsStepperContextProviderProps) => JSX.Element;

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

@@ -0,0 +1,3 @@
+export * from './StepperContext';
+export * from './types';
+export * from './reducer';

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

@@ -0,0 +1,26 @@
+import { StepperContextDataType } from './types';
+import { ErrorObject } from 'ajv';
+import { Dispatch } from 'react';
+export type JsonFormStepperDispatch = Dispatch<StepperAction>;
+export type StepperAction = {
+    type: 'page/next';
+} | {
+    type: 'page/prev';
+} | {
+    type: 'page/to/index';
+    payload: {
+        id: number;
+    };
+} | {
+    type: 'update/category';
+    payload: {
+        errors: ErrorObject[];
+        id: number;
+    };
+} | {
+    type: 'validate/form';
+    payload: {
+        errors?: ErrorObject[];
+    };
+};
+export declare const stepperReducer: (state: StepperContextDataType, action: StepperAction) => StepperContextDataType;

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

@@ -0,0 +1,27 @@
+import { Categorization, Category } from '@jsonforms/core';
+export interface CategoryInternalState {
+    isCompleted?: boolean;
+    isVisited?: boolean;
+    isValid?: boolean;
+    id: number;
+    uischema?: CategorizationElement;
+    isEnabled?: boolean;
+    visible?: boolean;
+    path?: string;
+}
+export interface CategoryConfig {
+    label: string;
+    scopes: string[];
+}
+export type CategoryState = CategoryInternalState & CategoryConfig;
+export type CategoriesState = Array<CategoryState>;
+export interface StepperContextDataType {
+    categories: CategoriesState;
+    activeId: number;
+    hasNextButton: boolean;
+    hasPrevButton: boolean;
+    path: string;
+    isOnReview: boolean;
+    isValid: boolean;
+}
+export type CategorizationElement = Category | Categorization;

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

@@ -1,3 +1,4 @@
+import { Categorization, Category } from '@jsonforms/core';
 import { StatePropsOfLayout } from '@jsonforms/core';
 import { AjvProps } from '../../util/layout';
 import { TranslateProps } from '@jsonforms/react';
@@ -10,3 +11,4 @@ export interface FormStepperComponentProps {
     controlledNav?: number;
     readOnly?: boolean;
 }
+export type CategorizationElement = Category | Categorization;

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

@@ -1 +1,2 @@
 export declare const getProperty: any;
+export declare const pickPropertyValues: (obj: any, property: string) => string[];

package/src/lib/util/layout.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from 'react';
+import React, { ComponentType } from 'react';
 import type { UISchemaElement } from '@jsonforms/core';
 import { JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry, JsonSchema, OwnPropsOfRenderer } from '@jsonforms/core';
 import Ajv from 'ajv';
@@ -14,3 +14,5 @@ export interface AjvProps {
 }
 export declare const withAjvProps: <P extends object>(Component: ComponentType<AjvProps & P>) => (props: P) => import("react/jsx-runtime").JSX.Element;
 export declare const LayoutRenderer: ({ elements, schema, path, enabled, direction, renderers, cells, visible, width, }: LayoutRendererProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ReviewLayoutRenderer: ({ elements, schema, path, enabled, direction, renderers, cells, visible, width, }: LayoutRendererProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ReviewGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-import { GoAFormStepStatusType } from '@abgov/react-components-new';
-export type StepInputStatus = {
-    id: string;
-    value: unknown;
-    required: boolean;
-    type: string | string[] | undefined;
-    step: number;
-};
-export interface StatusTable {
-    [key: string]: StepInputStatus;
-}
-export declare const StepperContext: import("react").Context<{
-    updateStatus: (status: StepInputStatus) => void;
-    isInitialized: (_: string) => boolean;
-    stepId: number;
-}>;
-export declare const getCompletionStatus: (table: StatusTable, step: number, isFormChanged?: boolean) => GoAFormStepStatusType | undefined;
-export declare const logRequiredFields: (table: StatusTable, step: number) => void;