@abgov/jsonforms-components 2.1.6 → 2.3.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import * as runtime from 'react/jsx-runtime';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useRef, useCallback } from 'react';
-import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAIcon, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoATable, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
+import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAIcon, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoABadge, GoATable, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
@@ -5435,7 +5435,12 @@ let _$6 = t => t,
   _t14$1,
   _t15$1,
   _t16$1,
-  _t17$1;
+  _t17$1,
+  _t18$1,
+  _t19$1,
+  _t20,
+  _t21,
+  _t22;
 const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
   display: flex;
   flex-direction: column;
@@ -5536,6 +5541,30 @@ const TableReviewPageTitleRow = styled.div(_t16$1 || (_t16$1 = _$6`
 const TableReviewCategoryLabel = styled.h3(_t17$1 || (_t17$1 = _$6`
   color: var(--goa-color-text-secondary) !important;
 `));
+const CategoryStatus = styled.td(_t18$1 || (_t18$1 = _$6`
+  width: var(--goa-space-xl);
+  padding-right: var(--goa-space-xl);
+`));
+const TocPageRef = styled.td(_t19$1 || (_t19$1 = _$6`
+  padding-left: var(--goa-space-xl);
+`));
+const TocTitle = styled.h1(_t20 || (_t20 = _$6`
+  padding: 0;
+  margin: 0;
+  padding-left: var(--goa-space-xl);
+  padding-bottom: var(--goa-space-3xl);
+`));
+const TocSubtitle = styled.h2(_t21 || (_t21 = _$6`
+  padding: 0;
+  margin: 0;
+  padding-left: var(--goa-space-xl);
+`));
+const CompletionStatus = styled.div(_t22 || (_t22 = _$6`
+  padding: 0;
+  margin: 0;
+  padding-left: var(--goa-space-xl);
+  padding-bottom: var(--goa-space-xl);
+`));
 
 class ContextProviderClass {
   addDataByUrl(key, url, processDataFunction, token) {
@@ -6485,6 +6514,165 @@ const BackButton = ({
   });
 };
 
+var aCallable$5 = aCallable$9;
+var toObject = toObject$8;
+var IndexedObject = indexedObject;
+var lengthOfArrayLike$1 = lengthOfArrayLike$7;
+
+var $TypeError$6 = TypeError;
+
+var REDUCE_EMPTY = 'Reduce of empty array with no initial value';
+
+// `Array.prototype.{ reduce, reduceRight }` methods implementation
+var createMethod = function (IS_RIGHT) {
+  return function (that, callbackfn, argumentsLength, memo) {
+    var O = toObject(that);
+    var self = IndexedObject(O);
+    var length = lengthOfArrayLike$1(O);
+    aCallable$5(callbackfn);
+    if (length === 0 && argumentsLength < 2) throw new $TypeError$6(REDUCE_EMPTY);
+    var index = IS_RIGHT ? length - 1 : 0;
+    var i = IS_RIGHT ? -1 : 1;
+    if (argumentsLength < 2) while (true) {
+      if (index in self) {
+        memo = self[index];
+        index += i;
+        break;
+      }
+      index += i;
+      if (IS_RIGHT ? index < 0 : length <= index) {
+        throw new $TypeError$6(REDUCE_EMPTY);
+      }
+    }
+    for (;IS_RIGHT ? index >= 0 : length > index; index += i) if (index in self) {
+      memo = callbackfn(memo, self[index], index, O);
+    }
+    return memo;
+  };
+};
+
+var arrayReduce = {
+  // `Array.prototype.reduce` method
+  // https://tc39.es/ecma262/#sec-array.prototype.reduce
+  left: createMethod(false),
+  // `Array.prototype.reduceRight` method
+  // https://tc39.es/ecma262/#sec-array.prototype.reduceright
+  right: createMethod(true)
+};
+
+var fails$2 = fails$s;
+
+var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
+  var method = [][METHOD_NAME];
+  return !!method && fails$2(function () {
+    // eslint-disable-next-line no-useless-call -- required for testing
+    method.call(null, argument || function () { return 1; }, 1);
+  });
+};
+
+var global$8 = global$p;
+var classof$1 = classofRaw$2;
+
+var engineIsNode = classof$1(global$8.process) === 'process';
+
+var $$9 = _export;
+var $reduce = arrayReduce.left;
+var arrayMethodIsStrict = arrayMethodIsStrict$1;
+var CHROME_VERSION = engineV8Version;
+var IS_NODE$4 = engineIsNode;
+
+// Chrome 80-82 has a critical bug
+// https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
+var CHROME_BUG = !IS_NODE$4 && CHROME_VERSION > 79 && CHROME_VERSION < 83;
+var FORCED$1 = CHROME_BUG || !arrayMethodIsStrict('reduce');
+
+// `Array.prototype.reduce` method
+// https://tc39.es/ecma262/#sec-array.prototype.reduce
+$$9({ target: 'Array', proto: true, forced: FORCED$1 }, {
+  reduce: function reduce(callbackfn /* , initialValue */) {
+    var length = arguments.length;
+    return $reduce(this, callbackfn, length, length > 1 ? arguments[1] : undefined);
+  }
+});
+
+var PageStatus;
+(function (PageStatus) {
+  PageStatus["Complete"] = "Completed";
+  PageStatus["Incomplete"] = "Incomplete";
+  PageStatus["NotStarted"] = "Not started";
+})(PageStatus || (PageStatus = {}));
+const getCategoryStatus = category => {
+  return category.isVisited ? category.isCompleted && category.isValid ? PageStatus.Complete : PageStatus.Incomplete : PageStatus.NotStarted;
+};
+const getCategoryStatusBadge = category => {
+  const status = getCategoryStatus(category);
+  const badgeType = status === PageStatus.Complete ? 'success' : 'information';
+  return jsx(GoABadge, {
+    type: badgeType,
+    content: status,
+    ariaLabel: status
+  });
+};
+
+const ApplicationStatus = ({
+  categories
+}) => {
+  const total = categories.length;
+  const completed = categories.reduce((acc, cat) => acc + (getCategoryStatus(cat) === PageStatus.Complete ? 1 : 0), 0);
+  const type = total === completed ? 'success' : 'important';
+  const heading = total === completed ? 'Application complete' : 'Application incomplete';
+  const message = `You have completed ${completed} of ${total} sections.`;
+  return jsx(CompletionStatus, {
+    children: jsx(GoACallout, {
+      type: type,
+      heading: heading,
+      size: "medium",
+      maxWidth: '50%',
+      children: message
+    })
+  });
+};
+
+/* eslint-disable jsx-a11y/anchor-is-valid */
+const TableOfContents = props => {
+  var _a;
+  const testid = 'table-of-contents';
+  return jsx(PageBorder, {
+    children: jsxs("div", {
+      "data-testid": testid,
+      children: [props.title && jsx(TocTitle, {
+        children: props.title
+      }), jsx(ApplicationStatus, {
+        categories: props.categories
+      }), props.subtitle && jsx(TocSubtitle, {
+        children: props.subtitle
+      }), jsx(GoATable, {
+        width: "100%",
+        children: jsx("tbody", {
+          children: (_a = props.categories) === null || _a === void 0 ? void 0 : _a.map((category, index) => {
+            return jsxs("tr", {
+              children: [jsx(TocPageRef, {
+                children: jsx("a", {
+                  "data-testid": `page-ref-${index}`,
+                  href: "#",
+                  onClick: e => {
+                    e.preventDefault();
+                    props.onClick(index);
+                  },
+                  children: category.label
+                })
+              }), jsx(CategoryStatus, {
+                children: getCategoryStatusBadge(category)
+              })]
+            });
+          })
+        })
+      })]
+    })
+  });
+};
+rankWith(1, uiTypeIs('TaskSection'));
+
 const FormStepperPageReviewer = props => {
   const {
     uischema,
@@ -6579,35 +6767,18 @@ const FormStepperPageReviewer = props => {
 };
 withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperPageReviewer)));
 
-// 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 RenderPages = props => {
   const {
-    uischema,
     data,
     schema,
     path,
     cells,
     renderers,
-    visible,
-    t
-  } = props;
+    visible
+  } = props.categoryProps;
   const enumerators = useContext(JsonFormContext);
   const formStepperCtx = useContext(JsonFormsStepperContext);
   const {
-    validatePage,
     goToPage,
     toggleShowReviewLink
   } = formStepperCtx;
@@ -6630,9 +6801,6 @@ const FormPagesView = props => {
   const onCloseModal = () => {
     setIsOpen(false);
   };
-  useEffect(() => {
-    validatePage(activeId);
-  }, [data]);
   return jsxs("div", {
     "data-testid": "form-stepper-test-wrapper",
     children: [jsx(Visible, {
@@ -6658,11 +6826,7 @@ const FormPagesView = props => {
                 style: {
                   marginTop: '1.5rem'
                 },
-                children: [index > 0 && jsx(BackButton, {
-                  testId: "back-button",
-                  link: () => goToPage(activeId - 1),
-                  text: "Back"
-                }), jsxs(PageRenderPadding, {
+                children: [props.renderBackButton(index, activeId), jsxs(PageRenderPadding, {
                   children: [jsxs("h3", {
                     children: ["Step ", index + 1, " of ", categories.length]
                   }), jsx(RenderStepElements, Object.assign({}, categoryProps))]
@@ -6690,7 +6854,7 @@ const FormPagesView = props => {
             }
           }), isOnReview && jsxs("div", {
             "data-testid": "stepper-pages-review-page",
-            children: [jsx(FormStepperPageReviewer, Object.assign({}, props, {
+            children: [jsx(FormStepperPageReviewer, Object.assign({}, props.categoryProps, {
               navigationFunc: goToPage
             })), jsx(PageRenderPadding, {
               children: jsx(GoAButtonGroup, {
@@ -6727,6 +6891,71 @@ const FormPagesView = props => {
     })]
   });
 };
+
+// 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 => {
+  var _a, _b, _c, _d;
+  const data = props.data;
+  const formStepperCtx = useContext(JsonFormsStepperContext);
+  const {
+    validatePage,
+    goToPage
+  } = formStepperCtx;
+  const {
+    categories,
+    activeId
+  } = formStepperCtx.selectStepperState();
+  useEffect(() => {
+    validatePage(activeId);
+  }, [data]);
+  const [showTOC, setShowTOC] = useState(true);
+  const handleGoToPage = index => {
+    setShowTOC(false);
+    goToPage(index);
+  };
+  // Make sure the back button on the first page takes us to the Table of Contents.
+  const renderBackButton = (index, activeId) => {
+    if (index > 0) {
+      return jsx(BackButton, {
+        testId: "back-button",
+        link: () => goToPage(activeId - 1),
+        text: "Back"
+      });
+    }
+    return jsx(BackButton, {
+      testId: "back-button",
+      link: () => setShowTOC(true),
+      text: "Back"
+    });
+  };
+  if (showTOC) {
+    const tocProps = {
+      categories,
+      onClick: handleGoToPage,
+      title: (_b = (_a = props.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.title,
+      subtitle: (_d = (_c = props.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.subtitle
+    };
+    return jsx(TableOfContents, Object.assign({}, tocProps));
+  } else {
+    return jsx(RenderPages, {
+      categoryProps: props,
+      renderBackButton: renderBackButton
+    });
+  }
+};
 const FormStepperPagesControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormPageStepper)));
 
 // Ensure that all children (Category) have valid elements or things tend
@@ -7030,7 +7259,7 @@ var isArrayIteratorMethod$1 = function (it) {
   return it !== undefined && (Iterators$1.Array === it || ArrayPrototype[ITERATOR$3] === it);
 };
 
-var classof$1 = classof$9;
+var classof = classof$9;
 var getMethod$1 = getMethod$5;
 var isNullOrUndefined$1 = isNullOrUndefined$6;
 var Iterators = iterators;
@@ -7041,21 +7270,21 @@ var ITERATOR$2 = wellKnownSymbol$3('iterator');
 var getIteratorMethod$2 = function (it) {
   if (!isNullOrUndefined$1(it)) return getMethod$1(it, ITERATOR$2)
     || getMethod$1(it, '@@iterator')
-    || Iterators[classof$1(it)];
+    || Iterators[classof(it)];
 };
 
 var call$5 = functionCall;
-var aCallable$5 = aCallable$9;
+var aCallable$4 = aCallable$9;
 var anObject$4 = anObject$f;
 var tryToString$2 = tryToString$4;
 var getIteratorMethod$1 = getIteratorMethod$2;
 
-var $TypeError$6 = TypeError;
+var $TypeError$5 = TypeError;
 
 var getIterator$1 = function (argument, usingIterator) {
   var iteratorMethod = arguments.length < 2 ? getIteratorMethod$1(argument) : usingIterator;
-  if (aCallable$5(iteratorMethod)) return anObject$4(call$5(iteratorMethod, argument));
-  throw new $TypeError$6(tryToString$2(argument) + ' is not iterable');
+  if (aCallable$4(iteratorMethod)) return anObject$4(call$5(iteratorMethod, argument));
+  throw new $TypeError$5(tryToString$2(argument) + ' is not iterable');
 };
 
 var call$4 = functionCall;
@@ -7087,13 +7316,13 @@ var call$3 = functionCall;
 var anObject$2 = anObject$f;
 var tryToString$1 = tryToString$4;
 var isArrayIteratorMethod = isArrayIteratorMethod$1;
-var lengthOfArrayLike$1 = lengthOfArrayLike$7;
+var lengthOfArrayLike = lengthOfArrayLike$7;
 var isPrototypeOf$1 = objectIsPrototypeOf;
 var getIterator = getIterator$1;
 var getIteratorMethod = getIteratorMethod$2;
 var iteratorClose = iteratorClose$1;
 
-var $TypeError$5 = TypeError;
+var $TypeError$4 = TypeError;
 
 var Result = function (stopped, result) {
   this.stopped = stopped;
@@ -7129,10 +7358,10 @@ var iterate$3 = function (iterable, unboundFunction, options) {
     iterator = iterable;
   } else {
     iterFn = getIteratorMethod(iterable);
-    if (!iterFn) throw new $TypeError$5(tryToString$1(iterable) + ' is not iterable');
+    if (!iterFn) throw new $TypeError$4(tryToString$1(iterable) + ' is not iterable');
     // optimisation for array iterators
     if (isArrayIteratorMethod(iterFn)) {
-      for (index = 0, length = lengthOfArrayLike$1(iterable); length > index; index++) {
+      for (index = 0, length = lengthOfArrayLike(iterable); length > index; index++) {
         result = callFn(iterable[index]);
         if (result && isPrototypeOf$1(ResultPrototype, result)) return result;
       } return new Result(false);
@@ -7160,13 +7389,13 @@ var createProperty$1 = function (object, key, value) {
   else object[key] = value;
 };
 
-var $$9 = _export;
+var $$8 = _export;
 var iterate$2 = iterate$3;
 var createProperty = createProperty$1;
 
 // `Object.fromEntries` method
 // https://github.com/tc39/proposal-object-from-entries
-$$9({ target: 'Object', stat: true }, {
+$$8({ target: 'Object', stat: true }, {
   fromEntries: function fromEntries(iterable) {
     var obj = {};
     iterate$2(iterable, function (k, v) {
@@ -7176,35 +7405,35 @@ $$9({ target: 'Object', stat: true }, {
   }
 });
 
-var global$8 = global$p;
-var fails$2 = fails$s;
+var global$7 = global$p;
+var fails$1 = fails$s;
 var uncurryThis$1 = functionUncurryThis;
 var toString$1 = toString$f;
 var trim = stringTrim.trim;
 var whitespaces = whitespaces$3;
 
-var $parseInt$1 = global$8.parseInt;
-var Symbol$1 = global$8.Symbol;
+var $parseInt$1 = global$7.parseInt;
+var Symbol$1 = global$7.Symbol;
 var ITERATOR$1 = Symbol$1 && Symbol$1.iterator;
 var hex = /^[+-]?0x/i;
 var exec = uncurryThis$1(hex.exec);
-var FORCED$1 = $parseInt$1(whitespaces + '08') !== 8 || $parseInt$1(whitespaces + '0x16') !== 22
+var FORCED = $parseInt$1(whitespaces + '08') !== 8 || $parseInt$1(whitespaces + '0x16') !== 22
   // MS Edge 18- broken with boxed symbols
-  || (ITERATOR$1 && !fails$2(function () { $parseInt$1(Object(ITERATOR$1)); }));
+  || (ITERATOR$1 && !fails$1(function () { $parseInt$1(Object(ITERATOR$1)); }));
 
 // `parseInt` method
 // https://tc39.es/ecma262/#sec-parseint-string-radix
-var numberParseInt = FORCED$1 ? function parseInt(string, radix) {
+var numberParseInt = FORCED ? function parseInt(string, radix) {
   var S = trim(toString$1(string));
   return $parseInt$1(S, (radix >>> 0) || (exec(hex, S) ? 16 : 10));
 } : $parseInt$1;
 
-var $$8 = _export;
+var $$7 = _export;
 var $parseInt = numberParseInt;
 
 // `parseInt` method
 // https://tc39.es/ecma262/#sec-parseint-string-radix
-$$8({ global: true, forced: parseInt !== $parseInt }, {
+$$7({ global: true, forced: parseInt !== $parseInt }, {
   parseInt: $parseInt
 });
 
@@ -8186,7 +8415,7 @@ const GenerateRows = (Cell, schema, rowPath, enabled, cells, uischema) => {
       cellPath: rowPath,
       enabled
     };
-    return jsx(Cell, Object.assign({}, props), rowPath);
+    return jsx(Cell, Object.assign({}, props), `${rowPath}`);
   }
 };
 const getValidColumnProps = scopedSchema => {
@@ -8274,19 +8503,19 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
   return jsxs(Fragment, {
     children: [
     // eslint-disable-next-line
-    (_a = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _a === void 0 ? void 0 : _a.map(element => {
+    (_a = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _a === void 0 ? void 0 : _a.map((element, index) => {
       return jsx(JsonFormsDispatch, {
         "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
         schema: schema,
         uischema: element,
-        path: rowPath,
+        path: `${rowPath}-${index}`,
         enabled: enabled,
         renderers: renderers,
         cells: cells
       }, rowPath);
     }),
     // eslint-disable-next-line
-    (_d = (_c = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.detail) === null || _c === void 0 ? void 0 : _c.elements) === null || _d === void 0 ? void 0 : _d.map(element => {
+    (_d = (_c = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.detail) === null || _c === void 0 ? void 0 : _c.elements) === null || _d === void 0 ? void 0 : _d.map((element, index) => {
       return jsx(JsonFormsDispatch, {
         "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
         schema: schema,
@@ -8295,7 +8524,7 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
         enabled: enabled,
         renderers: renderers,
         cells: cells
-      }, rowPath);
+      }, `${rowPath}-${index}`);
     }), ((_e = uiSchemaElementsForNotDefined === null || uiSchemaElementsForNotDefined === void 0 ? void 0 : uiSchemaElementsForNotDefined.elements) === null || _e === void 0 ? void 0 : _e.length) > 0 && jsx(JsonFormsDispatch, {
       schema: schema,
       uischema: uiSchemaElementsForNotDefined,
@@ -8303,7 +8532,7 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
       enabled: enabled,
       renderers: renderers,
       cells: cells
-    })]
+    }, `${rowPath}`)]
   });
 });
 const NonEmptyCell = ownProps => {
@@ -8774,7 +9003,7 @@ const AddressInputs = ({
   });
 };
 
-var $$7 = _export;
+var $$6 = _export;
 var uncurryThis = functionUncurryThisClause;
 var getOwnPropertyDescriptor$1 = objectGetOwnPropertyDescriptor.f;
 var toLength = toLength$5;
@@ -8795,7 +9024,7 @@ var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
 
 // `String.prototype.endsWith` method
 // https://tc39.es/ecma262/#sec-string.prototype.endswith
-$$7({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
+$$6({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
   endsWith: function endsWith(searchString /* , endPosition = @length */) {
     var that = toString(requireObjectCoercible(this));
     notARegExp(searchString);
@@ -10237,87 +10466,6 @@ const createDefaultAjv = (...schemas) => {
   return ajv;
 };
 
-var aCallable$4 = aCallable$9;
-var toObject = toObject$8;
-var IndexedObject = indexedObject;
-var lengthOfArrayLike = lengthOfArrayLike$7;
-
-var $TypeError$4 = TypeError;
-
-var REDUCE_EMPTY = 'Reduce of empty array with no initial value';
-
-// `Array.prototype.{ reduce, reduceRight }` methods implementation
-var createMethod = function (IS_RIGHT) {
-  return function (that, callbackfn, argumentsLength, memo) {
-    var O = toObject(that);
-    var self = IndexedObject(O);
-    var length = lengthOfArrayLike(O);
-    aCallable$4(callbackfn);
-    if (length === 0 && argumentsLength < 2) throw new $TypeError$4(REDUCE_EMPTY);
-    var index = IS_RIGHT ? length - 1 : 0;
-    var i = IS_RIGHT ? -1 : 1;
-    if (argumentsLength < 2) while (true) {
-      if (index in self) {
-        memo = self[index];
-        index += i;
-        break;
-      }
-      index += i;
-      if (IS_RIGHT ? index < 0 : length <= index) {
-        throw new $TypeError$4(REDUCE_EMPTY);
-      }
-    }
-    for (;IS_RIGHT ? index >= 0 : length > index; index += i) if (index in self) {
-      memo = callbackfn(memo, self[index], index, O);
-    }
-    return memo;
-  };
-};
-
-var arrayReduce = {
-  // `Array.prototype.reduce` method
-  // https://tc39.es/ecma262/#sec-array.prototype.reduce
-  left: createMethod(false),
-  // `Array.prototype.reduceRight` method
-  // https://tc39.es/ecma262/#sec-array.prototype.reduceright
-  right: createMethod(true)
-};
-
-var fails$1 = fails$s;
-
-var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
-  var method = [][METHOD_NAME];
-  return !!method && fails$1(function () {
-    // eslint-disable-next-line no-useless-call -- required for testing
-    method.call(null, argument || function () { return 1; }, 1);
-  });
-};
-
-var global$7 = global$p;
-var classof = classofRaw$2;
-
-var engineIsNode = classof(global$7.process) === 'process';
-
-var $$6 = _export;
-var $reduce = arrayReduce.left;
-var arrayMethodIsStrict = arrayMethodIsStrict$1;
-var CHROME_VERSION = engineV8Version;
-var IS_NODE$4 = engineIsNode;
-
-// Chrome 80-82 has a critical bug
-// https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
-var CHROME_BUG = !IS_NODE$4 && CHROME_VERSION > 79 && CHROME_VERSION < 83;
-var FORCED = CHROME_BUG || !arrayMethodIsStrict('reduce');
-
-// `Array.prototype.reduce` method
-// https://tc39.es/ecma262/#sec-array.prototype.reduce
-$$6({ target: 'Array', proto: true, forced: FORCED }, {
-  reduce: function reduce(callbackfn /* , initialValue */) {
-    var length = arguments.length;
-    return $reduce(this, callbackfn, length, length > 1 ? arguments[1] : undefined);
-  }
-});
-
 var isPrototypeOf = objectIsPrototypeOf;
 
 var $TypeError$3 = TypeError;

package/package.json

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

@@ -0,0 +1,5 @@
+import { CategoriesState } from './context';
+export interface ApplicationStatusProps {
+    categories: CategoriesState;
+}
+export declare const ApplicationStatus: ({ categories }: ApplicationStatusProps) => JSX.Element;

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

@@ -0,0 +1,8 @@
+import { CategoryState } from './context';
+export declare enum PageStatus {
+    Complete = "Completed",
+    Incomplete = "Incomplete",
+    NotStarted = "Not started"
+}
+export declare const getCategoryStatus: (category: CategoryState) => string;
+export declare const getCategoryStatusBadge: (category: CategoryState) => JSX.Element;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CategorizationStepperLayoutRendererProps } from './types';
+export interface PageRenderingProps {
+    categoryProps: CategorizationStepperLayoutRendererProps;
+    renderBackButton: (index: number, activeId: number) => JSX.Element;
+}
+export declare const RenderPages: (props: PageRenderingProps) => JSX.Element;

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

@@ -0,0 +1,10 @@
+import { RankedTester } from '@jsonforms/core';
+import { CategoriesState } from './context';
+export interface TocProps {
+    categories: CategoriesState;
+    onClick: (id: number) => void;
+    title: string | undefined;
+    subtitle: string | undefined;
+}
+export declare const TableOfContents: (props: TocProps) => JSX.Element;
+export declare const TableOfContentsTester: RankedTester;

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

@@ -16,3 +16,8 @@ export declare const TableReviewItemSection: import("styled-components/dist/type
 export declare const TableReviewItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableReviewPageTitleRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableReviewCategoryLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const CategoryStatus: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
+export declare const TocPageRef: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
+export declare const TocTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const TocSubtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const CompletionStatus: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;