@abgov/jsonforms-components 2.81.2 → 2.81.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.esm.js CHANGED
@@ -7608,19 +7608,29 @@ const ReviewHeader = styled.div(_t7$2 || (_t7$2 = _$a`
7608
7608
  display: flex;
7609
7609
  justify-content: space-between;
7610
7610
  align-items: center;
7611
+ gap: var(--goa-space-s);
7611
7612
  width: 100%;
7613
+
7614
+ /* Lets the Change link drop under a long label instead of widening the review. */
7615
+ @media (max-width: 639px) {
7616
+ flex-wrap: wrap;
7617
+ }
7612
7618
  `));
7613
7619
  const ReviewLabel = styled.div(_t8$2 || (_t8$2 = _$a`
7614
7620
  font-weight: var(--goa-font-weight-bold);
7615
7621
  font-size: var(--goa-font-size-4);
7616
7622
  line-height: var(--goa-line-height-3);
7617
7623
  color: var(--goa-color-text-default);
7624
+ overflow-wrap: break-word;
7625
+ min-width: 0;
7618
7626
  `));
7619
7627
  const ReviewValue = styled.div(_t9$2 || (_t9$2 = _$a`
7620
7628
  margin-top: var(--goa-space-m);
7621
7629
  color: var(--goa-color-text-default);
7622
7630
  font-size: var(--goa-font-size-4);
7623
7631
  line-height: var(--goa-line-height-3);
7632
+ /* Review rows are table cells, which can't shrink below their longest word (a URL or email). */
7633
+ overflow-wrap: anywhere;
7624
7634
  `));
7625
7635
  //Check and unchecked are different heights otherwise
7626
7636
  const CheckboxWrapper = styled.div(_t0$2 || (_t0$2 = _$a`
@@ -12543,8 +12553,11 @@ let _$8 = t => t,
12543
12553
  _t26$1,
12544
12554
  _t27$1,
12545
12555
  _t28$1,
12546
- _t29,
12547
- _t30;
12556
+ _t29$1,
12557
+ _t30,
12558
+ _t31,
12559
+ _t32,
12560
+ _t33;
12548
12561
  const DeleteDialogContent = styled.div(_t$9 || (_t$9 = _$8`
12549
12562
  margin-bottom: var(--goa-space-m);
12550
12563
  `));
@@ -12566,7 +12579,33 @@ const ReviewItemFrame = styled.div(_t5$2 || (_t5$2 = _$8`
12566
12579
  margin-bottom: var(--goa-space-l);
12567
12580
  background-color: var(--goa-color-greyscale-white);
12568
12581
  `));
12569
- const ObjectArrayTitle = styled.h3(_t6$2 || (_t6$2 = _$8`
12582
+ const ReviewRow = styled.div(_t6$2 || (_t6$2 = _$8`
12583
+ display: flex;
12584
+ margin-bottom: 0.5rem;
12585
+ align-items: flex-start;
12586
+
12587
+ @media (max-width: 479px) {
12588
+ flex-direction: column;
12589
+ }
12590
+ `));
12591
+ const ReviewRowLabel = styled.strong(_t7$1 || (_t7$1 = _$8`
12592
+ width: 50%;
12593
+ flex-shrink: 0;
12594
+
12595
+ @media (max-width: 479px) {
12596
+ width: auto;
12597
+ }
12598
+ `));
12599
+ const ReviewRowValue = styled.span(_t8$1 || (_t8$1 = _$8`
12600
+ margin-left: 1rem;
12601
+ min-width: 0;
12602
+ overflow-wrap: anywhere;
12603
+
12604
+ @media (max-width: 479px) {
12605
+ margin-left: 0;
12606
+ }
12607
+ `));
12608
+ const ObjectArrayTitle = styled.h3(_t9$1 || (_t9$1 = _$8`
12570
12609
  margin-bottom: var(--goa-space-s);
12571
12610
 
12572
12611
  span {
@@ -12574,25 +12613,25 @@ const ObjectArrayTitle = styled.h3(_t6$2 || (_t6$2 = _$8`
12574
12613
  font-size: var(--goa-font-size-2);
12575
12614
  }
12576
12615
  `));
12577
- const RequiredSpan = styled.span(_t7$1 || (_t7$1 = _$8`
12616
+ const RequiredSpan = styled.span(_t0$1 || (_t0$1 = _$8`
12578
12617
  color: #666666;
12579
12618
  font-weight: var(--goa-font-weight-regular);
12580
12619
  font-size: var(--goa-font-size-2);
12581
12620
  margin-left: var(--goa-space-xs);
12582
12621
  `));
12583
- const TextCenter = styled.div(_t8$1 || (_t8$1 = _$8`
12622
+ const TextCenter = styled.div(_t1$1 || (_t1$1 = _$8`
12584
12623
  text-align: center;
12585
12624
  `));
12586
- const SideMenuItem = styled.div(_t9$1 || (_t9$1 = _$8`
12625
+ const SideMenuItem = styled.div(_t10$1 || (_t10$1 = _$8`
12587
12626
  margin-top: 1rem;
12588
12627
  `));
12589
- const RowFlex = styled.div(_t0$1 || (_t0$1 = _$8`
12628
+ const RowFlex = styled.div(_t11$1 || (_t11$1 = _$8`
12590
12629
  display: flex;
12591
12630
  margin: 1.5rem 0 1.5rem 0;
12592
12631
 
12593
12632
  align-items: flex-start;
12594
12633
  `));
12595
- const RowFlexMenuMain = styled.div(_t1$1 || (_t1$1 = _$8`
12634
+ const RowFlexMenuMain = styled.div(_t12$1 || (_t12$1 = _$8`
12596
12635
  display: flex;
12597
12636
  flex-direction: column;
12598
12637
  align-items: stretch;
@@ -12609,7 +12648,7 @@ const RowFlexMenuMain = styled.div(_t1$1 || (_t1$1 = _$8`
12609
12648
  border-color: var(--goa-color-greyscale-400);
12610
12649
  }
12611
12650
  `));
12612
- const RowFlexMenuLeft = styled.div(_t10$1 || (_t10$1 = _$8`
12651
+ const RowFlexMenuLeft = styled.div(_t13$1 || (_t13$1 = _$8`
12613
12652
  display: flex;
12614
12653
  flex-direction: row;
12615
12654
  align-items: stretch;
@@ -12625,12 +12664,12 @@ const RowFlexMenuLeft = styled.div(_t10$1 || (_t10$1 = _$8`
12625
12664
  border-color: var(--goa-color-greyscale-400);
12626
12665
  }
12627
12666
  `));
12628
- const FlexTabs = styled.div(_t11$1 || (_t11$1 = _$8`
12667
+ const FlexTabs = styled.div(_t14$1 || (_t14$1 = _$8`
12629
12668
  flex-direction: column;
12630
12669
  flex: 1;
12631
12670
  overflow-y: auto !important;
12632
12671
  `));
12633
- const FlexTabsWithMargin = styled.div(_t12$1 || (_t12$1 = _$8`
12672
+ const FlexTabsWithMargin = styled.div(_t15$1 || (_t15$1 = _$8`
12634
12673
  flex-direction: column;
12635
12674
  flex: 1;
12636
12675
  overflow-y: auto !important;
@@ -12639,64 +12678,64 @@ const FlexTabsWithMargin = styled.div(_t12$1 || (_t12$1 = _$8`
12639
12678
  flex-shrink: 1;
12640
12679
  // max-height: 500px;
12641
12680
  `));
12642
- const FlexForm = styled.div(_t13$1 || (_t13$1 = _$8`
12681
+ const FlexForm = styled.div(_t16$1 || (_t16$1 = _$8`
12643
12682
  flex-direction: column;
12644
12683
  flex: 3;
12645
12684
  flex-shrink: 0;
12646
12685
  overflow-y: visible;
12647
12686
  `));
12648
- const TabName = styled.div(_t14$1 || (_t14$1 = _$8`
12687
+ const TabName = styled.div(_t17$1 || (_t17$1 = _$8`
12649
12688
  margin: 1rem 0 1rem 1rem;
12650
12689
  font-weight: 400;
12651
12690
  white-space: nowrap;
12652
12691
  overflow: hidden;
12653
12692
  text-overflow: ellipsis;
12654
12693
  `));
12655
- const Trash = styled.div(_t15$1 || (_t15$1 = _$8`
12694
+ const Trash = styled.div(_t18$1 || (_t18$1 = _$8`
12656
12695
  margin: 0.9rem 0.4rem 0.6rem 0.75rem;
12657
12696
  margin-left: auto;
12658
12697
  `));
12659
- const ListContainer = styled.div(_t16$1 || (_t16$1 = _$8`
12698
+ const ListContainer = styled.div(_t19$1 || (_t19$1 = _$8`
12660
12699
  padding: 0 0 0 0;
12661
12700
  `));
12662
- styled.div(_t17$1 || (_t17$1 = _$8`
12701
+ styled.div(_t20$1 || (_t20$1 = _$8`
12663
12702
  padding: 0 0 var(--goa-space-l) 0;
12664
12703
  `));
12665
- const UpdateListContainer = styled.div(_t18$1 || (_t18$1 = _$8`
12704
+ const UpdateListContainer = styled.div(_t21$1 || (_t21$1 = _$8`
12666
12705
  width: 100%;
12667
12706
  border: 1px solid #dcdcdc;
12668
12707
  padding: var(--goa-space-xl);
12669
12708
  `));
12670
- styled.div(_t19$1 || (_t19$1 = _$8`
12709
+ styled.div(_t22$1 || (_t22$1 = _$8`
12671
12710
  padding: 0 1.5rem 0 0;
12672
12711
  border: 1px solid #dcdcdc;
12673
12712
  `));
12674
- styled.th(_t20$1 || (_t20$1 = _$8`
12713
+ styled.th(_t23$1 || (_t23$1 = _$8`
12675
12714
  background-color: var(--goa-color-greyscale-100) !important;
12676
12715
  vertical-align: top;
12677
12716
  `));
12678
- const ObjectArrayWarningIconDiv = styled.div(_t21$1 || (_t21$1 = _$8`
12717
+ const ObjectArrayWarningIconDiv = styled.div(_t24$1 || (_t24$1 = _$8`
12679
12718
  display: inline-flex;
12680
12719
  align-items: flex-start;
12681
12720
  gap: 0.25rem;
12682
12721
  font-size: var(--goa-font-size-2);
12683
12722
  color: var(--goa-color-interactive-error);
12684
12723
  `));
12685
- const ListWithDetailWarningIconDiv = styled.div(_t22$1 || (_t22$1 = _$8`
12724
+ const ListWithDetailWarningIconDiv = styled.div(_t25$1 || (_t25$1 = _$8`
12686
12725
  display: inline-flex;
12687
12726
  align-items: flex-start;
12688
12727
  gap: 0.25rem;
12689
12728
  font-size: var(--goa-font-size-3);
12690
12729
  color: var(--goa-color-interactive-error);
12691
12730
  `));
12692
- styled.label(_t23$1 || (_t23$1 = _$8`
12731
+ styled.label(_t26$1 || (_t26$1 = _$8`
12693
12732
  color: var(--goa-color-interactive-error);
12694
12733
  font-weight: var(--goa-font-weight-regular);
12695
12734
  font-size: var(--goa-font-size-3);
12696
12735
  line-height: var(--goa-line-height-1);
12697
12736
  font-style: normal;
12698
12737
  `));
12699
- styled.div(_t24$1 || (_t24$1 = _$8`
12738
+ styled.div(_t27$1 || (_t27$1 = _$8`
12700
12739
  margin-top: var(--goa-space-m);
12701
12740
  color: var(--goa-color-interactive-error);
12702
12741
  font-weight: var(--goa-font-weight-regular);
@@ -12704,10 +12743,10 @@ styled.div(_t24$1 || (_t24$1 = _$8`
12704
12743
  line-height: var(--goa-line-height-1);
12705
12744
  font-style: normal;
12706
12745
  `));
12707
- const HilightCellWarning = styled.div(_t25$1 || (_t25$1 = _$8`
12746
+ const HilightCellWarning = styled.div(_t28$1 || (_t28$1 = _$8`
12708
12747
  background-color: transparent;
12709
12748
  `));
12710
- const FixTableHeaderAlignment = styled.div(_t26$1 || (_t26$1 = _$8`
12749
+ const FixTableHeaderAlignment = styled.div(_t29$1 || (_t29$1 = _$8`
12711
12750
  table thead th:nth-child(3) {
12712
12751
  text-align: center;
12713
12752
  }
@@ -12716,22 +12755,22 @@ const FixTableHeaderAlignment = styled.div(_t26$1 || (_t26$1 = _$8`
12716
12755
  text-align: center;
12717
12756
  }
12718
12757
  `));
12719
- const ListWithDetailsReviewCellDiv = styled.div(_t27$1 || (_t27$1 = _$8`
12758
+ const ListWithDetailsReviewCellDiv = styled.div(_t30 || (_t30 = _$8`
12720
12759
  display: 'flex';
12721
12760
  flex-direction: 'column';
12722
12761
  text-align: 'start';
12723
12762
  `));
12724
- const IconsContainer = styled.div(_t28$1 || (_t28$1 = _$8`
12763
+ const IconsContainer = styled.div(_t31 || (_t31 = _$8`
12725
12764
  display: flex;
12726
12765
  align-items: center;
12727
12766
  justify-content: flex-end;
12728
12767
  gap: var(--goa-space-xs);
12729
12768
  padding-bottom: var(--goa-space-xs);
12730
12769
  `));
12731
- const TableContentContainer = styled.div(_t29 || (_t29 = _$8`
12770
+ const TableContentContainer = styled.div(_t32 || (_t32 = _$8`
12732
12771
  padding: var(--goa-space-l);
12733
12772
  `));
12734
- const NoDataMessage = styled.div(_t30 || (_t30 = _$8`
12773
+ const NoDataMessage = styled.div(_t33 || (_t33 = _$8`
12735
12774
  padding: var(--goa-space-xl) var(--goa-space-l);
12736
12775
  color: var(--goa-color-greyscale-700);
12737
12776
  font: var(--goa-typography-body-m);
@@ -13995,7 +14034,9 @@ const StyledBackButton = styled.button(_t$8 || (_t$8 = _$7`
13995
14034
  color: var(--goa-color-interactive-default, #0070c4);
13996
14035
  cursor: pointer;
13997
14036
  display: inline-flex;
14037
+ flex-shrink: 0;
13998
14038
  font: inherit;
14039
+ white-space: nowrap;
13999
14040
  margin: 0;
14000
14041
  padding: 0;
14001
14042
  text-decoration: underline;
@@ -14502,7 +14543,8 @@ let _$5 = t => t,
14502
14543
  _t25,
14503
14544
  _t26,
14504
14545
  _t27,
14505
- _t28;
14546
+ _t28,
14547
+ _t29;
14506
14548
  const ReviewItem = styled.div(_t$6 || (_t$6 = _$5`
14507
14549
  display: flex;
14508
14550
  flex-direction: column;
@@ -14569,19 +14611,27 @@ const ReviewItemSection = styled.div(_t8 || (_t8 = _$5`
14569
14611
  .element-style {
14570
14612
  max-width: 1600px;
14571
14613
  }
14614
+
14615
+ @media (max-width: 639px) {
14616
+ padding: var(--goa-space-l) var(--goa-space-m);
14617
+ }
14618
+ `));
14619
+ const ReviewSectionTitle = styled.h3(_t9 || (_t9 = _$5`
14620
+ margin-bottom: var(--goa-space-m);
14621
+ overflow-wrap: anywhere;
14572
14622
  `));
14573
- const ReviewItemHeader = styled.div(_t9 || (_t9 = _$5`
14623
+ const ReviewItemHeader = styled.div(_t0 || (_t0 = _$5`
14574
14624
  display: flex;
14575
14625
  align-items: center;
14576
14626
  justify-content: space-between;
14577
14627
  margin-bottom: var(--goa-space-xl);
14578
14628
  `));
14579
- const ReviewItemTitle = styled.div(_t0 || (_t0 = _$5`
14629
+ const ReviewItemTitle = styled.div(_t1 || (_t1 = _$5`
14580
14630
  font-size: var(--goa-space-l);
14581
14631
  line-height: var(--goa-space-xl);
14582
14632
  font-weight: 300;
14583
14633
  `));
14584
- styled.div(_t1 || (_t1 = _$5`
14634
+ styled.div(_t10 || (_t10 = _$5`
14585
14635
  color: #0070c4;
14586
14636
  text-decoration: underline;
14587
14637
  outline: none;
@@ -14592,20 +14642,20 @@ styled.div(_t1 || (_t1 = _$5`
14592
14642
  background-color: #e6f7ff;
14593
14643
  }
14594
14644
  `));
14595
- styled.div(_t10 || (_t10 = _$5`
14645
+ styled.div(_t11 || (_t11 = _$5`
14596
14646
  margin-left: var(--goa-space-m);
14597
14647
  `));
14598
- styled.div(_t11 || (_t11 = _$5`
14648
+ styled.div(_t12 || (_t12 = _$5`
14599
14649
  margin-bottom: var(--goa-space-m);
14600
14650
  `));
14601
- styled.div(_t12 || (_t12 = _$5`
14651
+ styled.div(_t13 || (_t13 = _$5`
14602
14652
  margin: var(--goa-space-s);
14603
14653
  width: 100%;
14604
14654
  `));
14605
- styled.h3(_t13 || (_t13 = _$5`
14655
+ styled.h3(_t14 || (_t14 = _$5`
14606
14656
  text-transform: capitalize;
14607
14657
  `));
14608
- const RightAlignmentDiv = styled.div(_t14 || (_t14 = _$5`
14658
+ const RightAlignmentDiv = styled.div(_t15 || (_t15 = _$5`
14609
14659
  @media screen and (max-width: 767px) {
14610
14660
  margin-bottom: var(--goa-space-l);
14611
14661
  }
@@ -14615,7 +14665,7 @@ const RightAlignmentDiv = styled.div(_t14 || (_t14 = _$5`
14615
14665
  margin-bottom: var(--goa-space-l);
14616
14666
  }
14617
14667
  `));
14618
- const FormStepperSummaryH3 = styled.h3(_t15 || (_t15 = _$5`
14668
+ const FormStepperSummaryH3 = styled.h3(_t16 || (_t16 = _$5`
14619
14669
  flex: 1;
14620
14670
  max-width: 100%;
14621
14671
  margin-bottom: var(--goa-space-m);
@@ -14624,43 +14674,47 @@ const FormStepperSummaryH3 = styled.h3(_t15 || (_t15 = _$5`
14624
14674
  font-weight: var(--goa-font-weight-bold);
14625
14675
  overflow-wrap: anywhere;
14626
14676
  `));
14627
- const PageRenderPadding = styled.div(_t16 || (_t16 = _$5`
14677
+ const PageRenderPadding = styled.div(_t17 || (_t17 = _$5`
14628
14678
  margin-top: var(--goa-space-2xl);
14629
14679
  `));
14630
- styled.div(_t17 || (_t17 = _$5`
14680
+ styled.div(_t18 || (_t18 = _$5`
14631
14681
  margin-bottom: var(--goa-space-2xl);
14632
14682
  `));
14633
- const PageBorder = styled.div(_t18 || (_t18 = _$5`
14683
+ const PageBorder = styled.div(_t19 || (_t19 = _$5`
14634
14684
  padding: var(--goa-space-m) var(--goa-space-3xl);
14685
+
14686
+ @media (max-width: 639px) {
14687
+ padding: var(--goa-space-m) var(--goa-space-xs);
14688
+ }
14635
14689
  `));
14636
- styled.div(_t19 || (_t19 = _$5`
14690
+ styled.div(_t20 || (_t20 = _$5`
14637
14691
  .element-style {
14638
14692
  max-width: 1600px;
14639
14693
  }
14640
14694
  `));
14641
- styled.div(_t20 || (_t20 = _$5`
14695
+ styled.div(_t21 || (_t21 = _$5`
14642
14696
  padding: var(--goa-space-xl) var(--goa-space-2xl);
14643
14697
  border: 1px solid var(--goa-color-greyscale-300);
14644
14698
  border-radius: var(--goa-border-radius-xl);
14645
14699
  `));
14646
- styled.div(_t21 || (_t21 = _$5`
14700
+ styled.div(_t22 || (_t22 = _$5`
14647
14701
  margin-top: var(--goa-space-xl);
14648
14702
  display: flex;
14649
14703
  justify-content: space-between;
14650
14704
  `));
14651
- styled.h3(_t22 || (_t22 = _$5`
14705
+ styled.h3(_t23 || (_t23 = _$5`
14652
14706
  color: var(--goa-color-text-secondary) !important;
14653
14707
  margin-bottom: var(--goa-space-l);
14654
14708
  `));
14655
- const CategoryStatus = styled.td(_t23 || (_t23 = _$5`
14709
+ const CategoryStatus = styled.td(_t24 || (_t24 = _$5`
14656
14710
  width: var(--goa-space-xl);
14657
14711
  padding-right: var(--goa-space-xl);
14658
14712
  align-content: center;
14659
14713
  `));
14660
- const Center = styled.div(_t24 || (_t24 = _$5`
14714
+ const Center = styled.div(_t25 || (_t25 = _$5`
14661
14715
  padding-top: 5px;
14662
14716
  `));
14663
- const PageStepperRow = styled.tr(_t25 || (_t25 = _$5`
14717
+ const PageStepperRow = styled.tr(_t26 || (_t26 = _$5`
14664
14718
  ${0}
14665
14719
  `), ({
14666
14720
  disabled
@@ -14685,7 +14739,7 @@ const PageStepperRow = styled.tr(_t25 || (_t25 = _$5`
14685
14739
  outline: 3px solid var(--goa-color-interactive-focus);
14686
14740
  }
14687
14741
  `);
14688
- const SectionHeaderRowTr = styled.tr(_t26 || (_t26 = _$5`
14742
+ const SectionHeaderRowTr = styled.tr(_t27 || (_t27 = _$5`
14689
14743
  & > td {
14690
14744
  border: 0 !important;
14691
14745
  padding-top: var(--goa-space-l);
@@ -14697,7 +14751,7 @@ const SectionHeaderRowTr = styled.tr(_t26 || (_t26 = _$5`
14697
14751
  border-top: none !important;
14698
14752
  }
14699
14753
  `));
14700
- const SummaryRowLink = styled.a(_t27 || (_t27 = _$5`
14754
+ const SummaryRowLink = styled.a(_t28 || (_t28 = _$5`
14701
14755
  position: relative;
14702
14756
  top: var(--goa-space-xs);
14703
14757
  &:focus-visible {
@@ -14706,7 +14760,7 @@ const SummaryRowLink = styled.a(_t27 || (_t27 = _$5`
14706
14760
  }
14707
14761
  padding: 0 var(--goa-space-s) var(--goa-space-xs); var(--goa-space-s);
14708
14762
  `));
14709
- const SummaryTd = styled.td(_t28 || (_t28 = _$5`
14763
+ const SummaryTd = styled.td(_t29 || (_t29 = _$5`
14710
14764
  border: 0 !important;
14711
14765
  padding: 0 !important;
14712
14766
  `));
@@ -15721,25 +15775,13 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
15721
15775
  } else if (isRequiredField && isEmptyValue) {
15722
15776
  reviewError = `${capitalizeFirstLetter(label.replace(/[_-]/g, ' '))} is required`;
15723
15777
  }
15724
- return jsxs("div", {
15725
- style: {
15726
- display: 'flex',
15727
- marginBottom: '0.5rem',
15728
- alignItems: 'flex-start'
15729
- },
15778
+ return jsxs(ReviewRow, {
15730
15779
  "data-testid": `#/properties/${key}-input-${i}-row`,
15731
- children: [jsxs("strong", {
15732
- style: {
15733
- width: '50%',
15734
- flexShrink: 0
15735
- },
15780
+ children: [jsxs(ReviewRowLabel, {
15736
15781
  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, {
15737
15782
  children: " (required)"
15738
15783
  }), " :"]
15739
- }), jsx("span", {
15740
- style: {
15741
- marginLeft: '1rem'
15742
- },
15784
+ }), jsx(ReviewRowValue, {
15743
15785
  "data-testid": `#/properties/${key}-input-${i}-review`,
15744
15786
  children: renderCellColumn({
15745
15787
  data: isEmptyValue ? undefined : value,
@@ -17959,12 +18001,15 @@ const FormStepperReviewer = props => {
17959
18001
  }
17960
18002
  return true;
17961
18003
  };
18004
+ // A section title is shown once, before the first rendered category of that section.
18005
+ let lastShownSectionTitle = '';
17962
18006
  return jsx(StepperOptionsProvider, {
17963
18007
  uischema: uischema,
17964
18008
  children: jsxs(ReviewItem, {
17965
18009
  children: [summaryPageTitle && !jsonForms.readonly && jsx(FormStepperSummaryH3, {
17966
18010
  children: summaryPageTitle
17967
18011
  }), categories.map((category, categoryIndex) => {
18012
+ var _category$options, _category$options$sec, _category$options2;
17968
18013
  // Preserve index stability
17969
18014
  if (!isVisible(category, data, '', ajv, undefined)) {
17970
18015
  return null;
@@ -17985,35 +18030,46 @@ const FormStepperReviewer = props => {
17985
18030
  if (elementsToRender.length === 0) {
17986
18031
  return null;
17987
18032
  }
17988
- return jsxs(ReviewItemSection, {
17989
- className: "jsonforms-table-review-section",
17990
- id: `jsonforms-table-review-section-${categoryIndex}`,
17991
- children: [jsx(ReviewItemHeader, {
17992
- children: jsx(ReviewItemTitle, {
17993
- children: categoryLabel
17994
- })
17995
- }), elementsToRender.map((element, elementIndex) => {
17996
- const stepperElement = Object.assign({}, element, {
17997
- options: Object.assign({}, element.options, {
17998
- stepId: categoryIndex
18033
+ //The tasklist can have a parent section title, we want to display if it exists
18034
+ 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() : '';
18035
+ const showSectionTitle = sectionTitle !== '' && sectionTitle !== lastShownSectionTitle;
18036
+ if (showSectionTitle) {
18037
+ lastShownSectionTitle = sectionTitle;
18038
+ }
18039
+ return jsxs(React.Fragment, {
18040
+ children: [showSectionTitle && jsx(ReviewSectionTitle, {
18041
+ "data-testid": `jsonforms-table-review-section-title-${categoryIndex}`,
18042
+ children: sectionTitle
18043
+ }), jsxs(ReviewItemSection, {
18044
+ className: "jsonforms-table-review-section",
18045
+ id: `jsonforms-table-review-section-${categoryIndex}`,
18046
+ children: [jsx(ReviewItemHeader, {
18047
+ children: jsx(ReviewItemTitle, {
18048
+ children: categoryLabel
17999
18049
  })
18000
- });
18001
- return jsx(GoabTable, {
18002
- width: "100%",
18003
- mb: "m",
18004
- children: jsx("tbody", {
18005
- children: jsx(JsonFormsDispatch, {
18006
- "data-testid": "jsonforms-object-list-defined-elements-dispatch",
18007
- schema: schema,
18008
- uischema: stepperElement,
18009
- enabled: enabled,
18010
- renderers: GoABaseTableReviewRenderers$1,
18011
- cells: cells
18050
+ }), elementsToRender.map((element, elementIndex) => {
18051
+ const stepperElement = Object.assign({}, element, {
18052
+ options: Object.assign({}, element.options, {
18053
+ stepId: categoryIndex
18012
18054
  })
18013
- })
18014
- }, elementIndex);
18055
+ });
18056
+ return jsx(GoabTable, {
18057
+ width: "100%",
18058
+ mb: "m",
18059
+ children: jsx("tbody", {
18060
+ children: jsx(JsonFormsDispatch, {
18061
+ "data-testid": "jsonforms-object-list-defined-elements-dispatch",
18062
+ schema: schema,
18063
+ uischema: stepperElement,
18064
+ enabled: enabled,
18065
+ renderers: GoABaseTableReviewRenderers$1,
18066
+ cells: cells
18067
+ })
18068
+ })
18069
+ }, elementIndex);
18070
+ })]
18015
18071
  })]
18016
- }, categoryIndex);
18072
+ }, `sectionTitle_${categoryIndex}`);
18017
18073
  })]
18018
18074
  })
18019
18075
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/jsonforms-components",
3
- "version": "2.81.2",
3
+ "version": "2.81.3",
4
4
  "license": "Apache-2.0",
5
5
  "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
6
6
  "repository": "https://github.com/GovAlta/adsp-monorepo",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schemaVersion": "1.0.0",
3
- "generatedAt": "2026-11-02T17:47:52.093Z",
4
- "sourceCommit": "da01d224ca485b591dd08d5096ffc4a019da81cf",
3
+ "generatedAt": "2026-11-02T22:14:11.713Z",
4
+ "sourceCommit": "fc155eb29a47b9b04d5089c421c1e35794912e01",
5
5
  "sourcePath": "libs/jsonforms-components/src/index.ts",
6
6
  "rendererCount": 23,
7
7
  "renderers": [
@@ -6,6 +6,7 @@ export declare const Percentage: import("styled-components/dist/types").IStyledC
6
6
  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;
7
7
  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;
8
8
  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;
9
+ 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;
9
10
  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;
10
11
  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;
11
12
  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;
@@ -3,6 +3,9 @@ export declare const MarginTop: import("styled-components/dist/types").IStyledCo
3
3
  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;
4
4
  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;
5
5
  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;
6
+ 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;
7
+ 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;
8
+ 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;
6
9
  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;
7
10
  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;
8
11
  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;