@abgov/jsonforms-components 2.81.1 → 2.81.3

package/index.esm.js

@@ -7608,19 +7608,29 @@ const ReviewHeader = styled.div(_t7$2 || (_t7$2 = _$a`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: var(--goa-space-s);
   width: 100%;
+
+  /* Lets the Change link drop under a long label instead of widening the review. */
+  @media (max-width: 639px) {
+    flex-wrap: wrap;
+  }
 `));
 const ReviewLabel = styled.div(_t8$2 || (_t8$2 = _$a`
   font-weight: var(--goa-font-weight-bold);
   font-size: var(--goa-font-size-4);
   line-height: var(--goa-line-height-3);
   color: var(--goa-color-text-default);
+  overflow-wrap: break-word;
+  min-width: 0;
 `));
 const ReviewValue = styled.div(_t9$2 || (_t9$2 = _$a`
   margin-top: var(--goa-space-m);
   color: var(--goa-color-text-default);
   font-size: var(--goa-font-size-4);
   line-height: var(--goa-line-height-3);
+  /* Review rows are table cells, which can't shrink below their longest word (a URL or email). */
+  overflow-wrap: anywhere;
 `));
 //Check and unchecked are different heights otherwise
 const CheckboxWrapper = styled.div(_t0$2 || (_t0$2 = _$a`
@@ -10251,13 +10261,14 @@ const getNavigationTargetFromParams = params => {
 };
 
 const getStepperPageOptions = uischema => {
-  var _uischema$options$hid, _uischema$options, _uischema$options2, _uischema$options$toA, _uischema$options3, _uischema$options$sub, _uischema$options4, _uischema$options$noA, _uischema$options5;
+  var _uischema$options$hid, _uischema$options, _uischema$options2, _uischema$options$toA, _uischema$options3, _uischema$options$sub, _uischema$options4, _uischema$options$noA, _uischema$options5, _uischema$options$sum, _uischema$options6;
   return {
     hideSubmit: (_uischema$options$hid = uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.hideSubmit) != null ? _uischema$options$hid : false,
     hideSummary: (uischema == null || (_uischema$options2 = uischema.options) == null ? void 0 : _uischema$options2.hideSummary) === true,
     toAppOverviewLabel: (_uischema$options$toA = uischema == null || (_uischema$options3 = uischema.options) == null ? void 0 : _uischema$options3.toAppOverviewLabel) != null ? _uischema$options$toA : BACK_TO_OVERVIEW_LABEL,
     submissionLabel: (_uischema$options$sub = uischema == null || (_uischema$options4 = uischema.options) == null ? void 0 : _uischema$options4.submissionLabel) != null ? _uischema$options$sub : NEXT_BUTTON_LABEL,
-    noAnswerMessage: (_uischema$options$noA = uischema == null || (_uischema$options5 = uischema.options) == null ? void 0 : _uischema$options5.noAnswerMessage) != null ? _uischema$options$noA : NO_ANSWER_MESSAGE
+    noAnswerMessage: (_uischema$options$noA = uischema == null || (_uischema$options5 = uischema.options) == null ? void 0 : _uischema$options5.noAnswerMessage) != null ? _uischema$options$noA : NO_ANSWER_MESSAGE,
+    summaryPageTitle: (_uischema$options$sum = uischema == null || (_uischema$options6 = uischema.options) == null ? void 0 : _uischema$options6.summaryPageTitle) != null ? _uischema$options$sum : ''
   };
 };
 
@@ -12542,8 +12553,11 @@ let _$8 = t => t,
   _t26$1,
   _t27$1,
   _t28$1,
-  _t29,
-  _t30;
+  _t29$1,
+  _t30,
+  _t31,
+  _t32,
+  _t33;
 const DeleteDialogContent = styled.div(_t$9 || (_t$9 = _$8`
   margin-bottom: var(--goa-space-m);
 `));
@@ -12565,7 +12579,33 @@ const ReviewItemFrame = styled.div(_t5$2 || (_t5$2 = _$8`
   margin-bottom: var(--goa-space-l);
   background-color: var(--goa-color-greyscale-white);
 `));
-const ObjectArrayTitle = styled.h3(_t6$2 || (_t6$2 = _$8`
+const ReviewRow = styled.div(_t6$2 || (_t6$2 = _$8`
+  display: flex;
+  margin-bottom: 0.5rem;
+  align-items: flex-start;
+
+  @media (max-width: 479px) {
+    flex-direction: column;
+  }
+`));
+const ReviewRowLabel = styled.strong(_t7$1 || (_t7$1 = _$8`
+  width: 50%;
+  flex-shrink: 0;
+
+  @media (max-width: 479px) {
+    width: auto;
+  }
+`));
+const ReviewRowValue = styled.span(_t8$1 || (_t8$1 = _$8`
+  margin-left: 1rem;
+  min-width: 0;
+  overflow-wrap: anywhere;
+
+  @media (max-width: 479px) {
+    margin-left: 0;
+  }
+`));
+const ObjectArrayTitle = styled.h3(_t9$1 || (_t9$1 = _$8`
   margin-bottom: var(--goa-space-s);
 
   span {
@@ -12573,25 +12613,25 @@ const ObjectArrayTitle = styled.h3(_t6$2 || (_t6$2 = _$8`
     font-size: var(--goa-font-size-2);
   }
 `));
-const RequiredSpan = styled.span(_t7$1 || (_t7$1 = _$8`
+const RequiredSpan = styled.span(_t0$1 || (_t0$1 = _$8`
   color: #666666;
   font-weight: var(--goa-font-weight-regular);
   font-size: var(--goa-font-size-2);
   margin-left: var(--goa-space-xs);
 `));
-const TextCenter = styled.div(_t8$1 || (_t8$1 = _$8`
+const TextCenter = styled.div(_t1$1 || (_t1$1 = _$8`
   text-align: center;
 `));
-const SideMenuItem = styled.div(_t9$1 || (_t9$1 = _$8`
+const SideMenuItem = styled.div(_t10$1 || (_t10$1 = _$8`
   margin-top: 1rem;
 `));
-const RowFlex = styled.div(_t0$1 || (_t0$1 = _$8`
+const RowFlex = styled.div(_t11$1 || (_t11$1 = _$8`
   display: flex;
   margin: 1.5rem 0 1.5rem 0;
 
   align-items: flex-start;
 `));
-const RowFlexMenuMain = styled.div(_t1$1 || (_t1$1 = _$8`
+const RowFlexMenuMain = styled.div(_t12$1 || (_t12$1 = _$8`
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -12608,7 +12648,7 @@ const RowFlexMenuMain = styled.div(_t1$1 || (_t1$1 = _$8`
     border-color: var(--goa-color-greyscale-400);
   }
 `));
-const RowFlexMenuLeft = styled.div(_t10$1 || (_t10$1 = _$8`
+const RowFlexMenuLeft = styled.div(_t13$1 || (_t13$1 = _$8`
   display: flex;
   flex-direction: row;
   align-items: stretch;
@@ -12624,12 +12664,12 @@ const RowFlexMenuLeft = styled.div(_t10$1 || (_t10$1 = _$8`
     border-color: var(--goa-color-greyscale-400);
   }
 `));
-const FlexTabs = styled.div(_t11$1 || (_t11$1 = _$8`
+const FlexTabs = styled.div(_t14$1 || (_t14$1 = _$8`
   flex-direction: column;
   flex: 1;
   overflow-y: auto !important;
 `));
-const FlexTabsWithMargin = styled.div(_t12$1 || (_t12$1 = _$8`
+const FlexTabsWithMargin = styled.div(_t15$1 || (_t15$1 = _$8`
   flex-direction: column;
   flex: 1;
   overflow-y: auto !important;
@@ -12638,64 +12678,64 @@ const FlexTabsWithMargin = styled.div(_t12$1 || (_t12$1 = _$8`
   flex-shrink: 1;
   // max-height: 500px;
 `));
-const FlexForm = styled.div(_t13$1 || (_t13$1 = _$8`
+const FlexForm = styled.div(_t16$1 || (_t16$1 = _$8`
   flex-direction: column;
   flex: 3;
   flex-shrink: 0;
   overflow-y: visible;
 `));
-const TabName = styled.div(_t14$1 || (_t14$1 = _$8`
+const TabName = styled.div(_t17$1 || (_t17$1 = _$8`
   margin: 1rem 0 1rem 1rem;
   font-weight: 400;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 `));
-const Trash = styled.div(_t15$1 || (_t15$1 = _$8`
+const Trash = styled.div(_t18$1 || (_t18$1 = _$8`
   margin: 0.9rem 0.4rem 0.6rem 0.75rem;
   margin-left: auto;
 `));
-const ListContainer = styled.div(_t16$1 || (_t16$1 = _$8`
+const ListContainer = styled.div(_t19$1 || (_t19$1 = _$8`
   padding: 0 0 0 0;
 `));
-styled.div(_t17$1 || (_t17$1 = _$8`
+styled.div(_t20$1 || (_t20$1 = _$8`
   padding: 0 0 var(--goa-space-l) 0;
 `));
-const UpdateListContainer = styled.div(_t18$1 || (_t18$1 = _$8`
+const UpdateListContainer = styled.div(_t21$1 || (_t21$1 = _$8`
   width: 100%;
   border: 1px solid #dcdcdc;
   padding: var(--goa-space-xl);
 `));
-styled.div(_t19$1 || (_t19$1 = _$8`
+styled.div(_t22$1 || (_t22$1 = _$8`
   padding: 0 1.5rem 0 0;
   border: 1px solid #dcdcdc;
 `));
-styled.th(_t20$1 || (_t20$1 = _$8`
+styled.th(_t23$1 || (_t23$1 = _$8`
   background-color: var(--goa-color-greyscale-100) !important;
   vertical-align: top;
 `));
-const ObjectArrayWarningIconDiv = styled.div(_t21$1 || (_t21$1 = _$8`
+const ObjectArrayWarningIconDiv = styled.div(_t24$1 || (_t24$1 = _$8`
   display: inline-flex;
   align-items: flex-start;
   gap: 0.25rem;
   font-size: var(--goa-font-size-2);
   color: var(--goa-color-interactive-error);
 `));
-const ListWithDetailWarningIconDiv = styled.div(_t22$1 || (_t22$1 = _$8`
+const ListWithDetailWarningIconDiv = styled.div(_t25$1 || (_t25$1 = _$8`
   display: inline-flex;
   align-items: flex-start;
   gap: 0.25rem;
   font-size: var(--goa-font-size-3);
   color: var(--goa-color-interactive-error);
 `));
-styled.label(_t23$1 || (_t23$1 = _$8`
+styled.label(_t26$1 || (_t26$1 = _$8`
   color: var(--goa-color-interactive-error);
   font-weight: var(--goa-font-weight-regular);
   font-size: var(--goa-font-size-3);
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-styled.div(_t24$1 || (_t24$1 = _$8`
+styled.div(_t27$1 || (_t27$1 = _$8`
   margin-top: var(--goa-space-m);
   color: var(--goa-color-interactive-error);
   font-weight: var(--goa-font-weight-regular);
@@ -12703,10 +12743,10 @@ styled.div(_t24$1 || (_t24$1 = _$8`
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-const HilightCellWarning = styled.div(_t25$1 || (_t25$1 = _$8`
+const HilightCellWarning = styled.div(_t28$1 || (_t28$1 = _$8`
   background-color: transparent;
 `));
-const FixTableHeaderAlignment = styled.div(_t26$1 || (_t26$1 = _$8`
+const FixTableHeaderAlignment = styled.div(_t29$1 || (_t29$1 = _$8`
   table thead th:nth-child(3) {
     text-align: center;
   }
@@ -12715,22 +12755,22 @@ const FixTableHeaderAlignment = styled.div(_t26$1 || (_t26$1 = _$8`
     text-align: center;
   }
 `));
-const ListWithDetailsReviewCellDiv = styled.div(_t27$1 || (_t27$1 = _$8`
+const ListWithDetailsReviewCellDiv = styled.div(_t30 || (_t30 = _$8`
   display: 'flex';
   flex-direction: 'column';
   text-align: 'start';
 `));
-const IconsContainer = styled.div(_t28$1 || (_t28$1 = _$8`
+const IconsContainer = styled.div(_t31 || (_t31 = _$8`
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--goa-space-xs);
   padding-bottom: var(--goa-space-xs);
 `));
-const TableContentContainer = styled.div(_t29 || (_t29 = _$8`
+const TableContentContainer = styled.div(_t32 || (_t32 = _$8`
   padding: var(--goa-space-l);
 `));
-const NoDataMessage = styled.div(_t30 || (_t30 = _$8`
+const NoDataMessage = styled.div(_t33 || (_t33 = _$8`
   padding: var(--goa-space-xl) var(--goa-space-l);
   color: var(--goa-color-greyscale-700);
   font: var(--goa-typography-body-m);
@@ -13994,7 +14034,9 @@ const StyledBackButton = styled.button(_t$8 || (_t$8 = _$7`
   color: var(--goa-color-interactive-default, #0070c4);
   cursor: pointer;
   display: inline-flex;
+  flex-shrink: 0;
   font: inherit;
+  white-space: nowrap;
   margin: 0;
   padding: 0;
   text-decoration: underline;
@@ -14501,7 +14543,8 @@ let _$5 = t => t,
   _t25,
   _t26,
   _t27,
-  _t28;
+  _t28,
+  _t29;
 const ReviewItem = styled.div(_t$6 || (_t$6 = _$5`
   display: flex;
   flex-direction: column;
@@ -14568,19 +14611,27 @@ const ReviewItemSection = styled.div(_t8 || (_t8 = _$5`
   .element-style {
     max-width: 1600px;
   }
+
+  @media (max-width: 639px) {
+    padding: var(--goa-space-l) var(--goa-space-m);
+  }
+`));
+const ReviewSectionTitle = styled.h3(_t9 || (_t9 = _$5`
+  margin-bottom: var(--goa-space-m);
+  overflow-wrap: anywhere;
 `));
-const ReviewItemHeader = styled.div(_t9 || (_t9 = _$5`
+const ReviewItemHeader = styled.div(_t0 || (_t0 = _$5`
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--goa-space-xl);
 `));
-const ReviewItemTitle = styled.div(_t0 || (_t0 = _$5`
+const ReviewItemTitle = styled.div(_t1 || (_t1 = _$5`
   font-size: var(--goa-space-l);
   line-height: var(--goa-space-xl);
   font-weight: 300;
 `));
-styled.div(_t1 || (_t1 = _$5`
+styled.div(_t10 || (_t10 = _$5`
   color: #0070c4;
   text-decoration: underline;
   outline: none;
@@ -14591,20 +14642,20 @@ styled.div(_t1 || (_t1 = _$5`
     background-color: #e6f7ff;
   }
 `));
-styled.div(_t10 || (_t10 = _$5`
+styled.div(_t11 || (_t11 = _$5`
   margin-left: var(--goa-space-m);
 `));
-styled.div(_t11 || (_t11 = _$5`
+styled.div(_t12 || (_t12 = _$5`
   margin-bottom: var(--goa-space-m);
 `));
-styled.div(_t12 || (_t12 = _$5`
+styled.div(_t13 || (_t13 = _$5`
   margin: var(--goa-space-s);
   width: 100%;
 `));
-styled.h3(_t13 || (_t13 = _$5`
+styled.h3(_t14 || (_t14 = _$5`
   text-transform: capitalize;
 `));
-const RightAlignmentDiv = styled.div(_t14 || (_t14 = _$5`
+const RightAlignmentDiv = styled.div(_t15 || (_t15 = _$5`
   @media screen and (max-width: 767px) {
     margin-bottom: var(--goa-space-l);
   }
@@ -14614,7 +14665,7 @@ const RightAlignmentDiv = styled.div(_t14 || (_t14 = _$5`
     margin-bottom: var(--goa-space-l);
   }
 `));
-const FormStepperSummaryH3 = styled.h3(_t15 || (_t15 = _$5`
+const FormStepperSummaryH3 = styled.h3(_t16 || (_t16 = _$5`
   flex: 1;
   max-width: 100%;
   margin-bottom: var(--goa-space-m);
@@ -14623,43 +14674,47 @@ const FormStepperSummaryH3 = styled.h3(_t15 || (_t15 = _$5`
   font-weight: var(--goa-font-weight-bold);
   overflow-wrap: anywhere;
 `));
-const PageRenderPadding = styled.div(_t16 || (_t16 = _$5`
+const PageRenderPadding = styled.div(_t17 || (_t17 = _$5`
   margin-top: var(--goa-space-2xl);
 `));
-styled.div(_t17 || (_t17 = _$5`
+styled.div(_t18 || (_t18 = _$5`
   margin-bottom: var(--goa-space-2xl);
 `));
-const PageBorder = styled.div(_t18 || (_t18 = _$5`
+const PageBorder = styled.div(_t19 || (_t19 = _$5`
   padding: var(--goa-space-m) var(--goa-space-3xl);
+
+  @media (max-width: 639px) {
+    padding: var(--goa-space-m) var(--goa-space-xs);
+  }
 `));
-styled.div(_t19 || (_t19 = _$5`
+styled.div(_t20 || (_t20 = _$5`
   .element-style {
     max-width: 1600px;
   }
 `));
-styled.div(_t20 || (_t20 = _$5`
+styled.div(_t21 || (_t21 = _$5`
   padding: var(--goa-space-xl) var(--goa-space-2xl);
   border: 1px solid var(--goa-color-greyscale-300);
   border-radius: var(--goa-border-radius-xl);
 `));
-styled.div(_t21 || (_t21 = _$5`
+styled.div(_t22 || (_t22 = _$5`
   margin-top: var(--goa-space-xl);
   display: flex;
   justify-content: space-between;
 `));
-styled.h3(_t22 || (_t22 = _$5`
+styled.h3(_t23 || (_t23 = _$5`
   color: var(--goa-color-text-secondary) !important;
   margin-bottom: var(--goa-space-l);
 `));
-const CategoryStatus = styled.td(_t23 || (_t23 = _$5`
+const CategoryStatus = styled.td(_t24 || (_t24 = _$5`
   width: var(--goa-space-xl);
   padding-right: var(--goa-space-xl);
   align-content: center;
 `));
-const Center = styled.div(_t24 || (_t24 = _$5`
+const Center = styled.div(_t25 || (_t25 = _$5`
   padding-top: 5px;
 `));
-const PageStepperRow = styled.tr(_t25 || (_t25 = _$5`
+const PageStepperRow = styled.tr(_t26 || (_t26 = _$5`
   ${0}
 `), ({
   disabled
@@ -14684,7 +14739,7 @@ const PageStepperRow = styled.tr(_t25 || (_t25 = _$5`
             outline: 3px solid var(--goa-color-interactive-focus);
           }
         `);
-const SectionHeaderRowTr = styled.tr(_t26 || (_t26 = _$5`
+const SectionHeaderRowTr = styled.tr(_t27 || (_t27 = _$5`
   & > td {
     border: 0 !important;
     padding-top: var(--goa-space-l);
@@ -14696,7 +14751,7 @@ const SectionHeaderRowTr = styled.tr(_t26 || (_t26 = _$5`
     border-top: none !important;
   }
 `));
-const SummaryRowLink = styled.a(_t27 || (_t27 = _$5`
+const SummaryRowLink = styled.a(_t28 || (_t28 = _$5`
   position: relative;
   top: var(--goa-space-xs);
   &:focus-visible {
@@ -14705,7 +14760,7 @@ const SummaryRowLink = styled.a(_t27 || (_t27 = _$5`
   }
   padding: 0 var(--goa-space-s) var(--goa-space-xs); var(--goa-space-s);
 `));
-const SummaryTd = styled.td(_t28 || (_t28 = _$5`
+const SummaryTd = styled.td(_t29 || (_t29 = _$5`
   border: 0 !important;
   padding: 0 !important;
 `));
@@ -15720,25 +15775,13 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
               } else if (isRequiredField && isEmptyValue) {
                 reviewError = `${capitalizeFirstLetter(label.replace(/[_-]/g, ' '))} is required`;
               }
-              return jsxs("div", {
-                style: {
-                  display: 'flex',
-                  marginBottom: '0.5rem',
-                  alignItems: 'flex-start'
-                },
+              return jsxs(ReviewRow, {
                 "data-testid": `#/properties/${key}-input-${i}-row`,
-                children: [jsxs("strong", {
-                  style: {
-                    width: '50%',
-                    flexShrink: 0
-                  },
+                children: [jsxs(ReviewRowLabel, {
                   children: [(properties == null || (_properties$key = properties[key]) == null ? void 0 : _properties$key.title) || (label !== key ? label : key.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^./, c => c.toUpperCase())), isRequiredField && jsx(RequiredSpan, {
                     children: " (required)"
                   }), " :"]
-                }), jsx("span", {
-                  style: {
-                    marginLeft: '1rem'
-                  },
+                }), jsx(ReviewRowValue, {
                   "data-testid": `#/properties/${key}-input-${i}-review`,
                   children: renderCellColumn({
                     data: isEmptyValue ? undefined : value,
@@ -17928,7 +17971,6 @@ const GoABaseTableReviewRenderers$1 = [
   renderer: CalloutReviewControl
 }];
 const FormStepperReviewer = props => {
-  var _uischema$options$com, _uischema$options, _uischema$options2;
   const {
     uischema,
     data,
@@ -17937,10 +17979,11 @@ const FormStepperReviewer = props => {
     cells,
     enabled
   } = props;
-  const componentProps = (_uischema$options$com = (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.componentProps) != null ? _uischema$options$com : {};
+  const jsonForms = useJsonForms();
+  // Read from the uischema directly; the provider below is not yet in scope here.
   const {
     summaryPageTitle
-  } = (_uischema$options2 = uischema.options) != null ? _uischema$options2 : {};
+  } = getStepperPageOptions(uischema);
   const categorization = uischema;
   const categories = categorization.elements;
   const rescopeMaps = ['#/properties/albertaAddress', '#/properties/canadianAddress', '#/properties/sin'];
@@ -17958,12 +18001,15 @@ const FormStepperReviewer = props => {
     }
     return true;
   };
+  // A section title is shown once, before the first rendered category of that section.
+  let lastShownSectionTitle = '';
   return jsx(StepperOptionsProvider, {
     uischema: uischema,
     children: jsxs(ReviewItem, {
-      children: [summaryPageTitle && !componentProps.readOnly && jsx(FormStepperSummaryH3, {
+      children: [summaryPageTitle && !jsonForms.readonly && jsx(FormStepperSummaryH3, {
         children: summaryPageTitle
       }), categories.map((category, categoryIndex) => {
+        var _category$options, _category$options$sec, _category$options2;
         // Preserve index stability
         if (!isVisible(category, data, '', ajv, undefined)) {
           return null;
@@ -17984,35 +18030,46 @@ const FormStepperReviewer = props => {
         if (elementsToRender.length === 0) {
           return null;
         }
-        return jsxs(ReviewItemSection, {
-          className: "jsonforms-table-review-section",
-          id: `jsonforms-table-review-section-${categoryIndex}`,
-          children: [jsx(ReviewItemHeader, {
-            children: jsx(ReviewItemTitle, {
-              children: categoryLabel
-            })
-          }), elementsToRender.map((element, elementIndex) => {
-            const stepperElement = Object.assign({}, element, {
-              options: Object.assign({}, element.options, {
-                stepId: categoryIndex
+        //The tasklist can have a parent section title, we want to display if it exists
+        const sectionTitle = ((_category$options = category.options) == null ? void 0 : _category$options.showInTaskList) === true ? String((_category$options$sec = (_category$options2 = category.options) == null ? void 0 : _category$options2.sectionTitle) != null ? _category$options$sec : '').trim() : '';
+        const showSectionTitle = sectionTitle !== '' && sectionTitle !== lastShownSectionTitle;
+        if (showSectionTitle) {
+          lastShownSectionTitle = sectionTitle;
+        }
+        return jsxs(React.Fragment, {
+          children: [showSectionTitle && jsx(ReviewSectionTitle, {
+            "data-testid": `jsonforms-table-review-section-title-${categoryIndex}`,
+            children: sectionTitle
+          }), jsxs(ReviewItemSection, {
+            className: "jsonforms-table-review-section",
+            id: `jsonforms-table-review-section-${categoryIndex}`,
+            children: [jsx(ReviewItemHeader, {
+              children: jsx(ReviewItemTitle, {
+                children: categoryLabel
               })
-            });
-            return jsx(GoabTable, {
-              width: "100%",
-              mb: "m",
-              children: jsx("tbody", {
-                children: jsx(JsonFormsDispatch, {
-                  "data-testid": "jsonforms-object-list-defined-elements-dispatch",
-                  schema: schema,
-                  uischema: stepperElement,
-                  enabled: enabled,
-                  renderers: GoABaseTableReviewRenderers$1,
-                  cells: cells
+            }), elementsToRender.map((element, elementIndex) => {
+              const stepperElement = Object.assign({}, element, {
+                options: Object.assign({}, element.options, {
+                  stepId: categoryIndex
                 })
-              })
-            }, elementIndex);
+              });
+              return jsx(GoabTable, {
+                width: "100%",
+                mb: "m",
+                children: jsx("tbody", {
+                  children: jsx(JsonFormsDispatch, {
+                    "data-testid": "jsonforms-object-list-defined-elements-dispatch",
+                    schema: schema,
+                    uischema: stepperElement,
+                    enabled: enabled,
+                    renderers: GoABaseTableReviewRenderers$1,
+                    cells: cells
+                  })
+                })
+              }, elementIndex);
+            })]
           })]
-        }, categoryIndex);
+        }, `sectionTitle_${categoryIndex}`);
       })]
     })
   });

package/package.json

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

package/renderer-catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-11-02T14:56:18.675Z",
-  "sourceCommit": "33712e7aaecbf06104cab371d856e71d9616efe4",
+  "generatedAt": "2026-11-02T22:14:11.713Z",
+  "sourceCommit": "fc155eb29a47b9b04d5089c421c1e35794912e01",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 23,
   "renderers": [

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

@@ -6,6 +6,7 @@ export declare const Percentage: import("styled-components/dist/types").IStyledC
 export declare const BadgeWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const CompletionTextHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
 export declare const ReviewItemSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ReviewSectionTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
 export declare const ReviewItemHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const ReviewItemTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const Anchor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

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

@@ -5,5 +5,6 @@ export interface StepperPageOptions {
     toAppOverviewLabel?: string;
     submissionLabel?: string;
     noAnswerMessage?: string;
+    summaryPageTitle?: string;
 }
 export declare const getStepperPageOptions: (uischema?: UISchemaElement) => StepperPageOptions;

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

@@ -3,6 +3,9 @@ export declare const MarginTop: import("styled-components/dist/types").IStyledCo
 export declare const NonEmptyCellStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const ToolBarHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const ReviewItemFrame: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ReviewRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ReviewRowLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
+export declare const ReviewRowValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const ObjectArrayTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
 export declare const RequiredSpan: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const TextCenter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;